りんご道具な生活

iPhone・iPad・Macをもっと活用しよう

028. iPadのみで「はてなブログ」を投稿・更新する私の方法

title= ↑写真のキーボードケースは、記事No.019記事No.043でご紹介したものです。

ringodougu.hatenablog.com

ringodougu.hatenablog.com

PCやMacを使わずにiPadのみで

追記2019/9/25 iPadOS13.1リリース

iPadOSがついにリリースされました。iPadOSでは、SafariでPCサイトを表示する際の互換性が高まっていて、「はてなブログ」をWeb上で編集するときに発生していた諸問題(本記事に書いてあるような)が解決されているようです。なのでSafari上でも、本記事でおすすめしているMarkdownモードだけでなく、編集が楽な「みたままモード」での編集や、そのモードでのHTMLの編集も問題なくできるようになっているようです!!この点については、後日記事にしたいと思います。本記事については、2019年9月までのiOS12以前のiPadに関する記事である旨、理解ください。

軽くて薄くてどこにでも持ち運びやすく、外付けキーボードで文字入力も不満なくできるし、Apple Pencilを使えば手書きでのペン入れ等も超快適と、言うことなし(?)のiPadシリーズ。

しかし、PCやMacで簡単にできて、iPadでは簡単にはできないことが、結構あります。その一つがブログの運営・・・と思いません??。

でも最近、この「りんご道具な生活」ブログの下書きから投稿・更新までを、何とかiPadだけでできるようになりました。

と言うことで今回は、まだブログ開始から1年未満の初心者ですが、下書きから投稿・更新までを10.5インチiPad proのみで行っている私の手順について、備忘録も兼ねてご紹介したいと思います。

下書き環境

画像も扱える下書き環境として、Bear(サブスクリプション版)、iA Writer等を試してきましたが、今はiOS標準の「メモ」アプリに落ち着いています。理由は以下のとおりです。

「メモ」アプリ

私は、ブログの原稿を書くとき、使う画像を下書きの文中に挿入してから推敲するのがクセになっているんですが、「メモ」アプリだと、「写真」アプリ・「ファイル」アプリの両方から、画像をドラッグ&ドロップで挿入できて便利なんです。

また、画像ファイルのリネーム、Googleフォトへの投稿等のため、「ファイル」アプリを使うのですが、「メモ」アプリなら、文中に挿入した画像をそのままの画質で、「ファイル」アプリにドラッグ&ドロップで取り出せてGoodです。

Markdown記法に「対応」していないので、入力中には修飾結果を確認できませんが、シャープやアスタリスクなどのタグをそのまま記入できればそれでよいので、無問題です。

またちょっとした図やメモを手書きですぐに書き込めるのも便利ですね。あと背景が真っ白でなく、メモ紙のようなデコボコした質感があり、実は、文字も紙に押したようにヘコみで表現されているのも気に入ってます。

「メモ」アプリから「ファイル」アプリへ

ringodougu.hatenablog.com

Bear

手書きのメモ挿入や、写真アプリからドラッグ&ドロップで画像挿入でき、Markdownもサポートしてます。有料版を何ヶ月か使ってみましたが、左端のライブラリの一つ一つのエントリの縦サイズが高すぎ、低くできないので、一覧できる数が少ないんですよね。また「タグ管理」は便利ですが、自分には「メモ」アプリの単純な「フォルダ管理」で十分だったりして、結局使うのをやめました。

iA Writer

行移動など編集機能が充実しててiPhoneでも書きやすいのですごく便利です。ただ編集モードとプレビューモードが区別されていて、それが返ってとっつきにくく感じます。(と、感じていましたが、2018年9月15日現在は便利だと感じます)。

また画像の挿入は「写真」アプリ経由では可能ですが、「ファイル」アプリ経由では不可で、また「ファイル」アプリ等へのエクスポートもできません。ついでに、Macのファインダ上ならできることなのに、「ファイル」アプリでiCloudドライブ上のiA Writerフォルダにファイルを投げ込むこともできません(2018年4月21日現在。でしたが2018年9月15日現在は可能のようです。下記の追記をご参照ください)。iOS機器の「ファイル」アプリでこれができたら、iA Writerへのファイル投入がすごく楽なんですけどね。それらがネックとなり、使うのをやめました。もし「ファイル」アプリに対応したら、iA Writerに復帰しようかと思います。

【2018/9/15 追記】 iA Writerの画像などの取り扱いについて追記です。以前は上の段落に書いたように「ファイルアプリでiCloudドライブ上のiA Writerフォルダにファイルを投げ込めない」状態だったのですが、今はそれが出来るようになってます!要約すると、

  • iA Writer内では「写真アプリ」から写真を取り込むのみで、写真ファイルを他のアプリから取り込んだり、他のアプリに書き出したりできない

