アプリ紹介のお礼。
・Applivという、アプリ紹介サイトで紹介していただきました。
世にあふれるアプリがカテゴリ分けして登録してあって、自分の目的にあったアプリを簡単に見つけることができるサイトです。
http://android.app-liv.jp/003186388/
こちらはレビュー依頼を出したらレビューしていただけました！
ありがとうございます！
・着物ニュースという、着物にまつわる情報を収集・発信されているサイトで取り上げていただきました。
http://kimononews.com/archives/507
こちらで紹介されて、アクセスがぐぐっと増えました。
ありがとうございます！
それからGoogle Playにレビューを書いてくださった方も、本当にありがとうございます！
まだまだ不備があると思われる、アプリ「着物クローゼット」
バグを発見されたらメールなどでお知らせください。
技術的にできる範囲でしたら対応しようと思います。
あぁ、バグ地獄
バグ地獄に落ちた日
いきなり不吉なタイトルですみません。
プログラミング担当のもなかです。実は今、タイトル通り、バグ取り作業に追われております。
人生で初となるアプリ公開を成し遂げ、一息ついたのもつかの間。
有難いことに、我々の「着物クローゼット」アプリを早速ダウンロードしてくださった方が現れました！
ありがとうございます！ありがとうございますっ！！
そして、その方からのご指摘で、記念すべき（？）最初のバグが発覚！
なんと、アイテムの登録数に上限がっ！？（何故気づかなかった、自分！）
こうして、不肖もなかとバグとの熾烈にして終焉なき闘いの火蓋が切って落とされたのでした。
後悔は必ず後からするものである
公開前に一通りのデバック作業は行ったつもりでしたが、そこはやはり素人。根本的なところでズコッと抜けておりました。
まずデバッグは、最終的にリリースビルドしたアプリを実機にインストールして行ってみないといけません（え、そこからっ！？）
「Monaca - HTML5ハイブリッドアプリ開発プラットフォーム」の提供するデバッガーで問題なく動いたとしても、ビルドした途端にきちんと動かなくなるというのはよくある話のようです。
原因としては、今回の私のミスのように、アプリに割り当てられる容量の上限の問題だったり、或いは、必要なプラグインを有効にしていなかったり（当然、これもやりましたよ。ええ、勿論）と色々あります。
そして、それらは公式の解説にきちんと注意書きしてあるんですよね。私の目は節穴でございますので、いつも後から気づくのですが・・・（泣）
そんなわけで、皆様、公開前の実機での検証は必ず行ってください。私のようにならないように、くれぐれもご注意を。
底なし沼に片足を突っ込んで
ご指摘の件はひとまず解決、とまではいきませんが、妥協案として
- 画質を落としてアイテム登録数上限を増やす
という方法で対応させて頂きました。
しかし、初心者の癖にとんだ欲張り者の我々としましては、ここで満足するわけにはいきません。目指すべきは、上限の撤廃！
殆ど皆無のアプリ開発知識と、無謀な発想力のみを振り絞り、いかに容量を気にせず遊んでもらうかを思案する。アプリ開発を始めた者の行き着く最終目的地ですよね（違うわっ！）
そんなわけで、自ら底なし沼に向かってバクシン中のもなか。睡眠中も夢の中で試行錯誤を繰り返しつつ、スマホの外部保存領域にデータを落としこむ方法を模索中です。
進捗と愚痴と展望を胸に抱いて眠る
ひとまず、外部保存領域に画像を出力することはできるようです。実装してみましたが、指定したところに保存されました。
但し、SDカード内ではなく、スマホ本体の領域です。どうやらSDカードへのアクセスするパスが機種毎に異なるようで、複雑な手順を踏まないとほぼ不可能。要するに、ド素人の私には到底及びませんでした（とほほ･･･）
画像データやテキストファイルへのアクセスも、きちんとパスを指定してあげればアプリからの呼び出し、書き換えが可能です。
これらは、Monacaのファイル操作プラグインであるFile APIを利用することで比較的簡単に実装できます。
しかし、一番の問題は、このプラグインを用いてもディレクトリ内のファイルを一覧で取得することが出来ない、という点です。少なくとも私の調べた範囲では、ファイル名を指定せずに取得することは実現できませんでした。
ディレクトリ指定で一覧取得できれば、やりたいことが出来そうな気がするのにな～。
うーん、ショーウインドウ越しの着物を、指をくわえて眺めている気分です（意味不明）
各アプリに割り当てられる領域（サンドボックスというそうです）内では一覧取得できるようなのですが、それだと結局、容量上限に引っかかり、当初のバグに逆戻りしてしまいます。だからと言って、外部領域を使うとデータの管理が難しい。
そんな堂々巡りを、ここ数日ずっとしておりました（不毛）
あんまりにも蟻地獄ランニングしすぎて疲弊してきたので、ちょっと一休み。ここで愚痴って、また明日から頑張ります（だから今日は大目にみて、ね？）
我はこれを試練と呼ぼう
さて、なんとなく中二病っぽい（？）タイトルでお送りしてきましたが、この辺でそろそろお開きにしたいと思います。
世間は梅雨のどんより空模様と、突然の土砂降り豪雨。そして、蒸し風呂のような高温多湿の環境で、皆様もさぞやお疲れのことでしょう。
私もバグと気温と自分の無力に喘ぐ日々を、悶々と送っております。
健康でハッピーな着物生活のためには、十分な休養が不可欠。
皆様もどうぞ、ご自愛くださいね。
私も自分を甘やかしつつ、バグ取りに励みたいと思いますので。あ、勿論、明日から！ですけど（苦笑）
アプリ「着物クローゼット」に登録できる着物の数を増やしました！
前回告知したとおり、画質を落とすことで無料版「着物クローゼット」に登録できる着物の枚数を増やしました。５０枚くらいの着物が登録できると思います。
私の着物は余裕で収まります（笑）
すでにダウンロードしてくださった方は、良かったらアップデートと、アイテムの登録しなおしをしてみてください。お手数おかけして申し訳ないです。
登録可能数無制限、かつ機種変更してもデータを移行できる有料版は鋭意作成中です。
完成したらお知らせしますね。
画像を縮小したら輪郭がぼやけて、下のアイテムがはみ出したり、それを治そうとしたら輪郭がギザギザになったり…。とりあえず最低限修正してみました。もう少しどうにかできそうな気はするけど、疲れたのでとりあえずこれで。また今度気が向いたら修正します。
アプリ「着物クローゼット」に登録できる着物数に制限がある件について。
アプリ、ホームページの方の記載も変えたのですが、
現在公開中のアプリ「着物クローゼット」は、アイテムを登録できる数に上限があります
あえて設定したわけではなく結果的にそうなったんですが…（遠い目）
原因
現在、データの保存先はアプリ内部なのですが、その保存先のメモリ容量が、
画像を保管するには足りなかったようです。
（多分、環境により差はあると思いますが多くて５MBくらいみたいです？）
アイテム画像の中では一番データとして重いはずの着物画像が１枚400KBとかなので
（柄とかによりますが）１０枚くらいのデータを保存するといっぱいになって、
それ以上の登録ができなくなるかと思います。
対策１
アプリ内部の保存領域を増やすのは仕組み上無理なので、
データの保存先をライブラリーなどスマホ本体の方に変更するべく
プログラミング担当のもなかさんががんばってます。
まあでも難航してます。
実はデータの保存先は、最初本体側にしようとしたけど、
うまくいかなくてアプリ側にしたという経緯があるんです。
多分進捗状況は
・スマホ側にデータ格納フォルダを作る→できた
・スマホ側のフォルダに画像データを保存する→できた？
・スマホ側のフォルダから画像データをひっぱってくる→できない
という感じだと思います。
そしてお知らせなのですが、もしデータの保存先がスマホ本体バージョンが完成したら
有料版ということにしようと思っています。
データの保存先が本体になれば、単にアイテムがたくさん登録できるようになるというだけではなく機種変しても、SDカードなどでデータを新しいスマホに移せるはずです。（多分。）
「これ、手持ちの着物全部登録したとして、機種変したらまた１からやり直しなのでは？」と思ってたのですが、たぶんそれが解決します。
ちなみに有料版が、そもそも完成しないという可能性も実はあります。
躍起になってやってるので、たぶんやり遂げると思うんですが…。
対策２
それとは別に今公開してる無料版も、アイテム登録可能数を増やそうと思ってます
このアプリでは、画像がキレイに見えるように、実際は大き目の画像を縮小して表示しています。
それを表示領域と画像の大きさをだいたい等寸とすることで、画像のデータサイズを小さくする予定です。
多分着物画像が１枚100kbくらいになるので、５０枚くらいのデータが保存できるようになるはずです（理論上は…。）
縮小した画像はもう用意したんですが、たぶんこれを今の画像と差し替えるだけじゃなくてアイコンとして表示する際のピクセル指定とか？？色々書き換えないといけないはずなので、もなかさんに教わってやってみようと思ってます。
以上、アプリ「着物クローゼット」の現状でした。
もなかさんに説明してもらってもイマイチ理解しきれてないので
上記の説明も間違ってる部分があるかもしれませんが、まあ概ねこんな感じです。
改良版無料版か有料版ができたらまた告知します！
レスポンシブデザインの簡単な作り方
開発者２人が欲しいと思うアプリを作った「着物クローゼット」
ですが！私ことイラスト担当ちどりはまだダウンロードできてません。
なぜなら、私はiphoneユーザーだからです！！
…Macのパソコン買って、App Store年間登録料９９ドル払えば使えるようになるけど。高いなあ。
広告収入がうまくいくといいなあ…道のりは遠いです。
androidスマホに買い替えるほうが早いかもしれないですね…
愚痴っぽくなってすみません。
さて、今日は１つのサイトをスマホでもパソコンでもうまく表示するには、という話です。
スマホとパソコンでは全然画面サイズが違うので、普通に作るとどちらかで見にくくなってしまいます。
スマホ用サイトとパソコン用サイトそれぞれを用意するという手もあるけど、それは大変そう。
そこで、レスポンシブデザイン。
レスポンシブデザインとは、スマホ・パソコンどちらからでも見やすいように表示が切り替わるデザインのことです。
それでは以下、レスポンシブwebデザインの簡単な作り方です。
目標
パソコンで見ると
コンテンツ１ コンテンツ２ コンテンツ３
みたいにコンテツが横並びに表示されてて
スマホで見ると
コンテンツ１
コンテンツ２
コンテンツ３
みたいにコンテンツが縦並びに表示されるデザインにしたい。
方法
floatという方法とflexboxという方法でそういうデザインが作れそうです。
どっちの方法で作るか少し悩みました。
floatの方がややこしそうだけど、対応してるブラウザが多い。
flexboxの方が簡単そうだけど、古いブラウザ（IE１０以前とか。）に対応してない。
悩みましたが、サイトを作る腕に自信がないのでflexboxにすることにしました。
下地づくり
パソコンかスマホかで表示が切り替わって欲しい部分を＜div＞＜/div＞とかで囲います。
そのdivにclass="container"とか名前をつけます。
それでcssの方に
.container {display: flex;}
と書きます。
html側は
＜div class="container"＞コンテンツ１ コンテンツ２ コンテンツ３＜/div＞
みたいな状態です。
これでdivで囲った部分の中身が動く下地ができました。
折り返し指定
次にCSSにflex-flow: row wrap;という文字をたして
.container {display: flex; flex-flow: row wrap;}
とします。
これでコンテンツを左から順に置いていって、入りきらなくなったら今度は下に表示されるようになります。
ようするに画面幅が小さくなったら、それに応じて横並びのコンテンツが縦並びになってくれます。
最小サイズ指定
とはいえ、コンテンツの中身が文字だけだと、幅が狭くなっても
コン コン コン
テン テン テン
ツ１ ツ２ ツ３
コン コン コン
テン テン テン
ツ１ ツ２ ツ３
コン コン コン
テン テン テン
ツ１ ツ２ ツ３
みたいに縦にのびるばっかりで縦並びになってくれません。
そこで、各コンテンツに「これ以上は縮まないでね」という幅を設定します。
まず各コンテンツを＜div＞＜/div＞とかで囲います。
そのdivにclass="column"とか名前をつけます。
それでcssの方に
.column {min-width: 215px;}
と書きます。（215の部分は任意で変えてください）
html側は
＜div class="container"＞
＜div class="column"＞コンテンツ１＜/div＞
＜div class="column"＞コンテンツ２＜/div＞
＜div class="column"＞コンテンツ３＜/div＞
＜/div＞
みたいな状態です。
これで、画面幅が小さくなっても、各コンテンツの幅は215pxより小さくなりません。
スマホでは表示方法を変えたい部分を指定する
例えば見出しをパソコンではドーンと大きく表示したいけど、スマホでそんなに大きかったら邪魔だよね、という場合。
Media Queriesを使います。
CSSに
@media screen and (max-width: 480px){ }
と記載して、{ }内にスマホではこんな風に表示してほしい、という内容をかいておけば、画面サイズが480px以下のときはそのルールが適応されます。
例えば
@media screen and (max-width: 480px){ h1{font-size: 20px;} }
みたいな感じです
スマホでは表示しなくていいものを指定する
スマホは画面が小さいのであんまりたくさんの物をつめこむと見にくくなってしまいます。
なので「これはスマホでは表示しなくていいや」という物があれば、先ほどのMedia Queries内に
.none {display:none;}
と記載します。
つまり
@media screen and (max-width: 480px){ .none {display:none;} }
という状態です。
それでhtmlの方で、表示しなくていいものにclass="none"と書けば、画面サイズが480px以下のときはそれは表示されません。
例えばicon.pngって画像を表示しなくていいなら
＜div class="none"＞＜img src="icon.png"＞＜/div＞
とすれば、画面サイズが480px以下のときはicon.pngは表示されません。
ただし、このMedia Queries、ＩＥ８以下では使えません。
対応策はあるようなのですが、flexboxにした時点でＩＥ１０以下での表示を諦めてるので対策しませんでした。
文字のサイズ指定
基準となるフォントサイズに応じて、文字の大きさが相対的に変わるremという単位が便利です。
画像の対応
iphoneとかだと、画面の解像度が高いです。
対応方法はいくつかあるのですが、簡単なのは表示したい領域の２倍のサイズで画像を作って、widthとheightで実際に表示したい領域のサイズを指定して表示する方法です。（大きく作って小さく表示）
例えばicon.pngを幅150px高さ150pxで表示したい場合、まずicon.pngを幅300px高さ300pxで作ります。
そして
＜img src="icon.png" width="150" height="150"＞
と指定すれば、画面の解像度が高い機種で見てもきれいに見えます。
いかがでしたでしょうか。
初心者のざっくりした理解なのでおかしな部分があるかもしれませんが、私と同様初心者で、いきなり詳しいページみても全然わかんないよ、まずは大まかな構成が知りたいよ、という方には役にたつのではないかと思います。たぶん。
もっと詳しいことが知りたい場合は以下のサイト様たちを見てみてください。
http://qiita.com/junya/items/25c65fe12c18a9ab9286
http://www.webcreatorbox.com/tech/flexbox/
http://ja.learnlayout.com/flexbox.html
http://www.flapism.jp/html/278/
http://www.mdesign-works.com/blog/web/responsive-design-css/
http://scene-live.com/page.php?page=61
最低限のＳＥＯ対策
アプリ公開２日目、さっそくＤＬして使ってみてくれた方が現れ、開発者２人はとっても喜んでます！
しかし！
その方から、アイテムの登録ができなくなるという重大なバグを教えていただきまして。
わぁ、これは大問題だ。
もなかさんはバグを取り除くべくパソコンに噛りついてます。
さて、プログラミングが全然分からない私はできることがないので、ブログを更新しようと思います。
今日はホームページのＳＥＯ対策について。
今回のアプリはもなかさん：プログラミング 私：イラスト と分業して作ってます。
もなかさんより私の方が早く作業が終わりそうだったので、アプリのホームページを私が作ることにしました。
（まあ、結局もなかさんの追い上げで抜かされちゃったんですけどね。）
がんばって作ったアプリ、できればたくさんの人に使ってもらいたい。
そのためにはホームページを検索にひっかかりやすくしよう！
と、ＳＥＯ対策を軽く勉強してみました。
ＳＥＯ対策…検索で、できるだけ最初の方に表示されるよう頑張ること。
まあ、本気でやろうとしたら業者に依頼したりするような専門的な技術なので、
最低限のことだけやっておこう、と。
調べた結果をまとめてみます。
１、＜title＞タグにキーワードを入れる
「こんな言葉で検索する人にこのページを見てほしいな」というキーワードを、タイトルに入れようってことですね。
（でも実際の内容と無関係な言葉を入れちゃだめです）
例えばトップページのタイトルは
着物を簡単にコーディネート。無料アプリ「着物クローゼット」
という風にしてみました。
それと、タイトルはページごとに違うほうがいいそうです。
２、＜h1＞タグにキーワードを入れる
＜h＞は見出しに使うタグなんですけど、それで囲まれた言葉が検索のとき重要視されるみたいです。
なので、タイトル同様、見出しにも「こんな言葉で検索する人にこのページを見てほしいな」
というキーワードを入れておくといいそうです。
とくに重要なのはこの２点みたいです。
かつ、キーワードを決めるときに、Google Adwordsキーワードプランナーを参考にするといいらしいんですけど、私はまだやってません。
他には
-
画像にはaltで説明をつける
-
文章量は多いほうがいい
-
更新頻度を多くする
-
あちこちからリンクを貼ってもらう
-
自分のサイト内でのリンクを増やす
-
リンクは画像より文字に貼るといい。文字にキーワードを含んでるとなお良い
-
urlにもキーワードを使い短めに
-
強調したい部分（キーワード）はｂよりstrongで囲う
-
ページ階層を深くしすぎない
-
検索ロボット用のサイトマップを作成する
-
Google Search Consoleにホームページを登録する
といった対策があるようです。
こっちは「画像にはaltで説明をつける」くらいしかやってないかなあ
…あれ、頑張ったつもりなんだけど、あんまり頑張ってない？
ともあれ、これらの対策の効果あってか？６月１４日現在
「着物 アプリ」で２ページめ。
「着物 コーディネート アプリ」で２ページめ。
「着物 クローゼット アプリ」で１ページめの一番上。
となっています。
できたら「着物 コーディネート」で検索しても上の方に入って欲しいんだけど、それはちょっと難しいかなあ。
次回はホームページをスマホでも見れるようにする方法について書こうと思います。
それでは！
nendの罠
落とし穴
まだあったの！？
と、思わず叫んでしまったのは、すでにGoogle Play Developer Consoleでアプリ公開をしてしまった直後でした。
公開して、後悔･･･あぁ、自分が寒いです･･･
すみません、少し落ち着きますね。
何が起こったのか
まずは、どうしてこんな事態になったのか、整理しておきます（自分のために）
ようやく
が完成し、どや顔全開でGoogle Play Developer Consoleにアプリの登録をしたのです。
もちろん、登録でも結構つまづいたので（初心者丸出し）かなり時間がかかったのですが、何とか登録を終え、アプリ公開ボタンをいざポチッと！
参考にさせて頂いた幾つかのサイト様の情報では、登録してから２，３時間でGoogle Playに自分のアプリがお目見えするとのことでしたので、逸る気持ちを抑えつつ、お昼を食べながら待っていたのですが。
思いのほか早く、時間にして３０～４０分程度でしょうか。あっという間に公開までこぎつけました。
さすが天下のGoogle様、仕事が速くていらっしゃいますね（上げ上げ）
すかさずインストール
すぐさまGoogle Playで自作アプリを検索し、「着物クローゼット」の文字を見つけるが早いか、即行でインストール。
記念すべきアプリインストール第一人目の座を奪えたわけですが（誰も狙ってないって）きちんと動作するか試してみようとアプリを立ち上げ、悲劇は起こったのでした。
アプリは動く、nend広告 
は表示されている、なのに、広告をクリックしても何も起こらない！
え、どゆこと！？
だってちゃんと表示されているのに。クリックしても反応しないのでは、クリック型広告の意味がありません。
というか、何故今まで気づかなかったの、自分！？
スマートフォン広告『nend』 の読込時差
色々調べて回った結果、恐らくこれだろうという原因に辿り着いた頃にはすっかり夜。
しかも、monacaのビルド回数制限（無料会員は24時間で3回まで）もアプリ登録時点で使い果たしており、本日中に差し替えることは不可能。
頑張ったのに、頑張ったのにーっ！
初めての公開でかなり気合入れたのに、公開直後に気づいたこの不具合。自分にがっかりです。
どうしてリリース前にデバックビルドして確かめておかなかったのか、非常に悔やまれます（←本当にね！怒）
原因としては、
を読み込む時のタイムラグの二点みたいです。
詳細はこちらのブログ様に分かりやすく説明してありましたので、参照ください。
私の場合は、Timeoutの時間設定を1000にすると長すぎるみたいで、800にしたらクリックできるようになりました。
ただし、800だと時々広告が読み込みきらないみたいで、広告が半分だけ表示されるというなんとも間抜けな出来栄えになります。
いっ、いいんですよ、動けば！（必死）
初っ端からぐだぐだ
そんなこんなでスマートにとは全然いきませんでしたが、リリース時の詰めの甘さも含め、初心者丸出し感も一緒に楽しんで頂ける一品が出来上がった次第でございます。
システム的にもまだ改善の余地がふんだんに残された、未来ある作品です（笑）
それでも、ようやく世に送り出せた感慨は、やはりちょっと心にじんときますね。
皆様の生活のおそばにおいて頂いて、少しでもお役に立てれば幸いです。
宜しければ、話の種に、ちょこっとつついてみてください。
