はてなブログでGoogleフォトの画像をアップロードする方法(2017年版picasa使用なし)

SPONSORED LINK

google photo

はてなブログProからワードプレスへの移行を検討していますが、移行において問題になることの一つが画像ファイルの扱いです。
画像の移行先としてGoogleフォトを使うことにしましたが、Googleフォトについてはネット上でやや情報が錯綜していたため、自分でやり方を整理して実行しました。
今回、まとめたやり方について掲載しますのでGoogleフォトへの移行を考えている方は参考にしてみてはいかがでしょうか。

はてなブログを使うリスクと制限

このブログはサイト沿革にある通り、自分で運営していた幾つかのサイトやブログで書いた記事をインポートしながら存続していますが、そろそろワードプレスへの移行を本格的に検討しています。
はてなブログを使うということは、はてながサービスをやめるリスク、はてなからのBANのリスク、はてなテーマのデザイン上の制約、はてな規約の縛りの元で運営することと同義です。

後は、余り知られていないかもしれませんが、「検索キーワード -hatena」「検索キーワード -hatenablog」等で検索されると、検索結果から除外されるという問題もあります。これはこのブログのように独自ドメインのURLを参照させているはてなブログであっても例外ではありません。

自分でサーバーを借りてワードプレスで運営すればこれらのリスクや制限から自由になることが出来ます。

ブログを始めた人がすぐにワードプレスで運営するのはアクセス数の伸び悩みや更新へのモチベーションなどの面で不安がありますが、ある程度検索インデックスとエントリー数を確保しているこのブログには移行の障壁は低いといえます。

はてなフォトライフの問題

はてなブログから他のブログシステムへの移行には、独自ドメイン化やレンタルサーバーにインポートしたログを移してURLなどが崩れないように整形する等の作業があります。
はてなブログからワードプレスの移行についてはこちらのエントリーで分かりやすく問題が整理されています。

http://www.saki-imamura.com/entry/for-easier-move-to-wordpress

当ブログでは独自ドメイン化は既に行っているので、レンタル先サーバーを借りてインポートすれば一応、はてなブログからワードプレスへの移行は出来ます。
が、忘れてはならないのが画像ファイルの問題です。

筆者は現在、はてなフォトライフというはてなのサービスでブログの画像を管理していますが、もしはてなブログをやめてもエントリーの画像自体ははてなフォトライフを参照している状態になります。
はてなフォトライフはブログのエントリーを書く段階で画像を記事に差し込むとはてなフォトライフ側にも自動的に追加されるので、サービスとしては便利はいいです。
ただ、折角はてなブログの制限から開放されても、まだ一部をはてなのサービスに依存している状態になります。

そこで、ワードプレス移行に先立って、まずは画像ファイルだけを別のクラウドドライブに移し、画像を使っているエントリー全てのimgタグを別のクラウドドライブの中を見るように記事内容も修正することにしました。

実際の作業としては次のようなものになります。

  • 画像ファイルを移せるクラウドドライブを探す
  • 画像ファイルを移す
  • 画像を使っているエントリーのimgタグ内のはてなフォトライフURLパスを別のクラウドドライブのURLパスに変更する
  • imgタグのalt属性に代替テキストを入れる(任意)
  • 既存の記事エントリーのアイキャッチ画像のURLパスを修正する

例えば、はてなフォトライフにある画像ファイルのパスを埋め込んだ記事ではこのようなimgタグになっています。

このimgタグのsrc以下にあるURLパスを別のクラウドのURLパスに変える必要があります。また、当然ながら画像も移しておく必要があります。(実際にはhatena-fotolifeのimg classも邪魔なので、imgタグ自体を消します。)

Googleフォトを使う

クラウドドライブの選定ですが、無料でも大容量のドライブが使え、セキュリティ等もしっかりしているというところから、結論としてはGoogleフォトになります
筆者はこれまでGoogleフォトを使っていませんが、その他のGoogleサービスを使っているためアカウントもあり、特に移行が難しくないと判断したのでGoogleフォトを使うことにしました。
容量はデフォルトで15GBもあり、当面は問題なく使えます。

はてなブログでも編集メニューからGoogleフォトの貼り付けが可能なので、簡単に作業出来ます。