と言う点は変わらないのですが、

  • ファイルアプリを使えば、iCloud Drive内のiA Writerフォルダにドラッグ&ドロップすることで、必要な写真ファイルを入れる/取り出すが自在にできる

ようになっていますね!使いやすいです。Markdownでの作表や、表を含むプレビューも「⌘R」で楽チンに可能なので、しばらく標準のメモアプリからiA Writerに変えて書いてみようと思います。

投稿の準備

ファイルのリネーム

下書きが完了して、使う画像が確定したら、画像を「メモ」アプリから「ファイル」アプリに取り出します。そしてファイル名をハイフン区切りの英文にします。

画像のレタッチ(2019.1.11追記)

写真をレタッチしたいときは、お手軽かつ高機能な「Pixelmator」を使ってます。

ファイルアプリで画像をプレビューしている状態から共有ボタンでPixelmatorに送って使うことの方が多いです。

写真アプリ内の編集モードからPixcelmatorに送ることもできますが、この場合はフィルタだけしか使えません。一方ファイルアプリのプレビュー状態からPixelmatorに送ると、本来のフル機能が使えます。編集後は、iCloud Driveに書き戻せます。

画像に透かし(2019.1.11追記)

画像に「透かし(ウォーターマーク)」を入れる方も多いと思います。

iOS12の「ショートカット」アプリを使うと、「透かし入れ>大きさを指定サイズにリサイズ>画質を落として容量を軽く>GPS情報などのメタデータexif)の削除>セーブ」を、複数の画像に対して一発で行えます。

自動化のレシピは、いろんな方がネット上に公開しているので、これらを取り込んで、自分の好みに応じて変更して使いやすくしたらよいですよね。

写真アプリ上で複数写真を選んで「共有ボタン>ショートカット」で一発で加工完了です。上書きや、別の画像として保存も選べます。

ringodougu.hatenablog.com

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

はてなフォトライフでは画像ファイル名を希望のものにできないので、専らGoogleフォトを使っています。なおGoogleフォトアプリではなく、敢えてWebページ版を使用。

画像ファイルを「ファイル」アプリから、Googleフォトを開いたSafariにD&Dして、Googleフォトにアップします。今はiPadでもここまでできるのかーって感じですね。続いてGoogleフォトで、その記事のためのアルバムを作成します。

「ファイル」アプリ(左)からSafariで開いたGoogleフォト(右)へドラッグ&ドロップ開始 「ファイル」アプリからSafariで開いたGoogleフォトへドラッグ&ドロップ開始

Safariで開いたGoogleフォトが応答。

Safariで開いたGoogleフォトが応答

Googleフォトでアップロードが始まる。 Googleフォトでアップロードが始まる

↓無事にGoogleフォトに画像がアップロードされた。 無事にGoogleフォトに画像がアップロードされた

Split ViewでなくてもD&D

なお、この操作はスプリットビューでなくても可能です。

まず「ファイル」アプリのアイコンを長押しすると表示される「吹き出し」の中の該当ファイルを、背面のGoogleフォトを開いているSafariドラッグ&ドロップするんです。これでだけでもGoogleフォトへのアップロードが完了します!↓↓驚きまんせん(^^)??

↑アルバム名の英語が変なのは気にしないでください。。。

SafariGoogleフォトを使う理由(2018/5/12追記)

なお、アプリ版ではなくブラウザ上のGoogleフォトを使うのには理由があります。

その理由は、
1)カメラで撮影した旅行や子供達の写真(生活用)と、
2)ブログ用の写真(ブログ用)
とを、明確に区別したいからです。

そのため、私は普段使いのGoogleアカウントとは別に、ブログ用のGoogleアカウントを作成していて、このアカウントのGoogleフォトには、ブログ用の写真だけを保存するようにしています。

もしGoogleフォトのアプリをインストールしてブログ用Googleアカウントでログインしてしまうと、その時点で(WiFi接続であれば)、iCloudフォトライブラリにある「生活用の」写真やビデオを、自動でブログ用のGoogleアカウントのGoogleフォトにアップロードしてしまい、混ぜこぜになって扱いにくくなるからです。これは避けたい。

これに対しSafariなどのWebブラウザGoogleフォトを開けば、ブログ用のGoogleアカウントに切り替えた上で、指定したブログ用の写真だけを、明示的にアップロードすることができます。

投稿する

2018年4月時点では、iOS版の「はてなブログ」アプリは、Googleフォトからの画像貼り付けに対応していない(サポートセンターに確認済み)ので、Safariで対応します。

