8-4.Monaca開発(既存コンテンツのアプリ化・データ加工)

さて、「既存コンテンツのアプリ化」についてです。
冷凍できる・できない事典では、FC2ブログで既に作成されているデータを、アプリで一覧で見たり検索したりしたいため、CSVデータに加工しました。

jiten002.jpg

jiten004.jpg



FC2ブログにはデータをダウンロードする機能(バックアップやブログの引越しをするための機能)がついているので、そこからダウンロードしたデータを、今回のアプリの型式に加工して使えばいいと思っていたのですが、加工が結構大変でした。

「ブログデータをダウンロード」というからには
日付、カテゴリ、記事タイトル、記事文章 などがCSV型式とかそれに類似した例えばXMLとかの型式でダウンロードされるのかなーと勝手に思っていたのです。

ブログ版・冷凍できる・できない事典」では
カテゴリで「冷凍できるかできないかの判定」
記事タイトルで「食材や料理の名称」
タグに「検索に使う分類など」
記事文章で「説明文」を書いていたので、こんなデータがダウンロードされるイメージでした。


ブログはこんな感じでダウンロードされるのではないかとイメージしていたもの

----------------
投稿日付,カテゴリ,ブログタイトル,タグ,ブログ本文
2013/01/01,冷凍できない,キャベツ,野菜,スカスカになるので冷凍できません
2013/01/02,冷凍できる,親子丼,料理,ジップロックなどに入れて冷凍します
2013/01/02,冷凍できない,豆腐,食材,スポンジ状になります
----------------


日付は不要なのでアプリ用に加工するとこんな感じ
----------------
食材や料理,判定,分類,説明文
キャベツ,冷凍できない,野菜,スカスカになるので冷凍できません
親子丼,冷凍できる,料理,ジップロックなどに入れて冷凍します
豆腐,冷凍できない,食材,スポンジ状になります
----------------

こういう加工はエクセルで開いて、いらない行を削除して、列を入れ替えて、みたいなことをやるだけなので、エクセルを使ったことあれば簡単です。
想定していたのはこんなかんじだったのです。



ところがFC2ブログからデータをダウンロードしてみたらびっくり。
データはこんな感じでした。
----------------------------------------------------------------
--------
AUTHOR: reitoujiten
TITLE: ほうれん草【ほうれんそう】
STATUS: Publish
ALLOW COMMENTS: 1
CONVERT BREAKS: default
ALLOW PINGS: 1
PRIMARY CATEGORY: ◎冷凍できる
CATEGORY: ◎冷凍できる

DATE: 04/26/2013 21:35:45
-----
BODY:
方法:茹でて小分けにして冷凍。または、生のまま洗ってジップロックに入れて冷凍
-----
EXTENDED BODY:

-----
EXCERPT:

-----
KEYWORDS:

-----


--------
AUTHOR: reitoujiten
TITLE: 麻婆豆腐【まーぼーどうふ】
STATUS: Publish
ALLOW COMMENTS: 1
CONVERT BREAKS: default
ALLOW PINGS: 1
PRIMARY CATEGORY: ○工夫が必要/少し食感が変わる
CATEGORY: ○工夫が必要/少し食感が変わる

DATE: 04/26/2013 21:39:45
-----
BODY:
工夫:片栗粉でとろみをつける。豆腐を少し細かめにくずす。

豆腐が大きいと食感が変わってるのがわかってしまう。細かいと気にならない。
-----
EXTENDED BODY:

-----
EXCERPT:

-----
KEYWORDS:

-----
----------------------------------------------------------------



こういう型式ってブログ業界(?)では普通なんですかね?
確かに本文中の改行とかもそのまま保存されていて、見やすいといえば見やすいですが、加工はしにくいですね。
引越しできるの?このデータで?できるんでしょう、おそらく。
ブログデータなんて扱ったことなかったのでこの型式はちょっと衝撃を受けました。


でもまぁがんばりましたよ。
秀丸(テキストエディタ)で。


参考までにコツだけ書いておくと(もっといい方法はあると思いますが私はこうしましたというやつです)
このデータの
----------------------------------------------------------------
--------
TITLE: ほうれん草【ほうれんそう】
-----
CATEGORY: ○工夫が必要/少し食感が変わる
-----
BODY:あああ
-----
EXTENDED BODY:

