Cntlog

Webデザイナーが3日でスマホアプリを公開した方法

スキルアップ

投稿日

最近自分でアプリを作って公開しました。（褒めてください！）

ホウビンゴ

まじめに3日くらいで作りました。
以前にも一度アプリを出したことはあったのですが、ちょっとコードを変えただけのパッケージものだったのでアプリ作ったとは言いづらかったのですが、今回はちゃんとコードを0から書いて自分でアプリを作りました。

作った理由というかきっかけは友人がアプリ開発の書籍を最近出したからです。
Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

私はこの書籍のメインユーザーの想定に近いということでこの本のレビューに少し参加しています。

レビューした時に「あっ、これ私アプリ作れるわ」みたいな気持ちになったので、年末の連休を利用してアプリを作りました。

この記事では、この本を通じて約3日でアプリを公開した一連の流れを紹介します。

Ionicとは

まずはじめにIonicの事を紹介します。
Webデザイナである私がアプリを公開できたのはIonicがあったからです。

Ionicはスマートフォン向けのUIを取り揃えたコンポーネント群です。
HTMLに似た簡単なコーディングでUIを実装できます。

ようはアプリ界のBootstrapだと思っていただければだいたいあっています。

Cordovaを拡張して作られているフレームワークのため、スマートフォンアプリ（Android/iOS）とWebを同時に開発可能です。

動的なUIコンポーネントを実装はAngularを採用しています。
※私もAngularは初めて触りましたが勘でなんとかなりました。(個人の感想です)

Ionic公式ページ

Ionicの魅力

Ionicでアプリを作るにはWeb周りの知識があれば開発が可能です。
ネイティブでアプリを開発しようと思うとこれまで触ったことが無いような、言語を学ぶ必要がありますが、Ionicは不要です。

つまりWebの知識があるWebデザイナならアプリが開発可能ということです。
※Webデザイナのスキルの定義は諸説ありますが、本記事ではCSSのコーディングもJSも書ける人をWebデザイナと定義しています。

これまでWebサイトしか作れなかった私達がアプリまで作れると言うのは大きな魅力だと思います。

またIonicはAndroid/iOSだけでなくWebも公開が可能です。

せやかて、Webデザイナが簡単にアプリ作れるのかいと思いますよね？（私は思ってました）
Ionicはドキュメントが整備されているので、コピペでなんとかなります。

Ionicのドキュメント

マーケティングのしやすさ

アプリの一つの弊害としては認知のしにくさがあります。
本来のスマホアプリだとダウンロードしないと実際に触ってもらいないというハードルの高さがあります。

Ionicで開発した場合Webで公開できるので、ユーザーはそのデモの画面をChromeなどのブラウザで体験出来るので認知のしやすさが比較的に簡単です。
実際に私も作ったアプリのデモはWebで公開しています。

ホウビンゴ デモ

Twitterの反応を見てもWebでアクセスして試している方は大勢いました。（アプリのダウンロードはちょっとです）

まず最初に始めたこと

私はIonicをほとんど触ったことがない素人です。
スキル的にはWebのフロントのコーディング周りはちょっと出来るけどプログラミングは苦手です。
JavaScript/jQueryがちょっと出来るくらいです。（Angularはさわった事ないです）

それでも3日という短期間でアプリを公開できたのはIonicと先程紹介した書籍のおかげです。

まずは書籍の内容を読み流して実際にて動かして覚えました。
丸一日あれば、手を動かして書籍を読破できます。

書籍の内容は以下のようになってます。

HTML5アプリ開発フレームワーク「Ionic」

  • Ionicの概要
  • Ionicを採用している国内プロダクト
  • コマンドラインの操作を覚えよう
  • 開発環境の準備

Ionicの始め方と便利な機能

  • プロジェクトを作ろう
  • Ionicの便利な機能
  • アプリとしてビルドしよう
  • 早く上達する3つの方法

Ionicの基本とはじめての開発

  • Ionicの基本
  • タスクリストアプリを作ってみよう
  • イベントとライフサイクル

外部リソースを使ってアプリを便利にしよう

  • 外部リソースの形式とその活用…
  • WordPressを表示するアプリを作ろう

きれいなコードで明日の自分を助けよう

  • 書いたコードをきれいにする「コードリファクタリング」
  • コードリファクタリングを実践してみよう

スマホアプリ開発実践

  • アプリストアで配布するための設定をしよう
  • スマホアプリの機能をつけよう
  • PWAの設定について

テスト自動化実践

  • 今日書くテストは明日のあなたを助ける
  • テスト自動化で動作結果を確認しよう

