Webアプリのすゝめ
※この記事はFUN Advent Calendar 2016の16日目のものです。
クリスマスが近付き、孤独で身も心も寒くなってきたIsaacです。初めてのAdvent Calendarですが、どうぞよろしくお願いします(?)
この記事では本学の学生を対象に、何か作りたい…でも敷居が高い…と思われがち(?)なWebアプリがどんなものなのかというのと、その入門を記します。
さて、そもそもWebアプリとは。
インターネットなどのネットワークを介して使用するアプリケーションソフトウェア (Wikipedia)
とあります。まぁそのまんまですね。
OSごとにアプリケーションを作るというのは非常に大変なことなのは分かって頂ける方も多いかと思います。
iPhone版を作るのにSwift、Android版を作るのにJava、Windows版を作るのにC#、Mac版を作るのにまたSwiftで開発しなければなりません。
Webアプリならそんなことをしなくて良いのです！！(ブラウザごとに処理を分けなきゃならなかったりするのはまた別問題なので、ここでは無いものとする)
レスポンシブにデザイン設計すればPCでもスマホでも綺麗に表示させることができますし、何より開発はPCにテキストエディタとブラウザさえあれば出来ちゃいます。
これだけでもWebアプリ開発を始めるのに十分な理由となるでしょう。さぁ、Webアプリ開発を始めましょう。
早速何か作ってみる
本学の学生であれば、HTMLくらいは講義で触ったことがあると思うので、そこら辺は省きます。
以下はJSFiddleというこれまたWebサービスというかWebアプリを使って、簡単な例を作ったものです。
左辺の2つのボックスに数字を入れて＝をクリックすれば、右辺に足した結果が出るという、非常に単純なWebアプリです。
もう少し説明すると、document.getElementById()でDOM(Document Object Model)としてinputの部分を取得しています。またHTML側の＝のところでHTML5のonclick属性を使用していますが、これでJavaScript側に書かれた関数answer()を呼び出していて、その関数でid=”c”の部分に足した答えが出るようになっています。
見ての通り、何も難しいことはありません。HTMLで要素を作り、JavaScriptでロジックを書くだけです。これをHerokuやレンタルサーバにでも上げれば、JavaScriptの動くブラウザならどれでも「足すだけ計算機」を使うことができます。Webアプリの完成です！
もっと面白いことしてみたい
上の例では、ブラウザ側でJavaScriptを使って計算させました。でももう少し複雑な計算をさせるとなると、ユーザー側のマシンスペックによっては計算が遅くなってしまったり、スクレイピングなどブラウザだけでは出来ない処理があります。
Webサーバ側で何か処理をさせた例を作ってみました。
ここにアクセスしてみてください。このWebアプリは最近自分が面白いと思っていることを詰め込んで作っているものです。フロント側はWebComponentsという比較的新しいブラウザ側の仕様を使ったPolymerというフレームワークで作っていたり、Webサーバ側はHTTP2で安全且つ高速でホスティングしていたり、このWebアプリ全体はDockerというコンテナ技術を使っていたりするのですが、今回はWebアプリ入門ということで詳しいことは省きます。
【12月18日追記】さらにSelenium用のコンテナを使ってより完璧なスクレイピングをすることになりました。ソースはこちら。
このWebアプリの肝心のWebサーバ側の処理というのは、Python3を使ったスクレイピングです。フロントエンドからAjaxでリクエストが来るので、スクレイピングして結果をJSONにして返す、ということをしています。
ヘッダーのURLと書かれたところに、2chの任意のスレッドのURLか、画像まとめサイトの任意のページのURLを入れてEnterを押してみてください。特になければ以下のURLをご利用ください。グロ画像が含まれていないことは確認済みです。
例) http://tekito.2ch.sc/test/read.cgi/anichara2/1467477618/0-
ヨーソロー！
2chであればリンク化された画像をまとめて、普通のサイトであればそのまま画像をまとめて表示します。
ソースはGitHubに上げてます。
https://github.com/LeoIsaac/piccolle-v2
フロントエンド側だけで処理したりWebサーバ側だけで処理したりできることは書きました。そして、その処理を繋ぐAjaxについても書きました。このAjaxですが一方向のもので、フロントエンドからWebサーバにリクエストを送ることしかできず、Webサーバからフロントエンドに任意のタイミングでデータを送ることができません。
WebSocketという技術を使えば、双方向のデータ送信が可能になりますが、それはまた今度…
今回の記事は以上とします。みんなもWebアプリ作ろう！
明日は @uehara1414 君です！十中八九、Pythonでしょうね！！