blog - みきまるしぇ

雑記

AIが背景をクリッピング

 写真ACなどのサービスを運営する会社ACワークスが、新しく「切り抜きAC」を開始したとのことで、試してみました。

 手元にあった画像を、画面に適当に貼りつけて…それほど待つことなく、結果が。

切り抜きACを試してみました(before)こちらは、貼った画像です。

切り抜きACを試してみました(after)こちらは、切り抜き後。

 それほど大きな画像でなかったとはいえ、わずかな秒数(体感としては10秒くらい)でここまでやってくれるのであれば、楽ですね。今後に期待!!

 

≫ Read More

画像と動画のコツ   2021/04/29   mikimarche

DaVinci Resolve 17の感想

 ようやく動画ができたのですが、ここに前回「格闘中」と書いたのが18日ですし、その前の日からやっていたのだとすれば、12分の動画編集に7日間かかっていたことになります。でも、だいぶ、慣れてきました。

 iMovie に比較して、Davinci Resolveのよい点。

○ 音声ファイルやBGMを聞きながら、編集したい動画部分だけを安心して触れますので、ストレスがありませんでした。
 iMovieにもそういう方法はあったのかもしれませんが、見つけられなかったので、前回は音を別に流しながら動画の長さを編集して、ときどき合わせて確認していたのです。

○ 軽い。動作が。とにかく軽い。

○ オーディオのノイズ低減など、あるといいなぁと思うメニューが、標準装備(それでも無料)。

 また次回の朗読が決まりましたら、次は操作しているときの画面キャプチャなども、ご紹介したいと思います。

≫ Read More

画像と動画のコツ   2021/04/24   mikimarche

DaVinci Resolve 17と格闘中

 近況報告を兼ねて、動画作成の話題を。

 このところ、3月に第一弾を掲載した昔話の朗読動画を完成させようとしていたのですが、録音のほうは奇跡的にミスが少ないファイルができあがったものの(12分の朗読で3分と9分の2ファイルをつなげて完成)、肝心の動画編集のほうが進みません。

 というのも、今回はDavinci Resolveでやってみようと思ったのですが、メニューが多すぎて、どこを触っていいのかわからない…。休み休み1時間ほど格闘しましたが、わからないので、公式サイトにあったチュートリアル動画で、関係ありそうなところを拾いながら、見てみました。

 さすがに今日1日では作業が終わらず、明日以降に、やってみることにします。

≫ Read More

画像と動画のコツ   2021/04/18   mikimarche

パソコン上からのInstagramアカウント切替

 実験してみようと思うまで、気づかないこともあります。この数日、ずっとInstagramについて調べていましたが(個人ブログmikimarulog.meのコンピュータカテゴリも、ぜひご覧ください)、できないと思いこんでずっと実験していなかったのが、ブラウザ上からのアカウント切替。

 というのも、以前にInstagramの副アカウント(バウムクーヘン用)を作りました際に、スマホのように簡単にアカウント切替はできないのかと検索したところ、できないと書いている人がいたので、そうなんだ、できないんだと、さっさとあきらめて、どうしても両方を見たい場合は別のブラウザで見ればいいやと、思ってしまったのです。決断が早すぎました。

 ですが、今日、できることに気づきました。

 副アカウントで「しか」利用していないブラウザ( Chrome )で、画面を見ていました。何かのはずみに切り替えボタンを押しますと、表示アカウントをメインのほうと切り替えるかと、候補が出ているではありませんか!!
(サブでしか利用をしていないとは言っても、一度くらいはメインでログインしたことが、あるのかもしれません。そのあたりの時期は不明です)

 これはもしや、いままでのブラウザ( Safari )で「メインからしか」ログインしていなかったから、候補を出してくれないだけではないかと、いったんInstagramをログアウトして副アカウントではいりなおし、すぐメインで再ログインしましたところ、少しして、Chromeと同じように、アカウント切替の欄に候補が出ていました。

 こんな簡単なことだったとは。
 人間、あきらめが早いとろくなことはありませんが——いや、もしかすると、以前はほんとうにだめだったのかもしれませんね。そのあたりは謎です。ですがいまなら大声で「パソコンの人も、ブラウザ上でアカウントが切り替えられますよ」と、叫んでおきます。

≫ Read More

雑記   2021/04/07   mikimarche

