2015-06-05

ラーメンタイマー？おれはバリ固で食べたいんだ！！　|| 素人が3日でカッコイイラーメンタイマーをがんばって作る。

せっかちな人用に固麵用のラーメンタイマーをつくる.

こんにちわ。ふぃふぃです。

f:id:hope_is_dream:20150605004101j:plain

PyQtではじめるGUIプログラミング

「ラーメンタイマー１つまともに作ることもできないエセ開発者・・」

「まさしく自分のことじゃないか・・・」

悔しさと焦りから、ラーメンタイマー制作にチャレンジしてみることにしました。

バリ固で！！

(注：この記事は少し長いです。長い割には大したことはしてないうんこ記事です)

もうあるアプリの調査

まずはなにはともあれ、先人の作品から学ばさせてください。

online-stopwatch.cm

可愛いけど少しweb2.0を思い出す

http://www.online-stopwatch.com/countdown-timer/

ソフトのがらくた箱

シンプル。このサイト他にもコンテンツがあってたのしかった。

http://park6.wakwak.com/~wmasa/soft/wbt/kitchen_timer/

Time and Date .com

フラットデザインできれいです。タイマーを複数走らす事もできる！

http://www.timeanddate.com/timer/

ラーメンタイマーメイド

名前に惹かれた。。ラーメン作りたいだけなのに悔しい。。メイドがいいな。

http://www.mobogenie.com/download-jp.co.firstchoice.maidtimer-1292871.html

プレゼンタイマー

学会で使いたいですが、Webアプリは少し怖い？

http://conference-timer.appspot.com/

ラーメンタイマー麵達

ありました。固麵タイマー！！！！

http://apps.microsoft.com/windows/ja-jp/app/3680cc23-aab4-4902-9068-b2664b94f234

みんなのラーメンタイマー

サービス展開されてます。

『みんなのラーメンタイマー』は、カップ麺についているバーコードを読み込むだけで、ラーメンができあがるまでののタイマーを設定してくれるアプリです。ちょっと固めの麺が好き、という人も安心。タイマーは10秒単位で好きな茹で時間に変更することが可能です。バーコードを読み込んだらあとはカップ麺にお湯を注ぐだけ。時計を気にしなくても、茹であがったら教えてくれます。ちなみに本アプリは純粋なタイマーとしても利用できます。バーコードを読み込んで見つかる商品は、『みんなのラーメンタイマー』を利用した誰かが事前に登録してくれた情報です。商品が見当たらなければ、新たに商品名・タイマー時間・カップ麺の写真を登録することもできます。自分が登録した情報を使って、今どこかの誰かがラーメンを作っているかもしれません。読み込んだ商品はお気に入りに30件まで登録され、一度設定した時間は履歴として保存されます。同じカップ麺を食べるなら履歴から商品をタップするだけで、利用可能です。

http://andronavi.com/2011/05/89855

感想

簡単に作れるので、やっぱり量は多いんですかねー。ただ、その分惹かれるようなアプリはなかなか出会えませんでした。

ただ、おもしろいのもいくつかみつけました。

カップラーメンタイマー

そうだ。。別にプログラムじゃなくてもいいんだ。。動画でかっこ良く3分待てば良いじゃないか!!これが視野がせまくなるってことか。。。

AKB48 CM カップヌードルサプライズリレー

このシリーズみながら3分まちたい。

Web画像の調査

デザインも勉強しておかないといけないので、画像も調べてみました。

そうそうこれこれ

抽象化するとこれ

最近のはやりだとこれ

男が好きそうならこれ

いかにも未来大好きならこれ

ふぃ。

雰囲気もつかめてきた？ところでそろそろ作りましょう。

ラーメンタイマーの開発

デザインを作る

まずはデザインから作ります。これまで、「あくまでプロトタイプ（お遊び）」的な考えで、後ろのプログラムばっかり作ってました。がお遊びはやっぱりお遊び。プログラムが完成してもつまらない。人に見せきれない。モチベーション下がる。やめる。といったつまらない循環をしてました。「頭のなかではこんなにかっこいいのに・・・」そう、想像だけで終わってしまい、なにも創れない。そんな経験あるのではないでしょうか。やっぱり人に見せるサービスはデザインが命。さぁIllustratorを開きます。

