ウェブ技術が好きjavascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログこの広告は、90日以上更新していないブログに表示しています。ダイエット写真はうちのみーこ。今年も夏がやってきました。毎年この季節になると思うことはなんでしょうか?そう、ダイエットですよね。海にプールにフェスにビアガーデンと夏特有のイベントがあるたびに痩せなきゃ!と気を引き締めるのですが3日後にはすっかり忘れているものです。摂取にすれば自然と痩せられると頭では分かっていても実現するのが難しい。そんな自分のために、毎日のカロリーバランスを記録して摂取カロリーが消費カロリーを上回らないようにするウェブアプリを開発しました。tkosuga.jp使い方はかんたん、摂取カロリーを毎日入力するだけです。使うと使い方説明のツアーが始まるので、説明を見て進めるだけで利用開始できます。このカロリーを記録するダイエット方法をレコーディングダイエットと呼びます。数年前に流行りましたよね。基礎代謝量と生活強度から日常生活で自然消費されるカロリーを計算するので、摂取カロリーが消費カロリーを上回らないよう生活に気を付けて暮らせば自然と痩せて行く皮算用です。このウェブアプリではダイエットの成果をはちみつ・鮭・りんご・どんぐり・おにぎり換算で共有する機能もあるので、痩せてきたら友達に鮭x匹分も痩せたよ!と自慢しましょう。※キャプチャ2「鮭4匹相当のダイエットに成功だね!すごいね!」データ保持についてデータは全てブラウザ内に保存しています。ダイエットレポートを共有する場合を除き、データを外部に転送・保存など通信していません。複数ユーザーでPC/スマホを共有していてブラウザも共有している場合、共有している他ユーザーに見られてしまう可能性がありますのでご注意下さい。※プライバシーに関する情報(基礎代謝計算のための体重・年齢・性別)はダイエットレポートの共有および移行データに含まれません。個人的なダイエット成果と開発の動機ぼくはレコーディングダイエットのくまスリムの開発を始めた=個人で使い始めた6月~7カ月末の2カ月で80kgから74kgの6kgのダイエットに成功しました。ダイエット開始初日はスマホのメモアプリで摂取カロリーと消費カロリーを記録して、電卓アプリで合算してカロリーコントロールしていたのですが、2日目には早くも辛くなってきたので以下の3つ要件を満たしたアプリを自作する事にしました。スマホでお手軽に使える。ボタンを押すだけでカロリーコントロールできる。モチベーションを維持できる。要件を満たしていく中で幾つかの課題を抽出できました。以下解決した課題とその解決方法です。解決方法ブラウザだけで使えるウェブアプリにする。外部リソースをとにかく減らす。動作をとにかく高速化する。AdBlock/コンテンツブロッカー環境で動作するようにする。痩せたら褒められたい解決方法はちみつ・鮭などの謎単位で何だか凄い感を演出。SNS共有機能を付ける(LINE/Facebook/Twitter)。目標値やノルマを表示しない。現在の体重とか見える所に表示しない。メンテナンスに苦労したくない解決方法サーバーサイドを使わずHTMLで完結する形にする。gulpでビルドを自動化。お金かけたくない解決方法HTTPSには無料のStartSSLを利用。いま使っているさくらのレンタルサーバー(月額数百円)で動かす。セキュリティ/プライバシーで苦労したくない解決方法HTTPSの導入ウェブストレージの利用。サーバーサイドで保存しない。生年月日にニックネーム入力等をしない。技術的な情報ここからツール紹介からがらっと変わって技術的な情報です。StartSSL本アプリのドメイン(tkosuga.jp)には無料で使えるStartSSLを利用しています。Infrastructure1アカウントで上限5つのサーバー証明書を無料で発行できます。企業情報や個人事業主の情報を入力する必要がありません。クラス1の証明書です。Test)を試して見ます。※上記キャプチャはhttps://www.ssllabs.com/ssltest/の結果SSLハンドシェイクの欄を見るとStartSSLは昔のブラウザに対応していないんですね。本アプリはさくらレンタルサーバーで動作しているのですが、SSLを有効にするとサーバーにはHTTPSが解除された状態で転送されます。リバースプロキシを経由してレンタルサーバーに辿りついているようです。そのため.htaccess等で「httpならhttpsに転送する設定」をするとリダイレクトループが起こります。これを回避するにはさくらレンタルサーバー特有のカスタムHTTPヘッダに付与されているX-Sakura-Forwarded-Forを利用します。[R=301,L]</IfModule>SVG本アプリはPNG/JPEG画像等(ラスター画像)を使わずにインラインSVG(ベクター画像)を利用しています。以下のアイコンは全てインラインSVGです。Awesomeアイコン)SVGアニメーションロゴアイコンのアニメーションにhttp://maxwellito.github.io/vivus/を利用しています。CodePenにロゴアイコンとVivusを使ったデモを設置しました。codepen.ioVivusを使うと下のコードだけでSVGアウトラインのアニメーションができます。100msecでポーリングしながら開始と終了を延々とループさせています。fa-icon-name」とします。お馴染みの形式ですね。Awesomeのアイコンを表示しています。%></i>CSSでは以下のように文字幅に合わせてSVGの横幅を指定し、横幅に合わせてSVGの高さ上限を指定しています。em)についてはMozillaの説明が分かり易いです。developer.mozilla.orgremは2016年現在の主要ブラウザでサポートされているので利用して問題ないと思います。http://caniuse.com/#feat=remFont-AwesomeアイコンのSVG化には以下を利用しています。APIを利用しています。developer.mozilla.orgウェブストレージは便利な反面、もしブラウザに脆弱性が見つかりその範囲にウェブストレージが含まれていればウェブストレージに保管されている重要な情報が漏えいする可能性があります。そのためダイエットアプリでお約束になっている生年月日の入力・保存といった個人の特定に繋がる情報(他には姓名やニックネーム)を保存しないようにしています。ウェブストレージ利用のサンプルコード以下のコードはウェブストレージAPIを使ってハッシュマップをsave/loadするサンプルです。JSON#parseとJSON#stringifyでシリアライズを実現しています。saveToStorage(options);共有するデータのシリアライズ+圧縮データ共有の仕組みにはウェブストレージに保存しているデータをシリアライズしURLに付与して、他ブラウザで開いた時のそのURLからデータを復元する方法を取っています。ものすごく便利なライブラリです。利用をしたサンプルコードです。文字列をURIセーフな形に圧縮して復元しています。APIを利用しています。developers.google.comここだけサーバーサイドでrubyのCGIを利用しています。hash['id']endshorten(URI.unescape(cgi.params['u'].first))毎日のカロリー変動を見るラインチャートMetricsGraphics.jsを利用しています。metricsgraphicsjs.orgCodePenにデモを準備しました。見やすくするため線と文字を太く大きくしています。codepen.io四方の余白と高さを指定して2本の線で描画するデータを渡すとキレイなラインチャートが表示されます。http://benpickles.github.io/peity/CodePenのデモを準備しました。codepen.ioこのチャートライブラリはとても分かり易くて便利で、使い方は以下の通りです。直感的でシンプルですよね。$("span.pie").peity("pie"));スマホのクリックを速くするfastclickgithub.comfastclickを利用してスマホでボタンを押したときの反応速度を向上させています。何をしているのかなと思ってこのライブラリの実装を見てみるとclickやtouchstartのEventListenerを入れ替えたりイベントの伝播に変更を加えたりしています。長くなってきたのでアプリ内で利用していて説明していないライブラリを列挙します。みんな大好きなintro.jsがMITライセンスからAGPLv3と商用ライセンスのデュアルライセンスに変更されたのでこっちにチャレンジ。ファビコン一式を作ってくれる便利なウェブサービス。まとめお手軽に使えるダイエットアプリ作ったので使って見てね!tkosuga.jpぼくはこのウェブアプリでダイエットに成功、さらにフロントエンドとNode.js/gulpと今風のサイト高速化にSVGの勉強もできたので万々歳です。意見要望があれば気軽にブログのコメントやTwitter宛てにコメントをください。月別アーカイブはてなブログをはじめよう!tkosugaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。