コラボ企画: 新サイト準備中

 コラボと言っても自分のサイト同士、姉妹サイトとのコラボですが、先日からこちらで書いております「HTMLを書いている」話は、新サイト用(お菓子屋さん紹介ページ)でした。

 詳細ページは、ご参加いただけそうな菓子店さまに少しずつご案内準備を進めています。バウムクーヘンを扱うお菓子屋さんを、一方的なご紹介ではなく、きちんと話し合いの上で、掲載していくというものです。

 デザイン…といいますか、色柄が違うだけでどれも構成は同じですが、いまのところ4種類用意しました。1ページだけの簡略版ご紹介ページです。いちおうレスポンシブなデザイン。

baum_sample_col2.jpg

新サイトで選べる色柄(参考)4種類

 こちらから連絡を差し上げる店は、すでに規模の違いはあれネット上で情報を発信している場合が多く(そうでなければわたしがこれまでお取り寄せをできたはずもなく)、わざわざわたしの新企画にお付き合いくださるかどうかはわかりませんが、デザインを考えるだけでも勉強になりましたし、自分としてはいい経験でした。

 ご案内は毎日少しずつ出していく予定ですが、お返事をくださる店が何軒か溜まった段階で、新サイトが発動します。


 新サイトは、まだ表紙だけしかありませんが、 https://baum.mikimarche.com/ を予定しています。

≫ Read More

雑記   2021/04/03   mikimarche

ATOMエディタ

 このところ多くの時間を、ATOMエディタで作業しつつ過ごしています。HTMLのエディタとしては、これほど便利なものはありません。2年ほど前の記事で、わたしは一時期BlueGriffonを使っていたようですが、最近ではずっとATOMです。

 ATOMは無料で使えるのに高機能です。最初は英語状態でダウンロードし、そのあとでメニューを日本語化する必要がありますので、ちょっと度胸がいるかもしれませんが、こちらのブログさんのように丁寧な解説もありますので、まだの方はぜひ挑戦してみてください → 【ATOMエディタまとめ】インストール方法と使い方を紹介!

 初回ダウンロード時は、最小限の機能しかはいっていませんので、パッケージというものをさらにダウンロードして、使いやすくしていきます。

 わたしがよく使うパッケージは Atom Beautify (ぐしゃぐしゃになってしまったソースを見やすく整形)、Preview HTML(作業中のHTMLソースをブラウザのように見せてくれる)、それからPigments(HTMLソースにある色コード部分に色を表示してくれる)や、Color Picker(その場で色を選ぶ)などです。

 それにしても、4月になってしまいましたね。日が経つのが早いです。

≫ Read More

雑記   2021/04/01   mikimarche

犯人は、ブラウザではなかった

 またまた1週間ぶりのご無沙汰です。
 最近ちょっと急ぎでHTMLファイルを書いているのですが(先週書きました自分の用件とは別口で)、昨日も今日も、1時間ずつくらい頭をかかえてしまいました。いくら新しいファイルを載せても変更が反映されず、てっきりブラウザのキャッシュ(とくにHTML文法チェックのため頻繁に使っているChrome)が、犯人だと思っていたのです。

 ところが犯人(?)は…

 顛末は、こんな感じでした。HTMLとCSSをひとつずつ、どちらかが気になって変更するたびに、だいたい5分に1回くらい載せに行っていたのです。FTPクライアントのFileZillaにも、きちんと「上書き」を指定していましたし、FileZilla上では、たしかに該当するタイムスタンプとファイルサイズのものが、サーバに載ったはずでした。

 というわけで、ファイルは確かに新しいものを載せていたのですが、Chromeでリロードをクリックしても、シフト+リロードを押しても、コマンド+リロードを押しても、まったく関係なく、ときには前々回くらいの変更で削除したはずの行を「この行はタグが閉じていない」とエラーを出します。そのときChromeが見ているファイルのソースには、わたしが何回か前の作業で消したはずの行が残っている。

 Chromeのキャッシュだけの問題ではないのかもという思いも、ようやく頭に浮かんできました。同じ時間帯に別ブラウザや別デバイス(たとえばスマホやタブレット)でも、表示が古くなったり新しくなったりするのです。

 ローカルでだいたいの表示確認が済んでいたため、最後にねんのためネットに載った状態でChromeのプラグインでHTML文法チェックをする、というのが本来の目的でした。ですので、最初はあまりChrome以外を真剣に見ておらず、Chromeのキャッシュのことばかり考えていました。

 原因がわからず、仕方ないのでChromeやFilezillaを立ち上げ直しては「載せる→見る」をやっていますと(ブラウザのキャッシュをそのたびに消すのは生産的ではないとの判断で)、何回かに一度は、うまく表示されました。するとほかのブラウザやデバイスでも、調子よくなるのです。

 そこで、もしや…と、ロリポップの設定欄を見に行きますと。

 どうもわたしがこの数ヶ月で作成したサブドメインは「ロリポップ! アクセラレータ」というものが自動でオンになっていたらしく、だいたい10分間くらいは、キャッシュが残っているとのこと。これが、犯人(←失礼ですが)でした。

 このキャッシュは動的なコンテンツのあるサイトに有効ということでしたが、わたしがロリポップで設定を見ると、肝心のWordPressがある場所は設定をしておらず、それ以外のものがオンになっていたようです。速度が上がるならと、さっそくオンにしました。

 それにしても、たかだかHTMLとCSSが数ファイルずつ置いてある小さな場所に、まさかのキャッシュ。驚きましたが、これからは、うまく活用していこうと思います。

