iOSからGitLab Pagesブログを編集する方法 | from: about GitLab.com

法律: IT メディア 解説記事 ウェブ制作 業務効率化 アプリ フノス(訳者)


 サイトのビルドやHTMLのアップロードは、コンピューター上で行うことは確かです。
 でも、「スマホやタブレットはコンピューターです」って昨今よくメディアなどで取り上げられていましたよね。
 だったらどうして、現実にスマホとパソコンでは同じ作業ができないんだと、いまひとつ釈然としない方も多いはず。

 大丈夫です。少なくともGitにおいては、きちんとしたやり方がありますよ。
 とりあえず、ここで紹介する方法は、iOSを使ったやり方ですが、
 iOSデバイスさえあれば、サイトの更新は”いつでもどこでも”できるようになります。
 これが分かれば、サイトの生産性アップ間違いなしです。
  ぜひ、速さと抜群の安定感が魅力の静的サイト・ジェネレータ(SSG)GitLab Pagesで使いこなしてください。

 

  必要事項

  まずは、GitLab.comにサイトがすでにセットアップされていることが必要です。
 もちろん、方法は簡単ですし、無料なのでお金の心配はありません。

 あと、SSGを使わないでサイトを作る方法もないことはありませんが、
 ここでは「静的サイト・ジェネレータを使って、サイトを作成している」ことを前提としています。

 説明では、Hugoを使ったサイトを例にとって進行していきますが、静的サイト・ジェネレータであれば何でも構いません。静的サイト・ジェネレータ側の設定はほとんどないからです。
 (今回使用したテンプレートはこちら。)


 とりあえず、ここまでが下準備です。


 そして、iOSデバイス側では、Git管理ができるアプリを導入したり、テキスト編集ができる環境を整えていきます。


 今回使用したアプリケーションは、2つ。
 1つ目は「Working Copy」。こちらをGit管理に使います。

  リモートレポジトリにプッシュするなどの作業が可能です。こちらは無料アプリ。

 2つ目は「Editorial」。テキスト編集はこちらで行いましたが、有料です。


 もちろんアプリケーションも、要件を満たしていれば他のもので構いません。
  GitLab Community Applications pageというところが参考になります。
 ぜひ、そこでご自分に合ったアプリケーションを探してください。

 

  大まかな工程

  GitLab Pagesを使っている方ならだれでも、 GitLab CI を使ってウェブサイトのビルドや展開を自動化していることでしょう。
 また、どのブランチに変更をかけたかがはっきりしているときにしか、変更を反映しないようにも設定しているはずです(例:master など)。

 GitLab CIは決まったブランチに新しい変更点があると、GitLabランナーを動かし始めます。ここでランナーがする動作は、 .gitlab-ci.ymlファイル内に設定しているスクリプトに従います。

 ですが、このファイルはSSGでサイトを立ち上げた時点で、すでにセットアップは済ませてありますね。
 とくにSSGの設定をテンプレートのフォークで済ませたという場合は、もれなく .gitlab-ci.yml のサンプルファイルが付属しているのですが、これで十分です。
 CIファイルの設定ができているのなら、iOSからサイトをビルドしても問題はありません。

 

  それではさっそく、iOS側の操作に移りたいのですが、その前に。
 
 ちょっと、皆さんが「どのような状況で、携帯端末からブログを更新することになったか」をちょっとリアルに想定してみてください。

 普段の生活でなら、ちょっと我慢してでもパソコンのところに戻ってブログを編集するはずです。

 ですが、用事ができたかして遠出でもして、その先で期待はずれなくらい暇だったとかで、空いた時間にちょっと出先からブログを更新したくなったとします。
 そんなときですから、だいたい手元に大きなパソコンはありませんね。
 スマホやタブレットからでも作業ができたら便利かもしれません。

 ただ、「出先のへんな気分で書いた記事をそのままアップしたら、後から読んでみてところどころ恥ずかしい内容かもしれない、どうしよう」という心配もありますね。

 そのようなときにも、「master」ブランチは便利です。
 変更の下書きだけは携帯で作成しておいて、あとは普段のパソコンからプッシュする方法も大いにありです。

 そんなわけで、まずはGitの管理から始めましょう。
 アプリケーションを開いてGitLabに変更のコミットと、プッシュをしていきます。
 これからしていく説明を、実際にあなたのiPhoneでしていくイメージを思い浮かべてくださいね。


 

  具体的な方法

  (1)サイトレポジトリのクローンを作る

   Git管理アプリから、GitLab アカウントにログインして、ウェブサイトのレポジトリをクローンするのですが、このやり方は各アプリケーションの説明に従ってください。
 Working Copyの場合は、ユーザーガイドにそれが書いてありますから。
 

  (2)新しいブランチを作る

  次に、これもまたアプリの説明に従って、新しいブランチを作成します。

 Editorialの場合、「Repository」と書かれている項目をタップして、
 つぎに表示される「Branch」をタッチ。それから、一番右上にあるYの小文字をひっくり返したようなマークを押します。
 そこで新しいブランチが作成されます。

 そしたら次はブランチに名前をつけます。(ここでよくあるのが、記事タイトルをつけて、その下に正しい日付を入れること。)終わったらDoneを押す。
 そして左上の戻るボタンを2回押してレポジトリに戻ります。
 (写真1)Editorialの使い方

 

  (3)新しい記事が入るファイルを作る

  つぎに、作成した新たなブランチの中のきちんとした場所に、記事となるファイルを作成しなくてはなりません。Hugoのデフォルト設定では、「/content/post」がそのファイルの場所になっています。
 試しにそこを開いてみると、今まで投稿した記事などもリストアップされていたりするので、すぐにわかるかもしれません。

 ナビゲーションバーの右上に+ボタンがありますね。これをタップして、新しいファイルを作ってください。その時、1つのポップアップが現れるはずです。その中から「Create text file」を選択することです。それが正しいファイル形式なので。
 それから、ファイルに名前をつけます。(例:title-of-article.md

 (写真2)新しい記事ファイルの作成

 

  (4)ファイルを開いて、編集開始

  もちろん、今の状態ではファイルの中身は空なので、編集を加えていくことになります。
 ファイルをタップして、コンテンツを表示します。(まだ空のままですね。)
 右上に、箱に↑がはえたようなアイコンが表示されていますが、これが共有ボタンです。
 それを押すと、ポップアップが表示されます。

 ポップアップの左下に「Edit」と書いてあるボタンがありますが、それはWorking Copy内でファイルを編集するモードです。

 もしここで、Editorialがインストールされていれば、「Edit in Editorial」という項目が表示されるはずです。
 これをタップして、編集を開始しますよ。
 (もし編集が終わったら、ファイルはWorking Copyに戻されて、コミットの準備が完了する、というかんじです。)

 (写真3)編集開始

 

  (5)フロントマターを追加する

  Hugoを含むほとんどのSSGが、記事の日付やタイトルを記録するために、前づけ(フロントマター)を記述することが必要とされます。

 Editorialの便利機能に、 TextExpander ショートカットに対応しているというものがあるのですが、これならキーボードを切り替える必要がありません。
 フロントマターのテンプレートをあらかじめ作成しておけば、Editorialでショートカットが使えるようになって(例:;toml or ;yaml)便利でした。

 まあ、とにかく、必須というわけではありませんが、アプリケーションを選択する時に、ショートカットアプリケーションが使えるか否かも選考基準にしてみてはいかがでしょう。

 

  (6)記事を書く

 さて、いよいよ記事を書く手はずが整いました。
 どんどん内容を書いていってください。

 一応、Editorialにマークダウンプレビューが用意されおり、記事がどのように表示されるかをざっと確認することはできます。
 しかし、実際にサイトをビルドするSSGに搭載されたマークダウン・レンダリングエンジンとは種類が違う可能性が高いので、あまりあてにはならないかと思われます。
 

  記事を保存してコミットするには、Editorialの右上にスパナのボタンがありますが、それをタップして表示されたworkflowの中から、「Working Copy」を選択します。そして、記事戻れば、「Commit」ボタンがナビゲーションバーに表示されているはずです。コミットメッセージを記入して、コミットしてみましょう。
 (写真4)コミットの宛先を設定する

 

  (7)記事に画像を追加する

  記事によっては画像を入れたいものもありますよね。
 のせたい写真を適切なディレクトリに保存する必要があります。

 まずは、Working Copyから画像用のレポジトリに移動しましょう。(Hugoの場合、画像はstaticフォルダに保存することになっています。これはSSGによって仕様に違いがあるので、きちんとご確認ください。)

 +ボタンをタップして、ポップアップから「Import image」を選択します。あとはライブラリから画像を選択するだけです。(おそらくこれをするには、さきにWorking Copyにライブラリにアクセスする権利を与えておく必要がありますが。)

 レポジトリに画像が追加されたら、マークダウンファイルからその写真にリンクを張ってください。

 

  (8)変更をレポジトリにコミット、そしていよいよGitLabにプッシュ

  コミットの準備は先程の手順で整えました。
 次はWorking Copyからレポジトリに移動して、「Status」と書かれているボタンをナビゲーションバーから選択します。

 次に表示された画面で、「Commit changes」ボタンをタップすると、新しいファイルの内訳を記録する欄が表示されます。
 ここでの入力は任意ですが、ファイルの作業状況などを、なるべく短くメモしておくことをおすすめします。(例:作業完了《英:Completed post》など)
 そして、画面右上の「Commit」をタップ。

 この時点で、レポジトリの記事が入ったディレクトリには、新しい記事が入れられているはずです。
(作成した記事に画像が挿入されていた場合、記事をレポジトリに追加すると同時に、Working Copyに反映されます。)

 (写真5)変更をレポジトリにコミットする
 

  Commitボタンの右隣に、青く色づけされた「+Push 」というボタンが表示されています。
 これが、Gitlabにコミットするボタンなのですが、押されたとしてもいったんはiOSのレポジトリが変更されるにとどまります。なぜそんな機能があるのか。
 もしiOSマシンがインターネットに接続されている場合は、すぐさまサーバー上のレポジトリに変更が反映されるはずです。
 オフラインだった場合は、iOS側でコミットの準備をしておいて、次にネットでGitLabに接続したときにプッシュが開始されます。

 

  (9)masterブランチを上書きして、発表する。

  さて、文章も画像も完成しまして、満を持してのアップロードです。
 先ほど、アップロードはあとからパソコンからする方法もあると説明いたしましたが、
 スマホやタブレットから作成した内容でもう十分という場合もあるはずです。

 iPhoneからオンラインのGitLabレポジトリにプッシュする方法を説明します。

 まずは、Safariなどのブラウザを開いて、GitLabにログインします。
 それから、新しく「Merge Request」を作成して、さきほどの新しい記事が入ったブランチを指定すれば、masterブランチが変更されるはずです。

 間もなく、GitLab CIが作動して、設定されたとおりのスクリプトを処理を経てから、サイトが更新されます。


 

  あとがき

  今回のワークフロー紹介は、次のような方を対象にして書きました。

 


 これらのいずれかに当てはまった方なら、今回紹介した方法が便利かもしれません。
 これをきっかけに、静的サイト・ジェネレータをもっと手軽に、抵抗なく使っていただけると、確かに喜ばしいことではあります。
 

  ただし、ここでいくつか注意しておきたいことがあります。

 まず、1つ目。
 今回紹介したアプリケーションには、ちゃんとしたプレビューを表示する機能がありません。


 まず、リアルタイムでプレビューを表示する機能はありません。
 なので、自分がかけた変更が果たしてどのように反映されるのかが、かなり分かりづらいと思われます。

 次に、先ほども書きましたとおり、アプリのプレビューはあてになりません。

 アプリのマークダウン・レンダリングエンジンと、SSGのエンジンとでは種類が異なる可能性は高く、おそらくアプリのエンジンの方がかなり低性能でしょう。

 では、どのくらい低品質なのか。
 たとえば、普段使っているSSGなら、HTMLに「&#43」と記述しただけで、プレビューにも「+」と表示されているはずです。
 しかし、このアプリのプレビューはあくまで簡易のものなので、それをきちんと変換してくれるかどうかは怪しいものです。
 
 そのくらい、実際のサイトとはかけ離れたものが表示されるかもしれない、ということを留意してください。

 なので、「きちんとしたものをアップロードしたい」方は、
 iPhoneでの仕事を、いつも使っているコンピューターに入っているSSGから、内容を確認したうえで、アップロードすることをおすすめします。
 

 2つ目。ハードウェアの問題です。

  そもそも、iPhoneの画面キーは長い文章を記述するのにあまり適していません。
 まあ、これはBluetoothキーボードなどで何とか解消することができます。

 そして画面の小ささ。もうこれについてはどうしようもありません。

 

  それから、最後に3つ目。

 今回紹介した、「Working Copy」と「Editorial」があくまで、
「プロがオフラインでも急な仕事に対応するため」に作られたものであるということです。


 当然、初心者に優しいアプリケーションとは言えません。

 そして、これは当たり前な話ですが、
 出た先でインターネットに接続できてさえすれば、ブラウザからGitLabのサイトに移動して、ブランチや記事の編集をすることは可能なのです。
 それで十分という方にとって、これらのアプリはほとんど無用の長物になります。

 今回の方法を無理して実践する必要もないことが、おわかりいただけましたか。
 

  しかしながら、今回は「外出先にインターネットがあるとは限らない状況」であることを想定して、やや難しくてもある程度確実な方法を紹介いたしました。

 筆者もさすがに、インターネットにつながらないくらいで作業ができなくなることを、「いつでもどこでも」とはいえません。

 今日は、Git管理と、テキストエディターアプリがあれば、いつでもどこでもブログの編集作業が可能である、ということを皆さんにお伝えしたかったのです。

 ここまで読んでいただき、誠にありがとうございました。
 

  筆者について

  Angelo
 品質管理技術者、並びにソフトウェア開発者。
 カナダ・モントリオール在住。
 「オープンで、偽りがなく、コレボレーションのしやすい環境が、質の高いモノとチームを作り上げていく」というのが信条。
 

2017-09-27 22:16:43 / Hnoss
原文サイトを表示
[ 原文 ] https://about.gitlab.com/2016/08/19/posting-to-your-gitlab-pages-blog-from-ios/
Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス