読者です 読者をやめる 読者になる 読者になる

satococoa's blog

Web や iOS アプリを作るエンジニアの日記です

pplog iOS アプリをリリースしました

pplog の公式 iOS クライアントアプリをリリースしました。

pplog on App Store

pplog とは

pplog (通称ポエム) についてはメインプログラマ@ppworks さんのブログとデザイナの @ken_c_lo さんのブログを見ていただくのが良いと思います。

このプロジェクトの目的について高らかに語られていますのでぜひご覧下さい。

pplog iOS クライアントについて

pplog iOS 版の構想はかなり初期からあって、web 版 pplog を身内だけでクローズドにカリカリとドッグフーディングしている頃から、「どうせなら RubyMotion で iPhone アプリも作ろうよ」と話していました。

現在のアプリの仕組みは、UIWebView に web 版の pplog を組み込んだ、いわゆる "ハイブリッドアプリ" です。

ハイブリッドアプリは一見とても簡単そうに見えるのですが、実は色んな問題をはらんでいます。ぱっと思いつくものを列挙すると、

  • そのまま UIWebView を組み込んだだけのアプリだと、「Web でやろうぜ!」と Apple に言われてリジェクトされる。
  • ネイティブと Web のやり取りが JavaScript やカスタム URL Scheme でやることになり、仕組みが複雑になりやすい。
  • 認証をどのようにやろうか考える必要がある。
  • どんなに JS でガリガリ頑張っても、ネイティブの使い勝手を期待するユーザを満足させるような動作を実現するのが難しい。

さらに「Web なんだからそのまま Android も対応できるんだろ?ベイベー」ってなノリでやると、CSS や JS で苦しんだりして結局 "フルネイティブ" で iOSAndroid とも最初からやった方が速いんじゃ... という結論に達しがちです。

それでも敢えてハイブリッドを選んだのは以下の理由によるものです。

  • pplog チームはサーバサイドに強い人が多いので、web 側の開発速度の方が速い。(そのため、ネイティブで UI を作り込んでも Web 側の UI があっという間に改善されてそれに追いつけなくなるおそれがある。)
  • 僕が JavaScriptRails にも慣れているため、デバッグがあまり困難ではない。
  • Push 通知は pplog アプリの場合は非常に価値が高く、仮に通知だけでもアプリ化する価値がある。

このように、積極的にハイブリッドを選ぶ理由がある場合のみハイブリッドアプリは選択すべきだと考えています。「楽そうだから」でハイブリッドを選ぶとつらい思いをする可能性が高いです。

おっと、横道にそれました。

あとはなるべく web 側の開発の邪魔にならないような設計を意識しました。

例えばある要素の class 属性を変更したらネイティブアプリに機能不全が起こるようでは web 側が自由にクラス名を変えられず、自由なリファクタリングができなくなってしまいます。

そこは data 属性を用いて、data-native-display="hidden" みたいなのを置いとくとアプリから見たときにはその要素が隠れるようにしています。

投稿機能も、アプリからの投稿用の独自の API をまるっと生やすのではなくて以下のような仕組みをとっています。

  1. 「新しいポエムを書く」ボタンを押すと、UIWebView が ajaxGET /posts/new へアクセスし、ワンタイムトークンを取得する。
  2. ワンタイムトークンが取得できたらカスタム URL Scheme を叩いてネイティブにトークンを渡す。
  3. HTTP のヘッダにそのトークンをつけて、新規投稿のデータを POST /posts する。

上記のような「新しいポエムを書く」ボタンの動作はもちろん web 版での動作とは異なるものです。

DOM のロード完了時にネイティブ側から JavaScript を差し込んで、そこで addEventListener することで実装しています。

とはいえ、やはりどこかの時点で完全にネイティブにしたい気持ちは持っています。 web 側の UI もかなり良い感じにこなれてきていますので、2.0.0 はフルネイティブでいきたいと考えています。

ポエムなのに技術を語ってしまって逆に恥ずかしいですが、骨を回しているだけで楽しめる、独特の雰囲気を持ったサービスです。

ぜひ一度インストールして骨をクルクル回してみてはいかがでしょうか?

pplog アプリのダウンロードはこちら -> pplog on App Store