iOS技術者がWordpressでアプリ公式ページを制作したら

2018年4月8日日曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

ご無沙汰してます。

個人開発している todayeeというiOSアプリの公式ページを公開しました。


モバイルファーストにしたので PCで見るとメニューが煩かったり、中身がスカスカなのはご愛嬌。以前にもアプリのサイトを HTMLで作ったことがありますが、WordPressで制作したのは初めて。

そこで今回 WordPressによるサイト作りで使用したテーマや、素材、AWSで組み立てたインフラなどの情報を共有して行こうと思います。
  1. Wordpress
  2. 素材(写真とアイコン)
  3. インフラ(AWS)
  4. 期間と費用
個人開発者などでこれからランディングページなどを作る人の参考になれば。



WordPress


何はなくともテーマ


非デザイナが WordPressでホームページを作る際に一番重要だと思うのはテーマの選定。私はホームページデザイナでは無いし、一からCSSやHTMLを書くほどの根性もセンスも無い。そんな訳でまずはテーマを探した。

ネットで "wordpress theme" で探すと有料から無料まで様々なものがある。印象としては海外のサイトで $30-50くらい出せば良質なものが手に入る感じ。英語の壁はあるがそもそも WordPress標準の仕組みに沿ったものなので、触っていればなんとかなるかと。国内のテーマは種類があまり無いか、価格が高いイメージ。

探した時の基準は次の通り。
  • 今風(フラットデザイン、大きな画像タイトル)
  • モバイルファーストなデザイン(レスポンシブルは当たり前として)
  • 安価(買い切り、無料であればなおいい)
色々探して最終的には Illdy というテーマに決めた。無料な上になかなか良いデザイン。




Wordpressテーマ Illdy


colorlib. が提供している WordPressテーマ。大枠のデザインが決まっていて、設定画面でパラメータを調整してページレイアウトを決めていく。


サイトの構成


WordPressで言う固定ページが基本となる。

 トップページ(固定ページ)
   |--- アプリ1解説ページ(固定ページ)
   |--- アプリ2解説ページ(固定ページ)
   |---    :
   |--- 新着ページ(投稿)

Illdyで細かくカスタマイズできるのはトップページ。ここは専用の設定画面が用意されていてパラメータの設定はもちろん、文章や画像の設定がここからできる。

他のページは WordPress標準の固定ページ編集を使う。ニュースリリースなどの新着ページは、本来のブログ向け機能である投稿を使う。


トップページ内のコンテンツは複数の "Section" から構成されている。Sectionごとに画面上からパラメータを設定したり、配置順序を決められる。

Sectionによってはその中にさらに "Widget" というコンポーネントがあって、複数並べることができる。例えば、以下は"Projects Sidebar"という Section内の ProjectというWidgetを複数作って並べてある。

標準で用意されているコンポーネントはこんな感じ。

これをカスタマイズして行く。

必要なカスタマイズはそこそこできて大きく困ることは無かった。気になったのはやたらと余白が多い印象で、それを無くすのに画像を工夫したりCSSを書いたりしたところがあった(※CSSを入力できる設定がちゃんとあるし、大体の場所でHTMLで書くことができる)。ある程度試行錯誤を繰り返すと、何ができて何ができないかがわかるので、そこまで来たらあとは中身の文章と画像をひたすら書くだけ。


素材(写真とアイコン)


プロ(もしくはプロ並み)の写真が利用できる Unsplash


カバー画像の写真は下記サービスを利用した。このサイトを知ったときは衝撃的で一時期ここの写真利用がマイブームになったほど(?)。今年一番のお気に入り写真サイト。



何が衝撃的かというと、商用利用が無料であるにも関わらず非常に高品質でセンスの良い写真が大量に揃っているところ。ぜひサイトへ行って写真を見て欲しい。

↓ 私が todayee用に集めたコレクションを晒す



クオリティの高い写真を利用するだけで、大したことの無いアプリでも「おッ」と思えるから不思議。