≫ Read More

雑記   2021/03/30   mikimarche

近況と、最近の課題

 1週間近くご無沙汰してしまいました。みなさまいかがお過ごしでしょうか。

 近況としましては、姉妹サイトの朗読動画で第二弾を作ろうと思っていまして、録音前の下準備までは順調です。忙しいのはそれくらいであとはのんびりできるかな…と思っていたところ、意外や、雑多な用事が。さらには思いがけなく早い桜の季節到来で、界隈の散歩の予定も調整が必要になり、あたふたしております。

 また、思うところありまして、以前から書いているもののそれほど頻繁な更新ではないブログを、今後はシンプルなHTMLページとしてオフラインでたまに書いて掲載するのもいいかと、検討段階にはいりました。

 具体的には「さくらのブログ」というところで書いているものがいくつかあるのですが、その一部です。すでにして書庫扱いでほとんど更新していないものもあるものの、月に数回程度を書いているものもあります。運営するさくらインターネットのほうからは、本日現在でSSL対応の話もないようですし、今後の掲載に関しては、場所を作ってHTML形式で引き継ぐほうが、気持ちも新たにできてよいかと。

 なんといっても、SSL対応でないブログ(管理画面のみSSL)を、ずっと更新しつづけていくのはどうなのかという思いは、ずっとありました。

 毎日書くほどの人気コンテンツならば、何らかのブログのシステムをインストールして利用するほうがオンラインで編集できてよいのですが、上記の例では、投稿そのものが月に数回程度ですし、SNSのように人様から多くの反応をいただくわけでもないですので、コメント欄も不要に感じます。

 どうせならば、フリーで配布されているHTML(+CSS)サンプルような「かっこよい」、「見た目にぐっとくる」ページを狙うのではなく、自分が無理なく用意できる程度の、シンプルで目にやさしい、あっさりしたページを考えています。そのほうがひさびさに自分の勉強にもなりますし。

 では、また近いうちに。

 

≫ Read More

雑記   2021/03/23   mikimarche