1. まずは背景画像！

素材サイトから見つけてきます。おすすめはunsplash。こちらのサイトは高画質なかっこいい画像が沢山公開されています。

https://unsplash.com/

なんと、ダミー画像として使うためのURLも公開してます。超便利。今すぐブックマーク。(開発中に思い出してもおそいです)

http://unsplash.it/

2. illustoratorでいっきにつくる。

Zantedeschia

カラーの花の背景をつかいました。ラーメンというより、パスタですね。

Ferris wheel

観覧車？が時計の様に見えたので。。こちらは、少し若い女性をイメージしてつくりました。

にゅーよーく

若いビジネスマンをイメージ。いかにもって感じですが、まずは定番からということでつくってみました。

やま

「外国人が見た日本」をイメージしました。

さて、上のデザインを使って、ラーメンを、いやラーメンタイマーを、いや固メンタイマーを作っていきたいと思います。

仕組みをつくる

さて、今回は簡単なアプリなので、javascriptを使ってタイマー部分を作っていきます。プログラムを書き始めますので、とりあえずgithubにリポジトリをつくりました。

タイマー部分をどう作るかというところなのですが。。。あまり時間をかけたくありません。というのも、結局仕組みの部分は作るのが楽しいんです。ただ、そればかりをしていても、モノとしては完成しない。それでは、今回の作戦の趣旨がかわってしまいます。「動くものをつくる」中身はあとから、好きなだけ時間をかければよい。ということで、数行でかけるタイマーをみつけました。

犬でもわかるjavascript講座 -ラーメンタイマー

非常にシンプルに作られていて、jsコードは20行程度。表示時間からタイマーで一秒後に関数を呼び出し表示を1引く。誤差がつもりそうなので、あまり好きではないが、非常に簡単に実装できる。

harryNoodleTimer_mock.html

サンプルコード

できた。こんなものです。全然カッコ良くなくて感動が薄い。さぁ動くのをつくっていきます。

デザインをWebページにする

