有料版アプリ開発、頑張ってますよ～

あと一歩

だと、いいんですが（苦笑）
なかなかに苦戦しております。
苦戦ついでに、今までつまづいた数々の小石の中から、選りすぐり（？）の小石をご紹介してみようかと（誰得？）
このブログでは再三申しておりますが、我々、アプリ開発なんてそもそもずぶの素人なので。
え、そんなことも分からずにアプリ作ってるの！？
と驚かれないよう、心の準備をしてから読み進めてくださいね（真剣）

ポップアップの操作

アプリを触ってくださった方ならお分かりかと思いますが、コーディネート画面やインフォメーションボタン（画面右上の鳥さんマークですね）で、タップすると開くポップアップが出てきます。
（あ、鳥さんポップアップはまだ無料版に未実装だった。今度、無料版の最新バージョンアップしますね。汗）
このポップアップというシロモノ、なかなかの曲者でして。
ポップアップを立ち上げるのは、ボタンをタップしたらいいだけなので比較的簡単に実装できるのですが、その立ち上がったポップアップを消す時の処理にかなり苦戦しました。
普通、ポップアップって、ポップアップ以外の場所をタップしたら消えますよね？でも、ポップアップ以外の場所をタップって、具体的にどういうコードを書けばいいのでしょう？

回答（？）

もったいぶっても仕方ないので、いきなりコードを記載しますね。

//divA以外をタップした場合に反応するようにする

$(document).on('click', function(evt){ 
    if(!$(evt.target).closest('#divA').length){
        //ここにポップアップを非表示にする処理を書く
    }
});

ちなみに私のコードは、javascriptとjQueryで出来ています。
単細胞なので、onsenUIとかいう高度なモノにはまだ手を付けておりません（The初心者）
処理としては単純で、コードとしてもシンプルな作りなのですが、ここに辿り着くまでにだいぶ回り道をしました。
そして、時々ど忘れしてちょくちょく回り道コースを巡回してしまうので、自分の為にもここにメモしておきます（それが狙いかよ）
参考にさせて頂いたブログはこちらです。
ん～、解説も分かりやすくて素敵です。

アプリ内で外部リンクを表示

これもまだ無料版では未実装でしたね。今度ちゃんと追加しておきますので（汗汗）
例えばこのブログとかホームページとかでリンクを貼るのって、とても簡単に出来るんです。

<a href="http://www.～" rel="nofollow">リンク</a>//～の部分に外部リンクのアドレスを書く

htmlなので、プログラミングとか関係ないって人でもこれくらいは書いたことあるのではないかしら。ブログとかでも良く使いますし。
でも、アプリ内でのリンクとなると、一筋縄ではいきません。
だって、同じ様に　href=""　と書いてしまうと、リンク先はアプリ内での別ページということになるので。
そこで、外部へリンクさせるようにするには、以下のように記載します。

window.open("http://～");//～の部分に外部リンクのアドレスを書く

この方法はinAppBrowserというプラグインを使用して行うようなので、MonacaのcordovaプラグインからinAppBrowserを有効にしておくこともお忘れなく。
詳しくはこちらを参照ください。
どうやら以前はmonaca.invokeBrowserで外部リンクを表示していたそうで、私も最初、検索したらそちらの方法が出てきたのでやってみたのですが反応せず。
色々探してみてようやくここに辿り着きました。
アプリ作りは回り道ばかりです。本当に（苦笑）

canvasについて

この着物クローゼットアプリは何と言っても画像操作が多いです。
おかげで、一番苦労が多かったのはcanvas周りの処理だと思います。というか、canvasなんて、このアプリ作らなかったら一生知らなかったと思います（マジで）
え、canvasって何？それ美味しいの？
という、三ヶ月前のもなかと同じ人は、とりあえずこちらのブログ（canvasでのお絵かきソフトを作って見ました。）をご覧ください。
まぁ、一言で言えば、キャンバスです！（雑っ！）
もう少し砕いた言葉だと、お絵かきしたり、写真加工したり、画像処理したりできる領域、とでも言えばいいでしょうか。そういうモノです。たぶん。
アプリ内では、取り込んだ写真画像を拡大縮小したり、色を変えたりしていますよね。あれがcanvasです。
出来ることがたくさんある分、初心者の私には非常にとっつきにくく、最初に少し触って以降、かなりの時間放置していました（別名、見ないふり）
今では多少扱えるようになりましたが、それでも未だに私の意図しない動きをして驚かせてくれます。ホント、困ったヤツです。
こいつを手なずける為に大変お世話になったサイト様がこちら。
まだまだ暴れ馬ですが、喧嘩しつつ仲良くやってます（笑）

はてな記法は書きにくい

