読者です 読者をやめる 読者になる 読者になる

まほろば企画の覚え書

着物もアプリも初心者の二人がアプリ「着物クローゼット」を制作する奮闘記。宝塚観劇記も。

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

monaca

あと一歩

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

ポップアップの操作

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

回答(?)

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

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

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

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

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

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

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

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

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

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

canvasについて

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

はてな記法は書きにくい

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

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

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