人によってはFlickerやInstagramの方が使いやすいということもあると思います。自分で使いやすいと思うサービスであればいいと思います。

Googleフォトの情報が錯綜して紛らわしいため注意

Googleフォトも直近でアップローダーツールが変わったりと情報が錯綜しているため、必要な情報を探すのに少し苦労しました。

まず、Googleフォトの画像ファイルアップロードについては、普通にやるとアプリ経由で行う情報が沢山出てきます。
筆者の環境はPCから画像ファイルをアップロードするのでアプリの方法は不可になります。

次に、検索で出てくる情報で多いものとしては、picasaというツールで画像をアップロードするという方法ですが、2017年時点ではpicasaはなくなっています。

Picasa からの移行

picasaの代わりとして別のアップローダーが提供されています。
Googleフォトパソコン用アップローダ
このアップローダーは自分の環境で動作せず使い方もよく分からないため削除しました。このツールで動く環境であれば以下に書いている方法で行う必要はありません。

自分がやったのは以下に書いているGoogleフォトアップロードサイトに直接ファイルを放り込む方法です。ローカルからクラウドにダイレクトにファイルを放り込め、整形までクラウド上で出来るので一番楽だと思います。

Googleフォトへのアップロード方法

GoogleアカウントでGoogleにログインしておきます。

Googleフォトアップロードサイトにアクセスします。

Googleフォトアップロードサイト

画面の中央辺りに画像ファイルをドラッグドロップすればGoogleフォトに追加されます。
複数の画像を一度にドロップすることも可能です。以下の例では1枚しか入れていませんが、200枚の画像を一度にドラッグしても問題なく動作します。

右:ローカルフォルダから左:Googleフォトにファイルをドラッグして入れる

Googleフォトにファイルが追加されるGooglePhoto_howto

この後、画像をクリックし、右上の編集メニューから画像を一発整形することも出来ます。

右上の編集メニューを押す


右の整形メニューから選ぶ 今回は「シネマ」という効果を選択 完了を押す

整形後の画像の例 オリジナルより発色が豊かになっている

上記のように、基本的にアップロードサイトでのみ作業が完結します。

はてなブログの編集画面からGoogleフォトの画像を入れる

Googleフォトに画像を入れたら、はてなブログ編集画面からGoogleフォトの画像を記事に入れます。
はてなブログ編集画面の右「+」でGoogleフォトを追加します。

GooglePhoto_howto

後はGoogleフォトの「選択ウィンドウを開く」からGoogleフォトにアクセスし、「自分の写真」から貼り付ける画像を選ぶだけです。

GooglePhoto_howto GooglePhoto_howto

Googleフォトから追加した画像の例
GooglePhoto_howto

アルバム毎に分けていればアルバムを選べばその中にある画像ファイルが表示されるのでブログに貼り付ける画像を選びます。
貼り付けた後、一見何も入っていないように見えますが、「編集見たまま」や「プレビュー」にタブを変えればきちんと画像が表示されています。

画像ファイルをアルバムにまとめると分かりやすい

アップロードサイトで画像を追加していくとごちゃごちゃしてくるので、画像のカテゴリー別にアルバムを作ると管理しやすくていいと思います。
筆者は画像のカテゴリーをWindowsPCのローカルでフォルダを作ってその中に入れている分け方ですが、ローカルのフォルダ名と同じ名前のアルバムを作って、追加した画像ファイルをそのアルバムに追加していくだけです。
アルバム毎にまとめれば、用途別に画像ファイルを管理出来ます。

Googleフォトに入れたタイミングで左下に出ている表示からアルバムに追加も出来ます。また、後からフォトの画像ファイルを個別でアルバムに追加していくことも出来ます。

アルバムについては、必須ではないので、面倒であれば全ての画像ファイルをひたすら放り込んでいっても使用上は問題ありません。

Googleフォトの画像埋め込みも可能だが微妙

画像の埋め込みもGoogleフォト側で設定すれば可能でしたが、埋め込んでも[+-]の倍率が入った表示になるので埋め込みは自分はしていません。
埋め込みの方法についてはこちらのエントリーが詳しいです。
Googleフォトの写真や動画をWebページに埋め込むには(追記あり) – Weed.nagoya