今回は結構真面目な話になっちゃいましたね。
最後になりましたが、今回のブログの形式について一言。
いつもはこのはてなブログを書く時、みたままモード（時々HTML編集モード）で書いているのですが、今回はコードを記載する関係上、はてな記法モードで書いております。
記事を書き始める前に、まっさらの状態で左上の編集をクリックするとモード変更できます（書いている途中での変更は出来ないようです）
そしてはてな記法モードでスーパーpre記法（>||と||<の間に書いた文字がコードとして反映される）を用いてコードを書きます。
この記法、書いている途中の記事が大変に読みにくいです。
見慣れていないせいだとは思いますが、コードを書く必要がなければ絶対選ばないですね、私は。
使いこなせれば便利なんでしょうか？一応、記法一覧もあるみたいなので、試してみたい方は参考になさってください。

では、この辺で。
今回はちょっぴり真面目すぎたので、次回ははっちゃけ記事が書けるといいな（笑）

着物de茶道

こんにちは。抹茶が嫌いだったのに、一保堂で濃茶を飲んでから一気に好きになったちどりです。
お茶の葉が太陽から吸収したエネルギーがぎっしり詰まってるような感じで、おいしいですね！

さて、着物が似合う習い事といえば茶道！でも、茶道も決まり事が多くて大変そうな世界…。
お茶を習いに行くにはどんな着物がいいのか？
調べてみました！

先生の方針に従う

何よりこれが大事。実際に教わる先生の方針に従うのが、１番無難です。

まあそれは前提として、一般論として以下のようなことに気を付けるといいようです。

• 織りの着物（紬とか）よりは柔らかものが無難。
• 半衿、足袋は白無地で。
• 帯結びはお太鼓で。
• リアルな草花の柄は、茶花と被るかもしれないので避ける。

また、普段のお稽古と、ハレの場であるお茶会では求められる服装が違うそうです。

お稽古の場合だと、

種類

小紋がおすすめ（江戸小紋など）
とくに小さめの幾何学模様な柄がいい。自然モチーフと違って季節がないので使いやすい。
派手じゃないチェックなどもいい。

色

柔らかい色合いの寒色系が長く着れる
濃い目の色にすれば汚れも目立ちにくい。
検索してみたところ、お茶のお稽古に人気の色は、藤色、鶯色、ブルーグレー、灰色、くすんだ濃いピンク、緑青色、辛子色、曙色、などのようです。

雰囲気

教えてもらう立場ということで、謙虚そうに見える、柔らかい雰囲気の着物。

こんな感じのようです。
これらをもとに、アプリ「着物クローゼット」で、茶道のお稽古に向く着物のコーディネートを３種類作ってみました。

いかがでしょうか？！
お茶会の時はどんな着物がむくのかも、今度調べてみようと思います♪
それではまた～！

帯留め金具でブローチを使ったコーディネート

こんにちは。ブローチが好きで、使いもしないのに買い集めてた、ちどりです。
ブローチを帯留めにする金具があると聞いて「これはようやくブローチを活用するチャンスが来たか？！」と買ってみました。

金と銀の小さいのがこの帯留め金具 S。１７８円。

銀の大きいのが帯留め金具 大。１９９円。

クロネコDM便なら送料１８０円。

横から見るとこんな感じ

矢印のとこにブローチの針を刺せば帯留めとして使えるというわけです！

それと、ごらんのとおりサイズによって帯締めをとおす部分の厚さが違います。

Sの方は厚さが3mmちょっと。三分紐じゃないと入りません。

大の方は厚さ５ｍｍ。大の方は平組の帯締めでも入りました。

けど、大の方は金具本体の幅が２ｃｍと大きいので、私の手持ちブローチの大半が、針の長さが足りなくて使えませんでした。Ｓは幅１ｃｍなので全部のブローチが大丈夫でした。金具が針より短くてブローチが左右に少し動いちゃいますが、それはピアス用のシリコンキャッチで解決するらしいです。１００均に売ってるらしいので今度見に行ってみよう。

こちらで知った方法を使えばＳの金具でも平組の帯締めにも使えるので、おすすめはＳかなー。

手持ちのブローチを使ってコーディネートを考えてみました！

使ったブローチはこちら。

左のブローチを使ったコーディネート

このブローチは京都の骨董屋さんで買った物。華やかなデザインで使い道が浮かばなかったけど、こんなコーデなら活用できそう、かな

野原のうさぎさんをイメージしたコーディネート

合う着物がなかったのでもなかさんに貸してもらいました！ありがとうもなかさん！

ブローチはお店で一目ぼれして買ったmimeruという作家さんの。今はあまり活動されてないのかな…。楽天の青い鳥というお店にまだ少し在庫があるみたいです。