先ほど編集していたIllustratorから、Photoshopへデータを送ります。ここがAdobeの便利なところですね。いろいろとコツがあるみたいなのですが、のちのちHTMLでグループとして扱いたいものに関してはレイヤー化しておきます。(グループではないです）右に移っているレイヤーパネルの右上にオプションを開ける小さなボタンがあるので、そこを開いて、「サブレイヤーに分解{シーケンス）」とすれば、選択している複数の要素を一つの”レイヤー”のしたにまとめてくれます。こうすることでPhotoshopに読み込んだときにきれいにまとめられて、”とても”作業が楽になり、楽しくなります。(こころに余裕があれば、名前も付けましょう、さらに幸せになれます）

Photoshopへの書き出し

ファイル>書き出し

今回の様にモバイル用と、デスクトップ用でアートボードを分けている場合は、ダイアログが開いてあと「アートボードごとに保存」にチェックをつけておきます。フォトショップで開きます

どちらもレイヤーがうまく整理されています。気持ちい！

レスポンシブでざいんをつくる

さて、webサイトにするため、HTML+CSSをかいていきたいところですが。スマホ対応したい。。これは絶対です。しかし、手打ちでするなんて。。恐ろしくてできない。のと、僕のスキルでは、先ほど作ったデザインをスマホ対応まで考えながらコーディングするのは無理です。実感してます。そこで、ツール解禁です。Adobe Edge flowを使います。こういうツールはたくさんあるのですが、どのツールも結局は、こだわればこだわるほど、手打ちで編集するのが必須です。今回はデザインすべてではなくて、大枠の要素の動きを、Adobe Edge flowを使って作り、詳細は手打ちで作ります。雰囲気を知る基本的な使い方

Photoshopで作ったデザインをEdge flowへ渡す！

PSDファイルを基にしたリリースレベルのレスポンシブデザインの作り方 (1/2)

いろいろ調整すること(1. Photoshop側で解像度を合わせておきましょう。今回は1200pxの画面を想定していますので、事前にイメージ>画像解像度から、1200pxに合わせておかないとEdge Reflowでサイズがうまくいきません。2. 背景画像を使いたいので、レイヤーを選び>アセットを抽出をしましょう。) さて、Edge flowをからファイルをエクスポートします.

すると、htmlとcssが吐き出されます boilerplate.cssは初期化用のcssです。実際のレイアウトのcssはEdgeflowでのプロジェクト名.cssとなります。変な名前が付いちゃってます。プロトタイプ用レイアウトHTML 意外とすっきりしているんです。これが。ただ、それぞれにidタグがついてしまうので、改造する場合はクラスを使って変更していきましょう。githubで公開してますので、よかったら使ってください。

公開！！！

やっとこの時がきました。レンタルサーバーにFTPでアップロードして確認します！

できた。。

時間になると教えてくれます。（執筆時点では試作のため2:10で通知されます）。あとは大好きなプログラムを描くぞー。

長文読んでいただきありがとうございました。

気合を入れて書いたのですが、結局はうんこタイマーです。しかもまだ動きません。汗(2015/06/04)

ラーメンタイマー

http://fififactory.sakura.ne.jp/HurryNoodleTimer/index.html

Download (github)

https://github.com/peace098beat/HurryNoodleTImer

2015-03-14

アルゴリズムを売り買いするサービスAlgorithmiaについて

Algorithmiaについて

アルゴリズムを公開して、APIの利用頻度でポイントを交換するサービスをみつけた。

Algorithmia - Open Marketplace for Algorithms

Algorithmia紹介記事

このサイトにアルゴリズムを登録した発明者は、そのアルゴリズムの利用者から料金を受取ることができる。Algorithmiaではアルゴリズムの募集にあたって懸賞金システムを用意している。ソフトウェアのデベロッパーが特定の機能を果たすアルゴリズムを募集すると、その分野に詳しい研究者が、料金を取り決めた上で、スクラッチで開発を始めるという仕組みだ(Algorithmia―研究者とスタートアップをつなぐユニークなアルゴリズムのマーケットプレイス)

現在公開されているアルゴリズム

現時点(2015.03.14)で公開されているアルゴリズムは500ほど。

機械学習やScrayping技術、WebAPI等が見受けられる。

カテゴリ

公開されているアルゴリズムのカテゴリ

カテゴリは以上のようになっていて、最近主流のデータマイニング関連の技術が多いように感じる。

公開アルゴリズムを使ってみる

このAlgorithmiaの特徴として、公開されているアルゴリズムはWeb上のAlgorithmia専用コンソールにて実際に利用して試すことができる。

今回は試しにGetLinksというアルゴリズムを使ってみる。名前からおそらく、インプットしたURL上にあるリンクを一覧表示してくれるのだろう。そして、このAlgorithmiaのとても親切な点として、サンプルコードを動かす際にひつようなインプットは各アルゴリズムごとに必ず例として表示されており、返される結果も隣に表示されている！！

従来、このような独自のアルゴリズムや便利ツールのAPIだと、実際に動かす際にインプットをどうしたらよいやら、どうゆう挙動なのかで、迷ってしまい、時間がかかりそうだと見過ごしてしまうことがよくある。しかしAlgorithmiaでは、すべての公開ページにインプットとアウトプットのサンプルが同じフォーマットで表示されており、とても理解が容易につくられている。（これなら英語が苦手な方でも、プログラムさえできればとても強い味方になるだろう）

Algorithmia専用コンソール画面

こちらがAlgorithmia専用コンソールである。こちらに、サンプルにあったようにURLを入力してみる。

ここで注意しないといけないのは、URL を””で閉じなければエラーになる。きちんとは読んでいないが、Algorithmiaは入出力がJSONとされているようだ。（もし間違いであればご指摘して頂きたい）。通常であれば、アルゴリズムは分野や使い方により、入出力が様々であり、他人が作ったものを利用するには、関数間の入出力の修正が面倒であったが、その点はフォーマットを統一することで、軽減されそうだ。

試しにfififactory.comのリンクを収集してみよう。先ほどのコンソールに”http://fififacotory.com/”と入力する。

APIの使用例

すると、このようなリンクの一覧が返ってくる。

[
“http://cnt.affiliate.fc2.com/cgi-bin/click.cgi?aff_userid=290526&aff_siteid=280992&aff_shopid=1″,
“http://fififactory.com/?cat=3″,
“http://fififactory.com/?cat=2″,
“http://fififactory.com/?page_id=243″,
“http://hikaru-sakihama.fififactory.com/hikaru-wp/wp/wp-login.php”,
“https://github.com/”,
“http://cnt.affiliate.fc2.com/cgi-bin/click.cgi?aff_userid=290526&aff_siteid=280992&aff_shopid=156″,
“https://www.tumblr.com/blog/fifi-peacebeat”,
“http://fififactory.com/?cat=5″,
“http://shinsekai.fififactory.com/”,
“http://fififactory.com/?cat=10″,
“http://fififactory.com/”,
“http://weddingmovie2013.web.fc2.com/”,
“http://fififactory.com/?cat=16″,
“http://最強じゃんけん.com”,
“http://hope-is-dream.hatenablog.com/”,
“http://kairaweb.com/”,
“http://orangehouse098.com/blog/wp-login.php”
]

このHPのトップに張られているリンクが表示されているのがわかる。これだけ。。なんて簡単なんだ。。

コードを確認する

Algorithmiaでは、ユーザが公開しているAPIに関してはコードが見れる。一度見ておこう。

ページ左下にあるViewSourceで確認できる。

Algrithmia: ソースコード確認画面

このAPIはJAVAで書かれているのがわかります。（僕はJavaはわからないので内容については割愛します)

実際にアルゴリズムを登録する

Algorithmiaにサービス登録すると、アルゴリズムを作って登録できます。こういうのはやってみないとわからない。とりあえずアルゴリズムを登録してみます。

上部ツールバーにある+Add Algorithmから登録できます。こちらを押すと、登録するアルゴリズムの設定を決めるモーダルができてきます。

アルゴリズムの名前と、Algorithmia内で登録したAPIを呼び出すためのURIを決めます。

記述する言語の選択。

今のところ、java、python, scalaの3種類だけしか利用できないみたいです。ここらへんが参入障壁なのでしょうか。

最後にライセンスを設定して終了になります。

アルゴリズムの実装用エディタ

Algorithmiaにはブラウザエディタがついております。これもAlgorithmiaの魅力の一つともいえます。

立ち上げた初めはAlgorithmiaのHelloコードが書かれています。

これはコンソールに入力された文字列にHelloを加えて出力するだけのコードです。

成功すると、”Hello <入力文字列>”が返ってきます。

ここで注意しておく点は二つあります。

1. コンパイルすること

このサンプルコードも、もしなにも変更していない状態であっても、ひとまずコンパイルを押してないと動かないので注意。（ここであきらめないで）

2. 入力を””で囲むこと。

すぐにエラーメッセージが消えてなくなるのですが、””で囲まないと「JSONがなんとか。。。」とエラーがでるので、落ち着いて。

公開する

とりあえず最後まで使ってみたいので、適当にコードを変更して公開までしたいと思います。

HelloコードをFiFiに変更しました。(つまらなくて申し訳がないですが、これで許してください)

ツールバーからPublishを選択します。（事前に保存と、コンパイルは済ましておいてください）

公開設定

すると、公開範囲を選択でき。下では、アルゴリズムの利用料金を設定できます。

こちらを読んでみると、設定したロイヤリティの70%が、作成者にもらえるようです。

まとめ

Algorithmiaを一通り使ってみました。アルゴリズムの登録と利用が、このような整備された環境でできるのはとてもありがたいことです。また、研究等で、個人的に作って利用しているアルゴリズムは研究者の数の何倍もマシンの中に眠っていると思うので、そのようなコードを一般公開して、知識とお金を交換するというのは面白いかもしれませんし、一種のモチベーションにもなるかもしれません。今後の発展に期待です。

[Anaconda] Pythonで数値解析環境構築 | Anacondaでvirtualenv(仮想環境)を使う方法 | FiFiFactory Official Page

[BeautifulSoup] Pythonでスクレイピングする | youtube動画のヒット数を調べる | FiFiFactory Official Page

[Python] テキストデータをPython標準ライブラリでパースする方法 | FiFiFactory Official Page