例えばこんな感じ。



アプリはイマイチでも何だか雰囲気が出てる(そうやって見る人に錯覚を起こさ××)。

ライセンスは商用に関わらず無料で利用可。利用にあたっては必ず下記を参照のこと。

あらゆるアイコンが揃う Icons8


(自分の中で)定番の Icons8 を利用。アプリ開発でもよく使わせてもらっている。


昨年日本語ページがオープンした。ただ日本語キーワードでの検索ヒットは限定的なので利用する際は英語で探すのが良い。

今回は無料ライセンスを使用(Icons8へのリンク掲載が必須)。以前は買い切りのプランだったと思うが、昨年あたりから月 $19.9のサブスクリプションモデルになっていた。有償だと上記のようにサイズ制限がない他、様々な特典がある。

アイコンは本当にたくさんある。選ぶのに迷うくらい。フラット系の iOS、Android、Windows10や、色付きアイコンといった Stylesあって、それぞれの用途にあったアイコンだけピックアップできるのが地味に便利。ホームページでは見出しのアイコンにここの素材を使っていて、単色系(Stylesは iOS)を中心にピックアップした。単色系だとあらかじめ右ペインで色を指定しておけば、その色に加工されたアイコンをダウンロードすることができる。地味に便利。



インフラ(AWS)


AWS Lightsail


Wordpressサーバの運用インフラには、AWSのVPSサービスであるLightsailを利用した。数クリックで Wordpressサーバが新規に立ち上がって月 $5から利用可能。SSHでログインしてサーバのカスタマイズもできるという優れもの。地味で人気はなさそうだが個人的にはお気に入り。EC2を使わずに Lightsailを選んだのはランニングコストが安いから(もう一つ付け加えるなら管理が簡単だから)。


Lightsailは他の AWSサービスと少し毛色が変わっていて、管理コンソール(WEB画面)も独自のデザインになっている。

サーバ(インスタンス)の管理のほか、ネットワーク管理(静的IPも取れる、DNSゾーンも作れる、簡易なFirewall、ロードバランサー )、ストレージ管理、スナップショット管理など、Lighsail向けに一通りの機能が専用で提供されている。

通常 AWSでシステムを組もうとすると EC2 や Route53, ELB,... など様々なサービスを横断して使いこなす必要があり小さなシステムでは結構面倒。この点 Lightsailはその中だけで全部完結できるようになっているので今回のように1台のホームページサーバを立てるケースでは十分だし使いやすい。もちろんできることは限られるけど。

Ubuntu + Bitnami


今回は簡易に Lightsailのテンプレートから Wordpressを選んでインスタンス(仮想サーバ)を立ち上げた。

このテンプレートを選ぶと Ubuntu + Bitnamiをベースに構築された Wordpress環境が簡単に立ち上がる。この点非常にお手軽で楽できるのだが、デメリットもあって ApacheやMySQLなどのミドルウェアは Bitnamiが独自のディレクトリに展開していて、OS標準のバージョンアップの仕組みが使えない。また Bitnami自体ミドルウェアのアップデートは考えられていないようで、仮にやるとしても自分で上書きするなど結構面倒のようだ。

もしセキュリティ面もキッチリ本格的に運用するとしたら OSだけが入ったテンプレを選び、自分で ApacheやMySQL、そして Wordpressを入れるのが良い。OSのパッケージを使えば、毎日自動的にアップデートを掛けることができる(再起動は自分でやる必要はあり)。

と、偉そうに言っているが自分のところはまだできてない(汗)。後日やりたい。

SSL証明書 - Let's Encrypt


世の中の流れはデフォルト SSL/TLSになってる(検索サイトもブラウザも)。なのでこのサイトでも最初からSSL/TLS証明書を仕込んだ。一昔前であれば個人用途のページなら格安 SSL証明書を探してインストール、というのが定番だったけれど今は証明書の無償化も進んでいてそこそこ信頼できるものが使える。今回はその一つである Let's Encryptを試しに使ってみた。