魔法少女をイメージしたコーディネート

うーん、手持ちだけではイメージどおりのコーディネートができませんでした。帯を白くてレースみたいな柄のにしたら甘ロリっぽくできるかな。自分ではこういうコーディネートは着ないけど、見るのは好きです。

ブローチは小さい頃からもってるプラスチック製のキッチュなものなんですが、これが今みても可愛い！きゅんきゅんします。

さて、いかがでしたでしょうか。あなたもブローチを帯留めにしてみませんか？
私は三分紐をもってないので、今度三分紐を入手したいと思います！
それではまた～！

アプリアイコンのデザインの良し悪しって？

こんにちは。アプリのアイコンがダサいとインストールをちょっとためらう、ちどりです。
今日は「着物クローゼット」のアイコンはどんなのがいいか試行錯誤したお話。

目指したいのは、シンプルだけど、着物のアプリなんだなと伝わるデザイン。
と、考えてまず浮かんだのがこちら。

千鳥紋
日本人の美意識で磨かれたものなんだから、デザイン性はばっちり。
布の質感を入れて、衣服関係のアプリというアピールを試みてみた
でも着物アプリってこと、これじゃ伝わらないよねえ。

次に考えたのはこちら。

着物の胸元あたりを拡大したもの。
うーん、なんかパッとしない。色が悪いのかな。
それに時代は立体感を出さないフラットデザインだよね？
と思って作ったのがこちら。

あぁぁ、センスないわ私。
あとから知ったんだけど、「京都きものパスポート」がこれ系のアイコンです。あちらは1色でパキッとしてます。

次に作ったのがこちら。

…何のつもりか分かりますか？
鳥居じゃないよ。
衣紋掛けだよ。
洋服用クローゼットアプリならアイコンはきっとハンガーとか？
→じゃ着物なら衣紋掛けかな
→細いと見にくいから太くしとくか。
という発想だったんですが、うーん、鳥居に見えますね

やっぱり、元の千鳥紋が1番可愛いわ～、ということで作ったのがこちら。

今アプリアイコンとして使ってるものです。布の質感はないほうがさっぱりしてるんじゃない？ということでこうなりました。
でもやっぱり着物アプリとは分かりにくいですよね。
なにか案があったら教えてくださいませ。
それではまた！

一歩前進！？

まさかの知恵熱

愛用のノートPCもそろそろオーバーヒートするのではないかと怯えつつ、夜な夜なバグ取り作業に勤しんでいる、プログラミング担当のもなかです。

私事ですが、最近どうも熱っぽいんです。腰も痛いし、寝つきも悪い。

「季節の変わり目で風邪でも引いたのかな」

と思っていたら、ある日、ちどりさんの悲鳴が。

「きゃーっ！もなかさん、知恵熱でてるよっ！」

どうやら、ノートPCより先に、私の脳みそがオーバーヒートしてしまったようです（苦笑）

腰痛は椅子に座る時間が増えたせいで、寝つきが悪いのはパソコンの画面を寝る直前まで睨みつけているからでした（あ、あと、夢でもプログラミングに追われているから、かも）

今まで、こんなにパソコンにかじりついたことなんて無かったからなぁ・・・（遠い目）

頑張った甲斐あって、少しだけバグ取り作業に進展があったんですけどね。

そんなわけで、報告と自慢をば。うふふふ（おいこら）

取り込み画像の初期表示サイズの変更

まず一つ目ですね。

これはバグ取りというより、ご要望にお応えして、という形なのですが。

画像を取り込んで調整するとき、作りたいアイテムが小さい（帯や履物など）場合、取り込み画像が大きすぎるというご意見がありました。

確かに、一律同じサイズで取り込んで、表示を拡大しているので、なんだが虫眼鏡で見ているような画像が出てきちゃうんです。

そこで、ごにょごにょごにょっと頑張りまして（だいぶ端折ったね）アイテムによらず、一定の大きさで初期表示されるように変更しました。

結構頑張りました！本当です！

ただ、関連するシステムもちょこっと弄っているので、新たなバグが生まれていないことを祈ります（切実）

メモ機能がオカシイ

メモはもともとオマケで付けた機能でしたが、使ってくださる方がいたんですね。そして例に漏れず、しっかりバグもついていたんですね。さすが私の作品です（自棄）

しかも挙動がなんだか凄～く不審。

メモが一切入力できない、とか、完全に文字化けしちゃっている、とか、そういった類のバグではないんです。

• 入力できている時と出来ていない時がある
• 途中までは入力できているのに途中からデータが消えている
• 入力していない文字が混ざる

どゆこと！？

どこがおかしくて何を直せばいいのか皆目見当もつきません。バグの方向性が謎過ぎてもうどうしたらいいの、私・・・