-----

--------
TITLE: 麻婆豆腐【まーぼーどうふ】
-----
CATEGORY: ○工夫が必要/少し食感が変わる
-----
BODY:いいいいい
-----
EXTENDED BODY:

-----
----------------------------------------------------------------

改行コードを削除する(置換機能で「\n」→「何もなし」)すると
こうなります。
----------------------------------------------------------------
--------TITLE: ほうれん草【ほうれんそう】-----CATEGORY: ○工夫が必要/少し食感が変わる-----BODY:あああ-----EXTENDED BODY:-------------TITLE: 麻婆豆腐【まーぼーどうふ】-----CATEGORY: ○工夫が必要/少し食感が変わる-----BODY:いいいいい-----EXTENDED BODY:-----
----------------------------------------------------------------

このデータで置換機能で 「TITLE:」→ 「TITLE:\n」とすると
こうなります。
----------------------------------------------------------------
--------TITLE:
ほうれん草【ほうれんそう】-----CATEGORY: ○工夫が必要/少し食感が変わる-----BODY:あああ-----EXTENDED BODY:-------------TITLE:
麻婆豆腐【まーぼーどうふ】-----CATEGORY: ○工夫が必要/少し食感が変わる-----BODY:いいいいい-----EXTENDED BODY:-----
----------------------------------------------------------------

このデータで置換機能で 
「-----CATEGORY:」→ 「\t」
「----BODY:」→ 「\t」
「-----EXTENDED BODY:-----」→ 「\t」
をするとこうなります。

----------------------------------------------------------------
--------TITLE:
ほうれん草【ほうれんそう】 ○工夫が必要/少し食感が変わる あああ --------TITLE:
麻婆豆腐【まーぼーどうふ】 ○工夫が必要/少し食感が変わる いいいいい
----------------------------------------------------------------


あとはエクセルに貼って、列の入れ替えなどの作業ができます。
秀丸さんありがとう。
置換機能を使う際には「正規表現」というところにチェックを入れておくと改行が「\n」タブが「\t」とかで扱えるようになります。


こんな感じで無事にcsvファイルデータができました。
あとは前回の記事で書いたように読み込んでリスト表示して、検索機能などが付いてアプリの完成となりました。

今回のアプリはデータの加工や、検索や絞込みの機能、jQueryによる見た目や動きを作る、などとても勉強になりました。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
スポンサーサイト

8-3.Monaca開発(CSVファイルで簡易データベース機能)

さて、今回のアプリ冷凍できる・できない事典では「簡易データベース的な機能」を実現したのですが、どのような技術を使ったかをご紹介しますね。

「簡易データベース的な機能」というと具体的には

・ある程度まとまった量のデータを扱う
・データを一覧表示する
・データの並び替えをする
・データを絞り込んで表示する
・データは今後増えたり訂正したりする前提である

この辺が実現できるといいですよね。

こちらの2つに関しては前回の記事でも記載したのですが
・データの並び替えをする
・データを絞り込んで表示する

こちらのサイトや、こちらのサイトや、こちらを参考にして作成しました。
私はjQueryを使いましたが、単純なjavascriptでもできそうですね。

memo06.jpg



では次、この辺のことです。
・ある程度まとまった量のデータを扱う
・データを一覧表示する
・データは今後増えたり訂正したりする前提である

要は数件のデータを扱うなら1件ずつliタグを書いてもいいけど、100件とかは書きませんということです。
csvファイルにデータを持っておいて、そこから読み込んでリストに表示し、データの中身を訂正や追加したいときはcsvファイルの中身のみを訂正すればいい、というものを作りたいわけです。



そこで参考にしたのが、「Easy Web DB」というプログラム。
プログラムがこちらのサイトでフリーソフトとして公開されているのですが、どんなものかというと
「Easy Web DBはcsvファイルを取り込んで簡単にWEBデータベースを作成するプログラムです。 設定ファイルを変更するだけでレイアウトの変更や色の変更などが簡単に行えます。」
というものです。