日本語ページも非公式ながらあるので、これが使える。




上記より引用
Let's Encrypt は、認証局(CA)として「SSL/TLSサーバ証明書」を無料で発行するとともに、証明書の発行・インストール・更新のプロセスを自動化することにより、TLS や HTTPS(TLSプロトコルによって提供されるセキュアな接続の上でのHTTP通信)を普及させることを目的としているプロジェクトです。2016年4月12日 に正式サービスが開始されました。
非営利団体の ISRG (Internet Security Research Group) が運営しており、シスコ(Cisco Systems)、Akamai、電子フロンティア財団(Electronic Frontier Foundation)、モジラ財団(Mozilla Foundation)などの大手企業・団体が、ISRG のスポンサーとして Let's Encrypt を支援しています。
メリットは怪しくない CA発行の証明書が無償で使えること。
# Let's Encryptではなんと今年からワイルドカード証明書がサポートされるようになった。
# いよいよ大小問わず(ドメイン認証版の)SSL証明書販売のビジネスモデルは終わりに向かいそう。

と、良い事ばっかりのようだが制限もいくつかあって、その中でも一番大きいと思われるのは有効期限が3ヶ月しかないところ(セキュリティリスクの低減上は逆にメリット)。ただし、専用のソフト「Certbot」が用意されていて、これを仕込めば自動的に更新ができる。多くのディストリビューションに対応していてインストールも日本語サイトをみれば難しく無い。
(参考)Let's Encrypt の使い方

この点、SSHが使えて好きにソフトをインストールできる環境でないと Let's Encryptは実質使えないかと。※Lightsailは SSHでrootログインできるので問題ない

他の制限としては対応しているのが「ドメイン認証(DV)証明書」だけという点。「企業認証(OV)証明書」や「EV証明書」には対応していない。小規模利用だとこの辺りは気にすることもないが。
なお Lightsailでもロードバランサーを入れれば AWSが発行する無償の証明書が使える(ただロードバランサー自体の利用料が月 $18かかる)。

WPバックアップ


コンテンツに関してはWordpressのプラグインを入れてサーバ内のバックアップを取っている。
入れたプラグイン:BackWPUp

毎日 3:00にバックアップを仕掛けてある。バックアップにかかる時間は 30-50秒くらい(DBとファイルのバックアップ)。

インスタンスバックアップ


それとは別に Lightsailのスナップショットを手動で取っている。これはコンパネ(WEB画面)を使うとワンクリックでポチるだけ。
インスタンスごとにスナップショットの履歴を一覧してくれるので、EC2より超わかりやすい。

先月までの制作途中では、1日の終わりや区切りの良いところでその都度手動でスナップショットを取っていた。実際、JavaScriptが原因で画面が正常に出なくなった時などに元に戻すことができて重宝した。Lightsailインスタンスのスナップショット
はEC2同様に AWSのLambdaでスクリプトを組めば自動での取得もできるが、自分の場合はそこまでは要らないのでやってない。ワンクリックでスナップショットが取れるのは本当に楽。

二重化はやってない


アクセスはほとんど来ないのでまず落ちることは無い。スナップショットも適当に取っているので、いざとうときはそれで戻す。仮に二重化の必要が出るほどアクセスが来るようなら Lightsailは卒業して EC2 + ELB + RDSとかが良いかと(あるいはいっそのこと WordPressのホスティングサービスへ)。

独自ドメインの取得とDNS


todayee.jp を取得。昔から利用しているムームードメインで取った。
jpドメインは 初回 2,840円、1年更新 3,040円なり。




DNSサーバはムームードメインではなく、LightsailのDNSゾーンを使う。

Lightsailはその中でDNSサーバを使うことができて、専用のゾーンが作れる。AWS の Route53を開く必要はない(これも楽ちん)。


期間と費用