色々と自分でも試してみましたが、確かに同様の状況が発生しました。しかし、法則性もなく、発生しない時は全く発生しないんです。なに、これ。

仕方が無いので、こちらもメモの保存方法等をざっくり仕様変更してみました。

これでバグが無くなるといいんですが・・・

外部保存領域への挑戦

前回、愚痴三昧させて頂いた時（あぁ、バグ地獄 - アプリ「着物クローゼット」開発ブログ）に、外部保存領域へのデータの書き出しは出来るが、一括取得ができないと嘆いておりましたが、何とかできるようになりました。

 まだ他のシステム周りもガラッと変更しないといけないので現在調整中ですが、これで上限撤廃への道が開けた（かもしれない）感じです。

有料版に乞うご期待、です！

ただ、今のところの大問題として、画像データが全てライブラリにも反映されてしまうので、このアプリで作成した画像がライブラリ一覧を埋め尽くしてしまうんですよね。

まぁ、並び替えたり、フォルダ分けしたり、きちんとされている方なら問題ないと思うんですが、ざっくり収納の人間にはちょっと煩わしい事態になる予感（誰とは言いませんが）

 忙し楽し

面倒な作業も多いですが、今はこうして作りたいと思ったものが形になりつつある状況が純粋に嬉しいです。

なんといいますか、文化祭の準備で盛り上がっている、みたいな感じでしょうか。

アプリを作ろうと思い立つきっかけや動機は様々でしょうが、もし少しでも興味が沸いたのでしたら、是非チャレンジしてみることをオススメします。

ものづくりって、夢中になれる魅力がありますよね。ちょっとクセになっちゃいそうです♪

はてなブログの見た目をカスタマイズ

はてなブログはそのままじゃシンプルすぎるので、少し改造してみました。
まず、デザインテーマを「ace」に変更。
デフォルトのテーマは文章の表示幅が狭くて、改行が変になるなーと思ったので。

そこからさらに変更を加えました。
変更する場所はメニューの、デザイン→カスタマイズ→デザインＣＳＳのところ。
クリックすると文字入力画面が出てくるので、そこにcssを書き込んでいきます。

背景画像をいれた

背景画像はbg-patterns様より
画像は「はてなフォト」にアップしてそのアドレスを指定しました。
body{
background-image: url(画像のＵＲＬ);　
background-repeat: repeat;
background-color:transparent;
background-attachment: fixed;
background-position: left top;}

見出しを目立つように変更

見出しの左横に画像をつけて、見出しの下には点線をつけました
h3が大見出し、h4が中見出し、h5が小見出しです
h4 {
background: url(画像のＵＲＬ) no-repeat left center;
padding: 5px 35px; 
border-bottom: 1px dashed #65a4b0;
}

文字に勝手に張られるリンクを目立たなくする

a.keyword {
border: 0 !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: default;
}

記事のタイトルに背景色をつけ、角は丸くする

.entry-title{
background: #f3f3f3;
border-radius: 40px;
padding:20px 0px 10px 0px;
}

それから、ブログ村へのアイコンも素材を使って変更しました。
可愛い鳥のアイコンはmoon cat様よりお借りしました。

どうだろう、少しは可愛くなったかなあ？
スマホでの見た目も変えたいけど、それは有料会員じゃないとできないんだよなあ。

アプリで改善してほしい点はありますか？

画像をスマホ内に保管するべくがんばってるプログラミング担当のもなかさん。
珍しく「無理かも…」と呟いていたのでついに万策つきたか？！と思っていたのですが
今日、なにやら一つ壁を乗り越えて、実現に一歩近づいたようです。
がんばれもなかさん！

応援しかできない私と素人プログラマーのもなかさんが作っているアプリ「着物クローゼット」。 使いにくい点もあるかと思いますが、みなさまのご意見を取り入れてより良いアプリにしていきたいと思ってます！

現在、対策方法を考えているのは以下の点です。

・登録画面で、帯など小さめのアイテムだと、取り込んだ写真が大きすぎ

・着せ替え時にも小分類（名古屋帯、袋帯、とか。）で表示できるようにしてほしい

・メモに入力した文字が入らなかったり、途中で切れたりする
（これ原因が謎なんです…法則性を見つけた方いらしたら教えてくださいませ）

・ロード時間を短くする

・取り込み画像の明るさの調整

技術力の問題でどの程度対応できるか分からないですが、取り組んでみます。

いつか、カメラ機能をつけて、アプリ内で写真を撮影したり切り取ったりできるようにしたいなと思ってますが、それは遠い遠い未来になると思います

その他、アプリで改善してほしい点があればご連絡くださいね。

まだしばらく仕様変更が続くかと思いますが、よろしくお願いします。