Safariで開いた「はてなブログ」のwebページで、新規記事を作成し、これにテキストを貼り付け、Google フォトから画像ファイルを挿入します。

まず「記事の管理」へ(2019/2/10追記)

Safariで作業を始めるときは、いきなり記事の編集に入らず、まず一旦前、下の要領で「記事の管理」ページを読み込む(表示する)と良いようです。記事の新規作成や既存記事の編集は、いつもこの「記事の管理」ページを起点にします。想像ですがこの操作によって、はてなブログの編集用インターフェース(投稿ボタンなど)を正しく表示するのに必要な、スクリプトスタイルシートが読み込まれることが効いているようです。↓

最初に「記事の管理」ページを読み込もう

編集モードに注意

「編集モード」については、若干注意点が必要です。私はMarkdown記法にしていますが、その理由は、iPadSafari上で「はてなブログ」Webにアクセスするとき、「見たまま」モードでは編集できないからです(2018年4月現在)。(「はてな記法」は未確認です・・)

編集モードが「見たまま」だとどうなる?

iPadSafariで「見たまま」モードで「記事を書く」したところ。そもそも「公開する」ボタンが、表示されません。

iPadのSafariでのはてなブログは「見たままモード」で操作できない

↓一度「記事の管理」を開いて「記事を書く」に行くと、「公開する」ボタンが現れる。

でも、喜んだのも束の間。。。

iPadのSafariでのはてなブログは「見たままモード」で操作できない

↓画面を上向きにスクロールすると「公開する」ボタンを含む画面全体がスクロールしてしまい、後悔する(編集窓は機能していない)。。。

iPadのSafariでのはてなブログは「見たままモード」で操作できない

↓何てこったい!

iPadのSafariでのはてなブログは「見たままモード」で操作できない

↓HTML編集に至っては、カーソル移動さえも効きません。お手上げです(・◇・)/~~~。

iPadのSafariでのはてなブログは「見たままモード」ではHTMLも編集できない

投稿時の編集モード:Markdown記法

ところが、iPadSafariで、編集モードを「Markdown記法」にしておくと、各ボタンはちゃんと機能します。右端のボタンも全て。↓↓Googleフォト」ボタンも使用可能(^^)/。ありゃーす。

iPadのSafariでのはてなブログは「Markdown記法なら使用できる

編集と更新は「はてなブログ」アプリで

画像を挿入することで、Markdown形式の原稿の途中途中に、画像のHTMLタグが入ったMarkdown原稿ができます。ここからはテキスト編集のやりやすい「はてなブログ」アプリを開き、挿入した画像のHTMLタグ(style、title、alt等の属性)や、本文を編集します。

(なおiPadで外付けキーボードを使っているなら、「はてなブログ」アプリで編集中は、「コマンド+P」で押すと、編集←→プレビューを行き来できます。ただ編集中にプレビューに移動しても、ちょうど編集中の箇所まで移動してはくれないので、スクロールするために画面タッチせざるを得ないので、キーボードショートカットのメリットはあまりないかも)

「はてなブログ」アプリは、テキスト編集に力を発揮。

はてなブログ」アプリも、編集モードはMarkdown記法です。Markdown記法に設定しておくと、太字化や文字色の変更などの修飾作業はやりにくいけど、HTMLが混在したテキストをサクサク編集できるのです。

「見たまま」モードだと、文章の装飾はやりやすい反面、現時点ではHTML編集ができません。画像のタグを編集したい自分としては、NGなんです。

Safariでの編集と「はてなブログアプリ」併用時の注意点

Safariでの編集と「はてなブログアプリ」を併用する場合、注意が必要です。

それは、例えばある記事をSafariでたった今更新したばかりの場合など、「はてなブログ」アプリ内の記事データベースが更新されていない(最新データを読込んでいない)場合があることです。

なので、「はてなブログ」アプリで編集作業を始める前に、記事一覧をスワイプダウンするなどして最新情報を読み込んでから、目的の記事編集をするように心がけた方が、古い記事で上書きしてしまって「がびょ〜ん」とならなくて済むでしょう。

まとめ

iPadをPCの代替として使おうとすると、まだまだ様々な制約に突き当たります。でも一つずつ、iPadiPhoneでできることを増やしていけると楽しいですね〜!皆さんの何かのご参考になれば幸いです。

(もしよろしければ「読者になる」ボタン(最上端もしくは下の方にあります)を押してくださいませ。なおプロフィール写真は、私が小学生のころ(数十年前)のものです)

次の記事は...

ringodougu.hatenablog.com

記事一覧(ブログトップ)へ