結局これそのものは使わなかったのですが、ソースが全て公開されているので、サンプルソースとして参考にさせてもらいました。
サンプルではCSVファイルからデータを1行ずつ読み込んでtableタグで書き出すような仕組みになっています。
私はMonacaのメモ帳アプリをベースとして作っているのでtableタグではなくliタグで書き出すような仕組みをつくりました。

これで
・CSVから読み込んでliタグとして一覧で書き出す機能
・liタグのリストをソートしたり絞り込んだりする機能
が出来上がりました。

データが増えたりしてもCSVデータに追加すればいいような状態です。
機能的には完成したのですが、CSVファイルの中身をまだ作っていません。


さて、実は今回ここが結構苦労しました。
「既存コンテンツのアプリ化」という意味で参考になるかもしれないのでどんなことが起きたか、次回ご紹介しますね。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

8-2.Monaca開発(jQueryでスマホアプリっぽい見た目と動き)

4作目のアプリ冷凍できる・できない事典では、jQueryというものを使って、スマホのアプリらしい見た目と動きを実現しました!
jQueryってなんだよー!というかたもいらっしゃると思うのでWEB上のIT用語辞典的なもので調べてみると、「オープンソースのJavaScriptライブラリの一つ」ということです。
「jQueryはシンプルなコードでWebページに効果やアニメーション、ユーザインターフェース要素などを追加でき、Ajaxによる通信も容易に実装できるほか、様々な機能を実現する豊富な対応プラグインが公開されている。」

要はjavascriptで、ニューと動いたりシャーっと動いたり近未来っぽいかっちょいい見た目にしたりとかを、本来ガリガリコードを書かなくちゃいけないようなところを、ちょちょいと簡単に書けばやってくれる感じ?ですかね?
ん?よけい意味不明?


まぁとにかくやってみようや、って感じです。
Monaca開発においては「とにかくやってみようや」が簡単にできます。
ダッシュボードの画面で「+新しいプロジェクト」ボタンからいつものようにプロジェクトを追加するのですが、

memo02.jpg


プロジェクトの作成画面の「スケルトンの選択」っていうところでいつもは「空のプロジェクト」を選んでいたところを「メモ帳アプリ」っていうのを選択してみます。

memo01.jpg

で、ソースを何もいじらずに「プレビュー」してみます。

memo03.jpg
memo04.jpg

こーんな感じでメモ帳アプリがもうできちゃっているわけです。
なので今回はこれをベースに作成を始めました。

jQueryも使われています。
例えばこの部分、ヘッダーですよね。

memo05.jpg

これってすでにスマホアプリっぽい見た目になっていますが、これを単純にスタイルシートとjavascriptで作ると結構ガリガリコードがを書かなくてはいけない。
黒い背景で、文字は白で、フォントはあれで、ボタンをクリックしたときの動作はこうで、ボタンはプラスマークの画像を使って、隅は丸っこくして、配置は右よりで、ヘッダーはスクロールするときは位置を固定して・・・とかあれこれ書かなくてはいけないところを、

<header data-role="header" data-position="fixed">
<h1>Monaca Memo</h1>
<a href="#AddPage" data-icon="plus" class="ui-btn-right">Add</a>
</header>

こうやって書くと、勝手に作ってくれるわけです。

data-role="header" ヘッダーだね
data-icon="plus"  プラスのアイコンのボタンだね
class="ui-btn-right" ボタンは右端に配置するんだね

とかなんとかそういうことですよ、たぶん!
こんな感じのリファレンスのページでひとつひとつが何を表すかチェックして覚えてもいいし、もしくは、変えたいとこだけ調べてもいいですよね。
例えば元々こういう最初の画面を

memo03.jpg

冷凍できるできない事典ではこうしたんだけど
memo06.jpg

メモ帳アプリにある「×」ボタンはメモの1つ1つを削除するボタンなんだけど、冷凍できるできない事典は削除の機能はなくて、変わりに詳細画面に飛ぶ「>」のマークのアイコンを出しています。
アイコン変えたい!と思ったので「jQuery アイコン」とかでググると
こんな感じのページがたくさん出てきて、アイコンの変え方なんてすぐわかっちゃうわけですね。
すばらしい!
山ほどあるよ!アイコン!

で、見た目もそうですけど、動きもあります。
例えばこちらのサイトさんで、同じ「リストをソートする」という動作を単純なjavascriptだけで書いたものと、jQueryを使って書いたものを比較しています。
jQueryの便利さがなかなかわかりやすくていいですね。