実践Tips

  • jQueryの使い方…
  • NetlifyとGitHubを使ったWebアプリの自動デプロイ
  • URLから「#」をなくす方法
  • App Storeでのアプリリリース
  • Google Playでのアプリリリース
  • Ionicの使いどころ

実際にアプリを作る

本を読んで一通りアプリを作れる気持ちになったので、そのノリを維持してアプリを作りました。

作ったアプリは書籍にあるタスクアプリを拡張したもので70%くらいばそれがベースになっています。
アプリの元ネタはネトラボさんに紹介されていた下記記事です。

忙しい時期も楽しくタスクをこなす方法！　お母さんの作る「家事・お片付けビンゴ」に「真似したい」「発想が素晴らしい」の声

私も甘やかされたい！！

コーディングをする前にやること

アプリを作ると言っても画面がないとどんな実装が必要かわからないので画面毎に必要な要素を整理しました。
そのときのワイヤーフレームは下記です。

実際に作ったアプリの画面は下記です。
多分大体一緒です。（まだ未実装の機能はありますが鋭意制作中です）

実装の流れ

まずは画面ベースでHTMLでIonicのUIを実装します。
私はgitがちょっと使えるのでgitlabにリポジトリを作ってissueを立てて一つずつ処理していきました。

issueを立てて進めるのは進んでる感があるのでオススメです。

同様に機能ベースでもissueを立てて出来るところから処理していきます。
参考までにこんな感じです。

幸いにも私は著者がフレンドなので、判らないところはチャットを通じて相談させてもらいました。

ズルいと思われるかもしれませんが、大丈夫です。
IonicにはSlackで日本用のコミュニティグループがありますのでそこに参加すれば私と同様に質問は誰でも可能なので安心してください。

最終的には、著者のご自宅にお邪魔してもくもく会をしてもらって助けてもらいました。

またズルいと思いましたよね？
大丈夫です、もくもく会のイベントは定期的に行われています。
例えば、「Ionicで作る モバイルアプリ制作入門」もくもく会 in Kyotoとか

書籍と人に支えてもらってなんとか公開できました。
自分で言うのも何ですが、結構頑張ったと思いますし、反面頑張ればwebデザイナでもアプリは作れます。

凄いと思ってくれた人はお寿司か焼肉奢ってもらえると次のアプリを出すモチベーションに繋がります。ぜひともよろしくお願いします！！

当然ですが自分でアプリ作れるとわかった以上、今後も合間を見てアプリは作り続けるつもりです。

公開方法

先程もご紹介したように、IonicはAndroid/iOSとWebで公開できます。
デプロイの方法は簡単で、下記コマンドを入れるだけです。

//iOSの場合
ionic cordova build ios —-prod

//Androidの場合
ionic cordova build android —-prod

あとは書籍に記載のある流れで公開できます。

ちなみに私は最初AndroidとWebしか公開していません。
理由はiOSは申請がめんどくさいからです。

アプリを公開したと言ってもまだ修正する点はいくつかあったので、同時リリースをすると公開の手間が2倍になるのでまずはAndroidだけ公開しました。

Web側については申請など不要です。（念のため）
私は今回Netlifyを使って公開しました。

Netlifyはリモートリポジトリが更新されたら自動でデプロイされるので、公開で手間とは思いませんでした。
※Netlifyを使った公開方法も書籍に記載ありますのでご安心ください。

むしろ、Webで公開して人に触ってもらって問題ないのが分かったらアプリをリリースする流れができてこれもIonicの良さだなと思いました。

公式ページの作成

せっかくアプリを作ったので、みんなに知ってもらいたいなと思ってTwitterでも告知しました。

ですがTwitterだと、一時的なものですぐに流れてしまうので公式ページを用意しました。
これもNetlifyです。
※Netlifyは無料で何個でも使えます。

ホウビンゴ

今後iOSを公開した時はこちらに反映する予定です。
もちろんTwitterでも流しますけど。

最後に

簡単にですが、私が短期間でアプリを公開するためにやった事をご紹介しました。

私は頑張ったけど別に凄い事をしたとは思っていません。誰でも同様の事はできます。

アプリを作ってみたいと思ってるWebデザイナはIonic始めるのが最速なんじゃと思いますので、Webサイトを作る以外のスキルが欲しいと思う人は始めてみてはいかがでしょう？

私が感じた感想ですが、Ionicを触ったときには、WordPressを初めて触ったときに似た感動がありました。
それはプログラムは判らないけど動的なものが頑張れば出来るかもという感動です。

実際にWordPressもIonicも私はできました。（多分あなたもできますよ）

興味のある人は私と同じ感動を体験しましょう(ゝω・)

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

カテゴリ:スキルアップの記事