NO IMAGE

“Share Diet”に使われた技術やツールの概要(実装編)

今回は先日公開した”Share Diet”で使われた技術やツールを簡単に紹介したいと思います。

後日、詳細についてはお話できたらな~と思います。

1.Laravel (PHPフレームワーク)

http://laravel.jp/

今回最も活躍しているのは、この半年ほどずっと使っているフレームワークで”Share Diet”のバックエンド処理は全て担っているLaravelです。

非常に機能豊富なフレームワークであり、開発が盛んに行われているオープンソースフレームワークです。使えば使うほど、美しいコードが書けるようになり楽しいです。

PHP界で今最も熱いフレームワークなので皆さんもぜひLaravelで遊びましょう。

2.Vue.js (JavaScriptフレームワーク)

https://jp.vuejs.org/

次にフロントエンドの処理はVue.jsを使っています。

今までJavaScriptのフレームワークはAngularJSしか使ったことがなかったのですが、Laravel5.3より最初からVue.jsが含まれることになり、練習を兼ねて今回は少しだけVue.jsを使いました。(グラフの表示期間切り替え部分)

公式や色んな所で言われていますが、学習コストが少なくちょっとしたことなら簡単にできるのがいいですね。AngularJSに比べると日本語の情報や書籍が少なく、やや学習しづらい部分もありますが、盛り上がってきているフレームワークなのは間違いないのでこれから増えるでしょう!

3.Bootstrap (HTML,CSS,JSフレームワーク)

http://getbootstrap.com/

メニューバーやボタンなどの部品のデザインのために、BootStrapを使っています。こちらもLaravelに最初から入っている非常に使いやすいフレームワークです。

HTMLの各部品のclass属性にBootStrapが指定しているクラス名を入れるだけで素敵なデザインの部品にしてくれます。他にもモーダルやドロップダウン、タブといった機能もclassを使って簡単に実装できるので素晴らしいですね。

最近はマテリアルデザインが流行ってきて、Material Design for Bootstrapが出たりしていますが、僕はそのままのBootStrapが好きです。

4.Chart.js (JSのチャート用ライブラリ)

http://www.chartjs.org/

体重の記録のグラフを描画するのに使ったのがこちらのChart.jsです。

美しいグラフが少しのコードで実装することができるライブラリになっています。ただ、公開後に気づいたのですがレスポンシブな部分で少し使いにくいようで、今スマホで”Shere Diet”のグラフをみるとあまり綺麗に描画できていないので修正予定です。

しかし、色々なグラフが簡単キレイに実装できるので使える場面はたくさんありそうです。