冷凍できるできない事典でいうと、一覧の情報を絞り込むところはこちらのサイト、文字での検索機能についてはこちらが参考になりました。

食品名をクリックすると詳細のページに移動する動きとかは、メモ帳アプリの機能をちょっとずつ改造して作りました。

というわけで、同じような感じでやりたいことをリファレンスサイトやサンプルソースを公開しているサイトで探して勉強して・・・を繰り返し、なんとなくjQueryの基礎の基礎的なところはわかってきました。
スマホアプリ開発、ちょっとだけやったことあります!って言える感じになってきましたね。
jQueryはこうやっていろんなサンプルや解説がネット上に転がっているので、独学しやすい言語のひとつだと思います。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

8-1.冷凍できる・できない事典(4作目のアプリ)をリリースしました

4作目のアプリ冷凍できる・できない事典をリリースしました。
わーい!
jiten000.jpg


今回の開発テーマは「実用アプリ」、「既存コンテンツのアプリ化」そして「JQueryでスマホアプリっぽい見た目と動き」です。
がんばりました。

「冷凍できる・できない事典」というのは、「この食材、この料理、冷凍保存したいけど、大丈夫かな?」という疑問に答える事典です。
私が色んなものを冷凍庫にブチ込んで、時間をかけてコツコツデータを蓄積してきたブログ「ブログ版・冷凍できる・できない事典」をアプリ化したものです。


こちらのブログ、徐々にPVも増えてきていて順調に見えるのですが、問題が二つありまして。
まず、パソコンで利用する分にはわりと使いやすくできてると思うのですが、スマホ版、携帯版のページが一応あるのですがこれらがなかなか使いにくい。

FC2ブログを利用しているのですが、ブログの機能だけでこれ以上使いやすくするのに限界がありました。
具体的には食材(料理)の検索機能が乏しいんですね。
PC版はプラグインをつけて、分類検索とか結構便利にできたんですが、スマホ版、携帯版は限界でした。
スマホアプリにして検索機能をつけちゃおうというのがひとつ。


あとブログのもうひとつの問題点として、完全にマネタイズに失敗していることです。
事典という特性上、記事ごとに全部に広告なんかつけたら使いづらい。
なので上部と右カラムに少しだけアフィリエイト広告をつけてみたものの、事典なのでみなさん必要な情報を得たら去っていくので、長居しない。よって広告もクリックしないよ。という現状。

月に1万PVくらいあるブログなのですが、広告収入は10円20円の月もあり、多くてたまーに何かが売れて月に300円とかです。
冷凍庫にブッ込んで食べられなくなった食材費とかを考えると、完全に赤字ですね。
完全にマネタイズに失敗しています。
でも今からガンガン広告貼っつけてもたぶん使いづらくなるだけなので、もうこのサイトで儲けるのは半ばあきらめていました。
どよよーん。


でもこの「コツコツ集めた情報」としては有益なコンテンツだと思うので、アプリ化に挑戦してみます。
簡易的なデータベース機能(食材や料理を検索する機能)を、アプリ化するというのはなかなか勉強になりますよね!
きっとこのブログを見てるかたにも「簡易データベース的なアプリ」というのは有益なサンプルとなるのではないでしょうか。
そして主婦にとっては結構実用的なアプリだと思います。
逆輸入的にアプリからブログに来てくれる人もいるかもしれませんし、マネタイズも月10円とか20円な現状から考えると少しは増えるかもしれません!


というわけで完成しました。
JQueryも初挑戦でしたがなんとかリリースまでこぎつけましたよ。
開発で使った技術なども今後の記事でアップしますね。

こんな感じで調べたい食材(料理)を検索できます。
分類で検索したり。

jiten002.jpg

文字を入力して検索したり。
jiten003.jpg


結果はこのように表示されます。
jiten004.jpg


データはブログ版から持ってきて加工したのでブログ版と内容は同じです。
ブログ版・冷凍できる・できない事典

こちらからダウンロードできますので、興味のあるあかたはご利用くださいね!
冷凍できる・できない事典

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

| ホーム |
Page Top↑
▲ Page Top