最後にかかった期間と費用(外部へ支払う分)をまとめておく。

期間


1人で3ヶ月くらい(2018年1〜3月 / 朝と夜の隙間時間に少しづつ制作)

初期費用


テーマ代   0円
  画像代    0円
  アイコン代  0円
  ドメイン取得 2,840円(todayee.jp)
  証明書代   0円
  インフラ構築 0円  (自分で構築)
  制作代    0円  (自分で制作)
  --------------------------------
         2,840円

月費用


  サーバ代  $5(約 530円)

年費用


  ドメイン更新  3,040円
  証明書更新   0円
  サーバ代    約 530 x 12ヶ月 = 約 6,360円
  ---------------------------------------------
        約 9,400円


初期費用が3千円弱、ランニングコストは1年間で1万円弱。これらが外部へ支払うコストになる。うちのような零細サイトだとドメイン代が意外に馬鹿にならない。

サーバ代はWordPressのホスティングサービスに任せた方が手間とか考えると安いかも。ただし証明書と独自ドメイン利用が無料でないと高くつく。

自分の場合、AWSの経験があるので構築作業は苦では無かった(むしろ楽しい)。Lightsailの使用感は基本的なところは EC2と同じ。サーバ内の自由度も高いので分かる人はこっちの方が融通が利いて安く上がるかと思う。


あとがき


結構時間が掛かってしまったがとりあえず完成できてホッとしています。

今の一番の問題は全くアクセスが無いこと。
毎日のユーザ数は1桁台。。。
# いわゆる無人島でお祭りをやっている状態

アクセスを増やす施策は今後行っていくので、もしアクセスが上向くようならそれをネタにブログを書きます。正直言うとこの記事もアクセスやSEOの一助になればと思いつつ書いてます :-P


それではまた


【アプリ】todayee pics 1.1リリース

2017年4月26日水曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加


todayee pics を大幅にバージョンアップした。



・Adobe Creative Cloud による高機能フォトレタッチ搭載
・写真1枚毎にコメント入力
・オリジナルサイズ対応
・スクウェア加工
そのほかかなり手を入れて使い勝手を改善している。

(参考)【アプリ】Todayee Pisc 1.0 をリリースしました


Adobe Creative SDK のフォトレタッチ


Adobe社が提供している Adobe Creattive SDK のフォトレタッチライブラリを組み込んだ。このライブラリは高機能な上に使い勝手も優れていてなかなか良い。フィルタも豊富で触っていると結構楽しい。

フィルタ(抜粋)

手描き


フィルタやステッカーなどは Adobe社のサービスからダウンロードして追加することもできる。みたところほとんどが無償で入手できる。ユーザは Adobeの IDを取得するとどの端末でも共通の設定に合わせることができるようだ。


ツールバー(抜粋)


フォトレタッチをアプリへ組み込むには Adobe Creative Cloud への登録が必要。

組み込みはドキュメントの通りにすれば難しくはない。ただプロダクションリリースする前にはAdobe社の審査を通す必要がある(英語)。申請に必要な情報は多くないがいくつかの指定があるスクリーンショットは必須。今回は審査が通過するまで1回のNGを含めて4日かかった。

今回は一度 NGをもらった。

言われたとおりにスクリーンショットを提出したら無事に通った。

今回提出した最終的なスクリーンショットは次の通り。

申請時に用意するスクリーンショットのポイントはこんな感じ。
・アプリの内容がわかるような1枚(picsだとメインの写真選択画面)
・フォトレタッチを呼び出す UI(picsだとブラシのアイコン)
・フォトレタッチの画面
・"Creative Cloud Connected"が表示されている箇所(フォトレタッチのツールバーにアイコンがあったのでそれが映るようにしてみた)

なおこのアプリでは、フォトレタッチを初回に使う時にメッセージを出しておいた(キャンセルすると使えない)。責任放棄 ...(後でややこしくならないように)。


修正写真の扱い


