アプリ開発の二ヶ月を振り返る

思い返せば二ヶ月

とにかく動くモノが作りたくて、そして何より(主に自分達の)役に立つアプリが欲しくて始めたこのアプリ開発ですが、思い立ってからアプリ公開に至るまで約二ヶ月の期間を要しました。

何とか公開できるモノも完成したところですし、良い機会なのでこの二ヶ月をぼんやり振り返ってみたいと思います。

 

初めて尽くし

冬が終わり、それぞれ新生活が始まる春。寒過ぎず、暑過ぎず、着物を快適に着られる季節でもあります。ついつい買い物三昧したくなるのも仕方のないことですよね?ねっ!?(汗)

そうして増えていく着物小物。気が付けば、似たような色柄のモノがあそこにも、ここにも・・・

そうだ、アプリを作ろう!(京都に行こう、くらいのノリで)

あぁ、 春の陽気に当てられたんですね。きっと。

そうして始まった無謀な計画。もちろん、いきなり一からアプリ開発ができるノウハウなど持っていようはずが無い初心者二人ですので、出来る限り簡単に、楽チンに開発できる方法を模索しました。

結果、辿り着いたのが

Monaca - HTML5ハイブリッドアプリ開発プラットフォーム

という開発環境でした。

 

monaca」という名前

最初にmonacaを見つけてきたのはちどりさんです。色々と検索して、これが使いやすそうだと教えてくれました(ありがとっ☆)

その名前を聞いたとき、これは運命だと(勝手に)思いました。だって、私のハンドルネームと同じなんですから。

そんなわけで、二つ返事でmonacaに決定。なんて適当な理由(笑)

ちなみに私のハンドルネームは基本的に平仮名表記で、アルファベット表記の場合はmonakaです。はい、どうでもいい豆知識ですね。

monakaにした理由はさておき、実際に使ってみたらかなり使いやすかったですよ。

もしもこれからアプリ開発をしようと考えている初心者さんがいたら、是非オススメしたいです。

 

オススメポイント

まず、ローカルでの開発環境の構築が不要ということが大きいですね。私の愛用ノートPC(年代モノ)は空き容量が少なく、且つ、開発はちどりさんと二人で行うのでデータが同期できることが必須条件でした。

その点、ブラウザ上で作業が出来るmonacaは上記の条件を完全に満たしてくれました。もちろん、ローカル環境での開発とも併用できますので、ご安心を。

次に、多くのプラグインが用意されていることも大きいですね。私はあまり使いませんでしたが、きちんと活用できれば、初心者でも比較的簡単に、そこそこ格好のつくアプリが出来上がると思います。

それから、UIの分かりやすさもポイント高いのではないでしょうか。公式の解説も丁寧ですし、解説サイトも多いので、大抵のことはすぐに調べられます。

そして、ハイブリッドというだけあって、各種OSに対応したアプリをこれ一つで開発できるのです。覚えることが少なくて済むのは、初心者には本当にありがたいことですね。

 

困ったことは

もちろん、良い点ばかりではありませんので、ここで私なりの注意点や不満点も挙げておきます。主に、無料版を利用しているが故の制約なので、お金を掛ければ解決する問題が多いですが(苦笑)

  • ビルド回数制限 24時間で3回まで(無料版のみ)
  • 使えないプラグインが多い(無料版のみ)
  • iOSアプリのビルドは、先にAppleへのお布施をしないと利用出来ない(Appleのケチ!)
  • ブラウザでの開発なので、我が家の回線速度に依存する(貧弱回線に愛の手を)

まとめると、貧乏が全て悪い、ということで(泣)

 

初心者代表より、一言

なんだか、とりとめもない話ばかりになってしまいましたね。すみません。

要約すると、初心者でもアプリ作れるみたいですよ、ってことなんですけど。

この二ヶ月間、といっても、日中は普通に外で働いていますので、せいぜい夜の1~2時間程度(それも、毎日ではなく週の半分程度)を割いて、それで一応、アプリという形のモノが完成したことに自分達が一番驚いております。

きっと夏の終わりくらいには出来るよね、とか緩~いことを言っていたくらいですから。

ですので、作ってみたいけど時間も取れないから、とか、プログラムとかやったことないから、とか思っている初心者さんがいらしたら、是非ともこの機会に始めてみてください。本当に、意外とあっさりできちゃったりしますから。

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ

nendの導入

広告を入れる

せっかくアプリを作るのなら、ついでに広告も入れたくなるのが人の性ってものですよね。

べ、べつに広告収入とか狙ってないんだからねっ(汗)

そんなわけで、アプリ開発初心者のくせに一丁前に広告を入れようと頑張ってみたら、結構あちこちでつまずいたので(当然だ!)、メモ代わりに書き留めてみました。

 

nend (ネンド)

小学生が図工の時間にコネコネするアレではありません。

スマートフォン広告『nend』 は、クリック課金型広告のことです。