altに「代替テキスト」を入れる

Googleフォトの画像を貼り付けた後のHTMLは以下のようになっており、alt属性が空になっています。
このままでも特に問題はありませんが、余裕があればalt=の後のクオテーションの間に代替テキスト(画像の説明文やキーワード)を入れておくといいでしょう。画像が何らかの理由で表示されない場合、代替テキストが表示されます。また、SEO的にも好ましいとされています。

<p><img class=”magnifiable” src=”https://lh3.googleusercontent.com/XXXXXxx/xxxxxx/XXXXXXXXXXXX/xxxxxxxxxxxxxxxx/xxxx/xxx.JPG” alt=”ここに画像の説明文を入れる” /></p>

アイキャッチ画像も忘れずに変えておく

過去記事の画像をはてなフォトライフからGoogleフォトに変える場合もやることは同じです。
ただ、アイキャッチ画像についてもはてなフォトライフのものになっているので、編集オプションのアイキャッチ画像のところで、はてなフォトライフのアイキャッチを削除して、Googleフォトのアイキャッチ画像を選んで記事を更新しておく必要があります。

Googleドライブ管理サイトからはフォトに追加出来ないので注意

Googleドライブ管理サイトについても触れておきます。
こちらはGoogleドキュメントやスプレッドシートに関係したもので、Googleフォトに関しては使うことはありません。

Googleドライブ管理サイト

間違いやすいですが、ドライブ管理サイトではGoogleフォトへのファイルアップロードは出来ません。
「新規」というボタンからファイルのアップロードのメニューが出るので一見出来そうに見えますが、これで追加してもマイドライブという別のエリアにファイルが入ってしまい、Googleフォトからは見えません。
左側にGoogleフォトというメニューがあるものの、このメニューからGoogleフォトで行う作業はありません。

ドライブ管理サイトの「新規ボタン」からはGoogleフォトに追加出来ないので注意

GooglePhoto_howto

この辺りの情報を載せているサイトが今のところ少ないことと、picasaの情報が多いため紛らわしいですが、アップロードサイトにさえ画像を入れておけば、ブログで問題なく使えます。共有等の設定も特に必要ありません。
繰り返しになりますが、Googleフォト側で行う作業はファイルをアップロードサイトに入れるだけでよく、後ははてなブログでその画像を記事に入れるだけです。

諸問題

Googleフォトに画像をアップロードした後、「アルバムに追加」でアルバムに紐付け(そのタイミングで新規のアルバムを作って紐付けも可能)出来ますが、アルバムに追加しても、以下のように日付のアルバムが複数出来ているように見えます。
これははてなブログからGoogleフォト貼り付けの選択ウィンドウを開いた時に表示され、実際にはGoogleフォト側には存在しないアルバムですがこのような現象があります。
ブラウザはIE、Firefox両方で確認したためはてなのAPIの問題と思います。

二つ目は上記のようにはてなブログからGoogleフォト貼り付けのウィンドウが小さいため、画像も似たような画像(キャラクターステータス画面など)では非常に見辛くなっています。一応、画像にカーソルを合わせると画像名は表示されるので、ローカルのファイル名と比較は出来るものの、Googleフォト側ではアップロードされた際に独自のファイル名に変換するため、Googleフォトと貼り付けウィンドウの画像名を比較しながら貼り付けることは出来ません。
このため画像が多い記事では非常に苦労します。
はてなだけの事象なのか、ワードプレスのプラグインでも同じ状態になるのかはやってみないと判りません。

本稿のまとめ

独自ドメインと並んで、画像ファイルの設定は後々重く圧し掛かってくるため、ブログを始めて日が浅い人は特に意識することをお奨めします。
ブログでは、運用歴が長いほど記事が積み重なって、後になればなるほど修正作業が面倒になります。
出来ればブログ開始直後から独自ドメイン化とGoogleフォト等のクラウドサービスを使う運用にした方がいいと思います。

また、例えばはてなブログからライブドアブログにログをインポートしてブログ移行したとしても、Googleフォトの画像はライブドアブログからでも問題なく見えるので、画像をクラウドに移す作業は無駄にはなりません。

The following two tabs change content below.
SPONSORED LINK

この記事をシェアする