備忘録: Card Validator

 Facebookの場合ならば、リンクしようと思ったページのサムネイルがうまく表示されない、あるいは内容が更新されているはずなのに少し前のリンク内容で表示されてしまっているといったとき、対応方法があります。投稿の右上にある設定画面(3つのドット … のように見えるもの)から「リンク先を更新する」というメニューをクリックすることができます。

 ところが、Twitterではどうしたらいいのか? ——昨日から、これで困っていました。

 実は、先日こちらにご紹介した姉妹サイトで、Twitterに読まれたときサムネイルを出すためのメタタグ(Twitter Card)を、昨日になって追加記入したのですが、Twitterに入力した段階では、HTMLファイル上で肝心の画像URLを書き間違えるという、痛恨のミス。当然のことながら、ツイートに画像は出ませんでした。

 Twitterでは、よほどの人気アカウントでもないかぎり、最初に間違えていて表示されなければ、次に同じサイトを見に来てくれるまでに何日、あるいは何週間かかるかわかりません。

 そこで、更新してほしいTweetの下にスレッドでいろいろ追加を書いてみたり(そうすればTwitter社のロボットが早く来てくれるかと)、ああ〜やはりだめだな、などと、もやもやとした気分で過ごしていましたが、Facebookにあるような「更新」が見つけられなくて、さてどうしたものかと。

 そうこうするうちに1日以上が経過して「そうだ、そもそもメタタグの書き方が間違っていなかったことをどこかで確認しなければ」と、Twitter社の正式なサービスである Card Validator (要ログイン)で、URLを入力し、書き方と表示をチェックしてもらいました。

 すると、書き方は間違えておらず、「ツイートしたときはこんな風に見えるはずです」と、わたしの想像通りの表示がでました。よかったよかった、それならば、次に書くときはちゃんと表示されるに違いない、と思ったのですが。

 その3秒後、昨日から書いていたスレッドを見たら、もう正しく表示されていました。

 Card Validatorを使うことで、Facebookで言うところの「更新」と同じ役割を果たしたのです。これが正式な使い方かどうかはわかりませんが、今回はこれでたすかりましたし、またメタタグについても勉強になりました。


 Twitter Cardについては、ログインしていなくても読める解説記事を見つけましたので、リンクしておきます → 2018.11.05  twitterカードの設定方法!効果的に宣伝するポイントも解説

 

≫ Read More

雑記   2021/03/17   mikimarche

動画作成手順: 後半(iMovie)

 では、後半です。ここからiMovieにはいります。

 各ページを動画で出力したものと、録音しておいた音声のファイルを、iMovieのプロジェクトのパーツとして、画面に入れておきます。そこから使う順序に、下の画面に引っぱっていきます。

動画作成手順(iMovie)

秒数を伸ばすフレームを指定

 これは完成したあとで画面をキャプチャしたため、下部に音声ファイルの緑色がはいってしまっていますが、これは終盤になってから入れたほうが作業がしやすいので、ここでは緑色が見えないものと思って、読んでいただければと思います。

 実際に画面を読み上げたり、あるいは録音しておいた音声を別ソフトで再生させながら「だいたいこの部分は15秒くらい増やしておくか」、「21秒くらいにしておくか」と見当をつけて、そのフレームを何秒フリーズするかを、指定しておきます。方法は以下です。


動画作成手順(iMovie)

フリーズフレームを1回ずつクリック

 クリックして、すぐ脇にカーソルを移動させつつクリックをくり返すと、3秒ずつ増えていきます。あとから増やすより減らすほうが簡単なので、多めに入れておいてよいかもしれません。

 3秒の単位ぴったりで調整できることはまずないでしょうが、調整はあとでできるので、だいたい整ったら次ページ分も連続して呼び出して、全体の動画の長さが、録音の長さと近くなるように、調整していきます。


動画作成手順(iMovie)

全体を見ながら、長さを調整

 3秒ずつ静止のフレームが増え、全体の録音の秒数とも、さほど差違がなくなった段階で、いったん動画のフレーム下に、音声のファイルを入れます(下部の緑色部分)。

 音と動画を一緒に再生し、長く余る場所(3秒以上が余っている場所)が見つかった場合は、音声ファイルをいったん外して、フリーズフレームを指定した欄で「標準」を選び直します。そうすると、フリーズフレームで増えた3秒がなくなります。

 あるいは、1秒にしたい、5秒にしたいといった場合は、画面に赤の四角で囲っておいた場所にカーソルをあててドラッグすると、変更できます。
 画面上にある3.0sなどの表示を変更しても、長さは変更されません。ドラッグで変更します。

 微調整をしながら、また音声ファイルと一緒に流します。編集する都度、必ず音声ファイルを外しして、もどします。音声ファイルを外し忘れますと、そちらも一緒に長さが変更されてしまうようです。

全体が整ったら、動画として出力

 iMovieは、出力前に、予想は何百MBですと、4倍くらいのバイト数を予想するので驚きますが、仮に1GBと出たとしても、それほど大きくありません。わたしは結果として82MBのファイルでしたが、出力前の予想は350MB前後でした。


 今回は、以前から少し触って慣れていたiMovieを使いましたが、数日前に、Davinci Resolve 17という動画編集ソフトの記事を読み、ダウンロードしてみたところ、かなり動作が軽くて速いのです。次は、そちらも使ってみたいと思っています。

≫ Read More

画像と動画のコツ   2021/03/14   mikimarche