Androidでモブログは不可能じゃない。
Androidでもモブログをすることは不可能じゃありません。モブログはiOSだけではなく、Androidでも出来ます！
私はブログ更新をほぼ全てAndroidのスマートフォン1つで行ってきました。
前回も同様な記事を書いたのでこちらも合わせてご覧ください。
今回はAndroidでモブログをする手順をまとめたいと思います。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
01.アイキャッチ画像を作成
まず初めにアイキャッチ画像を作成していきます。この記事のアイキャッチ画像もAndroidスマートフォンで作成しています。
画像加工の記事は過去にも書いています。
今回使用するアプリは「Photoshop touch for Phone」です。
素材を切り抜く
画像を切り抜きます。左下のツールから「自動選択ツール」を選び、白い部分をタップします。
すると白い部分が範囲指定されるので、左上の「選択範囲」のメニューから「消去」を選択します。
画像の色を変更する
素材を切り抜いたらドロイドくんの色を変えます。左上の「選択範囲」のメニューから「選択範囲の反転」を選択します。
するとドロイドくんを選択する事ができるので、右上のメニューより「塗りつぶしとストローク」を選択します。
選択すると、ドロイドくんが単色で塗りつぶされます。今回は「#動物はあなたのごはんじゃない」のパロディなので、カラーをスポイトツールで拾ってきました。
ちなみに淡いオレンジ色のカラーは「赤233 緑114 青82」です。これから画像作る方は参考にどうぞ。
出来た画像は左上の「保存」をタップして保存しておきます。
ドロイドくんの画像を書き出す
選択画面から下のボタンより書き出しを行います。今回は透過部分があるので、pngで書き出します。
データフォルダを見ると「Adobe® Photoshop® Touch」というフォルダに画像が格納されています。
画像を元画像に貼り付ける
パロディ元の素材を「Photoshop touch for Phone」で開き、左下のツールから「長方形選択ツール」を選び、テキストと画像部分を選択します。
先ほどと同様に、右上のメニューより「塗りつぶしとストローク」を選択します。これから元画像にドロイドくんの画像を貼り付けます。
右下のレイヤーツールから「+」ボタンを選択するとレイヤーを追加できます。ここでは「写真レイヤー」を選択します。
画像を貼り付ける事が出来ました。
続いて9個の点を動かしてサイズを調整します。
これで下絵は完成です。画像を書き出しておきます。
画像にテキストを入れる
画像にテキストを入れるには「Phonto」というアプリを使用します。
右上の画像アイコンを押して、先ほど作成した画像を開きます。
画像を開いたら、右上のペンのアイコンを押して文字を追加します。
文字が表示されました。あとは文字のサイズ・フォント・色・位置を調整して保存します。
フォントは「M+ FONTS」を使用しています。
フリーで高品質なフォントを商用利用可で提供しております。
M+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開しているアウトラインフォントです。
引用元：M+ OUTLINE FONTS
これでアイキャッチ画像が完成しました。
02.テキストエディタで本文を入力。
次にテキストエディタで本文を入力します。今回使用するアプリはお気に入りの「Jota+」です。
以前もこのブログで紹介しました。
Jota+とBluetoothキーボードを組み合わせるとPCと変わらない速度で高速に文字入力をすることが出来ます。Google日本語入力などを使えば変換候補も賢いです。
そしてさらにもうひと工夫！IMEでHTMLを辞書登録をして1〜2文字入力するだけでHTMLが出てくるように登録しました。
zen-codingの簡易版ような感じで、「h1」と入力すると<h1></h1>が出てくるようにしています。
さらにJota+のPROキーを購入すると定型文を99個まで登録できるので、私はこちらにも登録しています。
これで快適に文章を書くことが出来ますね。
03.ブックマークレットを使いリンクを取得
文章が作成できたらブックマークレットを使用してリンクを作成します。
ブックマークレットって何だ？という方は以下の記事が分かりやすいです！
- [Å] ブックマークレットって何？って人に「使うと便利なツールだよ！」って話をしてみる | あかめ女子のwebメモ
- [Å]【ブックマークレットの使い方】マスターすればブログ書くのが超爆速！！！ | あかめ女子のwebメモ
Creator Clipでよく使っているブックマークレットをご紹介します。
shareHTML
↑のようなサムネイル付きのリンクを簡単に作成することが出来ます。
ブックマークレットを作成
「shareHTML」へアクセスしてブックマークレットを作成します。
私は出力方法を「ポップアップのみ」書式テンプレートを「左サムネイル大 – alignleft」にしています。
設定が出来たら「Bookmarkletを生成する」ボタンを押します。
ボタンを押すと個人向けBookmarkletという項目が出てきますので、その下にある「iPhone登録用：登録後 ?以前を削除」のリンクを長押しし、リンクのアドレスをコピーします。
コピーしたらこのページをブックマーク登録します。Google Chromeの場合、メニューボタンを押して右上の☆アイコンをタップでブックマークに登録できます。
ここに先ほどコピーしたリンクを貼り付けて、「shareHTML」という名前で登録します。このとき指示通り?以前を削除しないと動作しません。
これでブックマークレットの登録が完了しました！
使い方
次は実際に使ってみましょう。
リンクを作成したいページを開き、アドレスバーをタップして「shareHTML」と入力します。すると左に★アイコンのついたリンクが出てくるのでそこをタップします。
しばらくするとポップアップが表示されます。ここにはリンクの中にメモが入力出来ます。今回は使用せずそのままOKを押します。
リンクタグが生成されるので、全て選択し、本文の中に貼り付けます。
カエレバ
「カエレバ」はブログ上で商品を紹介するときに使用します。
「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます
引用元：「カエレバ」ブログパーツとは？
ブックマークレット登録方法
「カエレバ」へアクセスし、あらかじめ自分のアフィリエイトIDを登録します。
アフィリエイトIDを登録したら、利用方法の●ブックマークレットからブックマークレットを登録します。
利用方法
Amazonや楽天などの対応している通販サイトなどで紹介したい商品の詳細ページを開き、shareHTMLと同様にアドレスバーから「カエレバ」を選択します。
すると別窓でカエレバのページにコードが生成されているので、コピーして本文に挿入します。
実際に生成されたコードが以下になります。
appHTML for Android
Androidアプリを紹介するときに使用するツールです。
ブックマークレット版の「gPLAYHTML」というものも別の方が作成していますが、PCブラウザでないと使えないため、WEBアプリとして使用できる「appHTML for Android」を使用します。
作者様の解説ページです。
AppHtml for Android on the Web – ブログやツイートでAndroidアプリを紹介するツール | 代助のブログ
使い方
「AppHtml for Android」へアクセスすると以下のようなフォームがあります。
書式を選び、Google Playストアのアプリ詳細画面URLを貼り付けることでアプリ紹介のHTMLが生成できます。
アプリ詳細画面URLはGoole Playアプリを起動し、紹介したいアプリを検索して商先画面から右上の「共有」アイコンから取得できます。
今回はJota+にインテントしてURLをコピーしました。
「AppHtml for Android」へ戻り、URLを貼り付けて送信ボタンを押します。
送信ボタンを押すと下にHTMLが生成されます。
04.インテントでWordPress for Androidに飛ばす
本文の入力が終わったら、インテントを使って「Jota+」から「WordPress for Android」に飛ばします。
Androidではサードパーティ製のWordPressがほとんどなく、結局公式のアプリを使用することになります。
ここはするぷろなどの高性能なモブログアプリが使えるiOSが有利ですね。。
Jota+で「メニュー」→「設定」→「その他」→「ダイレクトインテント」→「[ダイレクトインテント送信先]」から「WordPress」を選択します。
選択したらメニューに「WordPress」の項目が増えています。
「WordPress」を選択すると「WordPress for Android」に本文を送る事が出来ます。
iOSだとURLスキームなどを使ってこのようなことをするそうですが、Androidでは共有メニューから連携することが出来ます。
05.アイキャッチと画像を添付
WordPress公式アプリでは、タイトルやカテゴリー・タグの設定の他にもアイキャッチ画像や本文の画像を添付していきます。
右下にある写真のアイコンから「ギャラリーから写真を選択」をタップします。
画像を選択すると本文に画像が挿入されます。画像の右下にある鉛筆のアイコンを押すと画像サイズやアイキャッチの設定が出来ます。
画像の添付などが終わったら一度下書きに保存しておきます。
06.ブラウザでパーマリンク変更・最終チェック
最後にブラウザでWordPressの管理画面に行き、下書きした記事のパーマリンクを変更します。
最後に誤字・脱字がないか。文章は読みにくくないか。レイアウトは崩れていないかなどを確認します。
この時によくあるのが、タグがむき出しになっていたり<h2>や<h3>などの見出しタグが<strong>に置き換わっていたりします。
原因はWordPress公式アプリがビジュアルエディタになっているからみたいです。
仕方がないので、ブラウザ上で本文を貼り付けて更新しました。この仕様どうにか改善してくれないかな…。
更新後は問題なく表示されたので、この記事を公開することが出来ました。
07.デモページ作成
今回は必要なかったので作成しなかったのですが、コーディング関係の記事の場合デモページを作っています。
これもJota+を使用してコーディングしています。
ある程度テンプレートを作成していているのでそこまで時間を掛けていないです。
08.まとめ
長くなりましたが、私はこんな感じでブログを更新しています。結構な頻度で本文のタグがめちゃくちゃになるので、本文を入力したらそのままブラウザに貼り付けた方が良さそうですね。
まだまだ非効率な方法だと思うので、ここをこうしたほうがいいよ！なんて意見があれば嬉しいです。