このアプリでは修正後の写真をカメラロールへ保存せず、独自に管理している。他のアプリだといちいち保存するのを聞いてくるし、カメラロールを汚す(?)のが嫌だった。自前で管理するので、オリジナルに戻せるし表示を相互に切り替えられるようになった。

修正は重ねて行えるし、捨てることもできる。


写真ごとのコメント入力


詳細画面を開くと同時にキーボードが立ち上がってコメント入力ができるようになる。


左右に写真をめくってもキーボードは出たまま。連続してコメントを付けていけるのが特徴の一つ。

実用性を重視してストレス無くサクサク入力できることを目指した。この点、中途半端にビューアを充実させるよりは投稿アプリとしての働きを重視してみた。

送信ごと設定


以前は別の設定画面で指定した項目を送信毎に変更できるようにした。「エバーノートにはオリジナルサイズで送って」「LINEには 640ピクセルで渡して」「メールにはスクウェア加工して」といったことが気軽に行える。※シェア機能でエバーノート以外にも加工した写真を送れる。

(これも物ぐさな自分がいちいち設定画面に行くのを嫌ってそうした)

ダイアログはすべてライブラリ「vikmeup/SCLAlertView-Swift」を使っている。デザインが結構好き。上記は幅を広げているが開発当時は CocoaPods提供のバージョンでは幅のカスタマイズが無くて少々手間取った(ソースコードの最新版では存在)。

なお1回のエバーノートへの最大送信枚数は100枚。シェア機能は15枚まで。

todayee シリーズ


今回のアプリは todayee シリーズの1つ。
todayeeシリーズは全9種類のエバーノート投稿専用のアプリ。用途に合わせた様ざなまアプリを提供している。
特徴はすべてのアプリからの投稿が1日1つのノートにまとまること。複数のデバイスにも対応。外出先は iPhoneで投稿し、家では iPad、というのもOK。オフライン投稿もOK。最終的に自動で投稿時刻順に並べられるから投稿はいつでもOK。

なお個別に9つ買うよりも40%以上お得な全部入りコンプリートパックもあり。

ちなみに今回初めてバンドルにカスタムアイコンを付けられることを知り、試しに付けてみた(上記がそう)。



- - - -
写真をまとめてエバーノートへ送りたい、コメントを付けて保存したい、という方は是非お試しください。







【アプリ】Todayee Video 1.0 をリリースしました

2017年1月5日木曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

昨年末に Todayee シリーズ第9弾「Todayee Voice」をリリースしました。ビデオを撮影してエバーノートへテキストを投稿できるアプリです。


起動後すぐに撮影を開始できます。


撮影後はプレビューが見られます。ワンタップで即送信。
あとはバックグラウンドでエバーノートへ送信されます。

撮影したビデオにコメント(1行テキスト)を付けることができます。


さらにエバーノートへ投稿した動画には自動的にサムネイル画像が付きます。
送信前にプレビュー画面でスワイプすると
サムネイルにしたい場面を選ぶこともできます。


ビデオ画質


ビデオ画質は iPhone / iPad の機種ごとの主なものに対応しています。以下は iPhone6sの例です。
  640 x 480 (30fps)
  960 x 540 (30fps)
  1280 x 720 (30fps)
  1280 x 720 (60fps)
  1280 x 720 (120fps)
  1280 x 720 (240fps)
  1920 x 1080 (30fps)
  1920 x 1080 (60fps)


制約など

撮影時間は最大で 30秒。最大ファイルサイズは 25MB。どちらか一方を超えた時点で撮影は自動停止します。ファイルサイズについてはエバーノートの契約がプレミアムの場合は 100MBになります。これはエバーノートの仕様で1ノートあたりのサイズ上限が決まっている為です。



Todayee 共通機能