スマホでWebページ画面やアプリの一番下に表示されている広告、あれの一種ですね。他にも色々あるみたいですが、アプリを開発したmonacaの公式サイトで紹介されていたので、素直にこれにしてみました(安易)

広告掲載をお願いする場合は有料みたいですが、アプリに広告枠を設置するだけなら登録も利用も無料です。いやー、なんて経済的。素晴らしい。

もし興味がある人は、下のバナーからでも公式ページにいけるので覗いてみてください。

登録の流れ

ざっくりと登録までの流れを説明します。

しょうもないところでつまずいたりもしたので、何かの参考になれば幸いです(苦笑)

 大まかには、以下の順に行いました。

  1. nend へ登録
  2. 審査後、アカウント情報登録
  3. サイト/アプリの作成
  4. 新規広告枠の作成
  5. 承認後、広告コード取得

スクリーンショット付きの親切な説明は、monaca公式サイトこちらのブログ様に載っていますので、ここでは私が躓いたことを中心にお伝えします(照れ)

 

nend への登録

ここは流石に躓かなかった。偉い、自分!

一つだけ挙げるとすれば、私の場合、まだアプリの開発途中で登録作業を行っていたので、サイトURLの欄に記載する内容に戸惑いました。

とはいえ、これは公式でもきちんと説明してあったのですぐに解決しましたが。

開発中のアプリの場合は、以下のURLを記載します。

ここだけ気をつけたら、あとはすんなり登録完了。

nend の送信専用アドレスから登録した自分のメールアドレスに、

nend 】メディアパートナー┃仮登録完了のお知らせ

というメールが届いたら大丈夫です。

 

アカウント情報の登録

平日の営業時間中なら、仮登録後にすぐ、本登録までいくみたいなんですが、残念ながら土曜日に作業してしまったので、しばらく音沙汰なし状態。

月曜日になってようやく

nend 】メディアパートナー┃登録完了のお知らせ

というメールが届き、メール内の管理画面用URLをクリックするまで、nend のサイトにログインすら出来ません。

てか、最初の登録でパスワードも設定してるのに、登録完了メール来るまでログインできないとか、ちょっと焦るじゃないですか!?

しかも、エラーメッセージで、メールアドレスかパスワードが違ってますって言われたら、めちゃくちゃ動揺しますから!!

そんなわけで、登録は平日の営業時間内がオススメです。心底、オススメです!

あ、アカウント情報の登録は簡単なので、端折りますね(いい加減)

 

サイト/アプリの作成 と 新規広告枠の作成

広告枠の管理タブから、サイト/アプリの作成を選びます。

実際に広告を載せたいアプリやサイト(PCサイトでは広告は表示されません。あくまで、スマホ用のWebサイトのみです)を設定していくのですが、最初の登録時に一つ登録を済ませていると思いますので、まずはそれを選択。

基本的には必要事項を埋めていくだけなのですが、一つ、イラっとさせられたのが広告枠の形式の項目ですね。

オーバーレイという選択肢の存在。

あれば選びたくなりますよね。なのに、それなのに。

どゆこと!?

しかたないので、インラインを選択し、アプリ側でオーバーレイっぽくすることにしました。ちっ!(舌打ち)

しかも、この段階まで行くと広告コードがコピーできる状態になりますが、このコードをアプリ/サイトに貼り付けてもまだ何も表示されません。

広告枠の管理タブから広告枠を選び、ステータスの部分アクティブになるまで待たなければいけません。待てません!セッカチさんなんだから!(怒)

私みたいな、

とりあえず広告の中身は空でもいいから、アプリに埋め込んで表示を確かめてみたいのっ!

って人のためにテスト用コードも用意されているので、まずはそちらでお試しすることをオススメします。

nendサイトの右上にあるヘルプから、

ヘルプ => テスト用広告コードについて

でいけるので、よければお試しあれ。

 

広告コード取得

広告枠の登録が完了すると、登録したアプリ/サイト名の下に小さく広告コードとありますので、そちらをクリックすると、アプリ/サイトに貼り付ける用のコードが出てきます。

基本的にはこれをコピーして張り付ければ完成みたいなのですが、ここでも大きな落とし穴がありました(きっと初心者ホイホイなんです、間違いないです)

説明では、HTMLの

<head>ここにコードを貼り付ける</head>

とのことでしたが、騙されてはいけませんよ、初心者の皆様。

そんなところに貼り付けても、サイトでは表示されません。(アプリでは表示されましたが)

サイトで貼り付ける先は、

</head>ここにコードを貼り付ける<body>

↑↑↑ここです。こんなところに貼り付けようなんて、普通思いつきませんよね。なんて非道な!恐るべし、初心者ホイホイめ!

 

まとめ

そんなこんなで結構骨が折れましたが、無事nendを導入して、なんとかテスト表示までこぎつけました。

導入したらあとはほったらかしてたらガッポガッポ、とは流石にいかないでしょうけど、運用に関してはまた今度ということで。

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