イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


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

絵本アプリを作成してみた

こんにちは、中村です。

GWはいかがお過ごしでしたでしょうか?
中村家では子供を連れての実家巡りで終わってしまいました。

今回は絵本アプリを作ってみたのでご紹介します。

HTML,CSSの知識さえあれば簡単に作成できるので、
ぜひ皆さんも挑戦してみてください!

アプリの作り方

今回アプリを「Monacaクラウド」というサービスを使って作ってみました。 https://ja.monaca.io/cloud.html

選定理由としては

  • アプリ開発に必要なものは全てクラウド上にある(必要なのはブラウザだけ)

  • iPhone, Android両方対応できる

  • HTML,CSS,JavaScriptという慣れ親しんだ言語で開発できる(今回JavaScriptは不要!)

  • 実機でのデバックが簡単にできる

  • 使ったことがある(笑)

です!

では早速作成していきましょう〜

用意するもの

  • 絵本で使用する画像(1ページ1ファイルにしてください)

  • ブラウザ

今回のアプリを簡単に説明すると、画像をスワイプすると次の画像が表示されるものです。

もちろんHTMLの知識があれば、キャラクターの画像や背景画像を別々に保存することも可能ですが
今回はアプリ作成手順をなるべく簡単に説明するため、1ページ1画像で作成することにします。

プロジェクトの作成

まずはこちらのページから無料会員になる必要があります。

メールアドレスとパスワードを入力すると、確認用メールが届きます。
そちらに記載されているURLにアクセスすると、こちらのような画面が開くと思います。

01.png

次に緑色の「新規プロジェクトの作成」をクリックします。
すると、以下のようなメニューが表示されるのでここでは一番シンプルな
「Onsen UI V2 JS Minimum」を選択して下さい。

02.png

プロジェクト名を入力し、作成ボタンをクリックすれば完了です。

03.png

最初に表示された画面に新しく作成したプロジェクトが作成されています。

04.png

アプリを作成する

新規作成したアプリの「開く」ボタンをクリックすると、以下のような画面になります。
(index.htmlのタブをクリックした状態です)

05.png

コードエリアで編集したものを保存すると、右側のプレビューエリアですぐに確認することができるため非常に便利ですが、上手く表示されない場合もあるためなるべく実機で確認することをオススメします。
(実機でのデバック方法は後ほど説明します)

では早速コードを編集していきましょう。

左側にあるファイルツリー(メニュー)のindex.htmlをダブルクリックすると、以下のコードが表示されます。

06.png

今回赤線の箇所は不要なので削除します。
次に<body>タグの間に以下のコードを追加して下さい。

07.png

<ons-carousel>というタグを使用することで、簡単にスワイプでコンテンツを切り替えることが可能になります。

まずは試しに「あああああ」「いいいいい」「ううううう」という文字がスワイプで切り替えられるようにしてみます。

最後に<style>を追加して見た目を整えます。

07 2.png

ここまでで一度保存してみて下さい。
プレビューエリアにて表示できてますでしょうか?

実機でのデバック方法

次に実際に実機で確認する方法を説明します。

まずアプリ検索で「Monaca」と入力して検索してください。
以下のアプリが見つかると思いますので、インストールして下さい。

08.png

アプリを起動すると、ログインフォームが表示されますので
会員登録した情報を入力し、ログインします。

すると以下のように作成したプロジェクトが見つかると思います。
こちらをタップすることで、作成中のアプリをデバックすることができます。

非常に簡単ですね!

09.png

アプリ完成まで

アプリ完成まであと少しです!

次は絵本になる画像をアップロードしていきましょう。
左側にあるファイルツリー(メニュー)をよくみると、すでに「css」というフォルダーはありますが、
画像を保存するフォルダーがありません。

まずは以下の画像を参考にして、画像用のフォルダー「img」を作成しましょう。

10.png

次に作成した「img」フォルダーを選択し、アップロードアイコンをクリックするとアップロード用の画面が表示されます。

こちらに必要な画像ファイルをドロップして下さい。
(複数ファイルを一度にアップロードできます)

ファイル名は日本語を含まない半角英数字にしておいた方が無難だと思います。

11.png

これで画像がアップロードできました。

最後に先ほど作成したコードの一部を以下の画像を参考に変更して下さい。

12.png

※絵本のページ数に応じて<ons-carousel-item>の数は変更してください
※アップロードした画像名を指定してください

私が今回作成したものはこちら

いかがでしょうか?

感想

アプリを作るのは簡単なのですが、絵を描くのとストーリーを考えるのが
一番時間が掛かってしまいました。
(ストーリーと言えるものではないですが)

自分の子供用にもせっかくなので作ってみようと思います。

またJavaScriptが必要になってきますが、選択肢によってストーリーが変わるようなものも面白そうですね! デザイナーの方々であればもっとクオリティが高いものが作れるはずですので是非挑戦してみてください〜

こちらからは以上ですっ!