Todayee Voice は、Todayee(トゥデー) という名前の付く複数のアプリシリーズの1つです。一番の特徴は Todayeeシリーズからの投稿がすべて 毎日1つのノートへまとまる点です。Voiceから投稿したノートに、写真や音声を追記していくといったことができます。さらに複数のデバイスからの投稿も同様にまとめることができます(同一のエバーノートアカウントを使用した場合)。
下の図は Place と Pics からの投稿が1つのノートにまとまっている例です。

投稿は時刻で自動的にソートされます。


他の Todayeeアプリの記事

【アプリ】Todayee Text / Photo 1.0 をリリースしました
【アプリ】Todayee Silent 1.0 をリリースしました
【アプリ】Todayee Extension 1.0 をリリースしました(無料)
【アプリ】Todayee Place 1.0 をリリースしました(無料)
【アプリ】Todayee Pisc 1.0 をリリースしました
【アプリ】Todayee Rec 1.0 をリリースしました
【アプリ】Todayee Voice 1.0 をリリースしました


開発メモ


AVFoundation


Todayeeシリーズにビデオ撮影を加えることは最初から考えていてその時は UIImagePickerControllerを使用した簡易な実装を考えていた。その後 Todayeeアプリを利用者が少しづつ増えていく過程でユーザから「60fps対応」「スクエア対応」の強い要望があった。開発時間が余分にかかることもあり迷ったところでもあったが、他との差別化(というほどではなく最低限レベルになるかどうかだが..)にもなるかと思い AVFoundation を使用する実装で開発を始めることにした。AVFoundationを使ったビデオ撮影の情報はたくさんあるが、一番参考になったのは Apple が提供するサンプルコード。

AVCam-iOS

サンプルには Objective-Cだけでなく Swiftも含まれる。API の使い方が参考になったのはもちろん、特に面白かったは Dispatch(GCD) の使い方。AVFoundation のビデオ撮影を管理するクラス AVCaptureSession および関連クラスは物理的なデバイスを扱うこともあり、APIへのアクセスはシリアル化(順番に1つづつ)されている必要がある。このサンプルコードではそれを実現するのに Dispatchのキューを1つ専用に作り、APIアクセスを行う箇所では必ずこのキューへメソッド呼び出しのコード(クロージャやメソッド)を入れるようにしている。Dispatchの利用は、カメラや音声のプライバシー確認の箇所でも順序の調整に使われている。



あとがき


Todayeeシリーズはこの Videoで 9本目。2016年内10本という目標には届かなかったものの 12/31というギリギリのタイミングでリリースできてともかく良かった。諸事情からシリーズ内の他のアプリ開発よりも時間がかかった。純粋な開発で時間がかかったのは、ビデオ撮影部分の実装のせいもあるが 一番は Xcode8 + Swift3のビルド時間かもしれない。Todayeeアプリ は CocoaPodsを使うこともありビルドに非常に時間がかかる(毎回 4、5分くらい)。アーカイブにいたっては 30分(涙。今はビルド速度を改善する Tips情報が増えてきているが Video開発時には中心となるビデオキャプチャのコード部分だけ切り出して CocoaPodsを使わないシンプルな別のXcodeプロジェクトで開発を進めた。この方法は前半では、まあまあうまく行って特に開発当初のキャプチャ周りの試行錯誤では時間短縮できたと思う。後半はアプリとしての完成度を高めるために本体でのビルドになったためにこの恩恵は受けられずスローダウン。カメラ系のアプリの場合、シミュレータが使えないのがネックになる。このあたり今年中に劇的な改善があることを期待したい。

- - - -
さて今年はTodayeeシリーズの量産は一旦一休みして、当面は既存アプリの完成度を高めることに専念していきます。それが一段落したら Todayeeシリーズの新作をまた開発していきたいと考えています。今年は専用ビューアの開発も検討していますが何か要望・希望があればお気軽にご連絡下さい。

遅くなりましたが本年もまたよろしくお願いいたします。



アプリの入手は下記からどうぞ。


※2017/1/8 まで無料セール中です(その後有料になります)。








人気の投稿(過去 30日間)