2016の16日目のものです。クリスマスが近付き、孤独で身も心も寒くなってきたIsaacです。Calendarですが、どうぞよろしくお願いします(?)この記事では本学の学生を対象に、何か作りたい...でも敷居が高い...と思われがち(?)なWebアプリがどんなものなのかというのと、その入門を記します。そもそもWebアプリとは。(Wikipedia)とあります。OSごとにアプリケーションを作るというのは非常に大変なことなのは分かって頂ける方も多いかと思います。iPhone版を作るのにSwift、Android版を作るのにJava、Windows版を作るのにC#、Mac版を作るのにまたSwiftで開発しなければなりません。Webアプリならそんなことをしなくて良いのです!!(ブラウザごとに処理を分けなきゃならなかったりするのはまた別問題なので、ここでは無いものとする)レスポンシブにデザイン設計すればPCでもスマホでも綺麗に表示させることができますし、何より開発はPCにテキストエディタとブラウザさえあれば出来ちゃいます。これだけでもWebアプリ開発を始めるのに十分な理由となるでしょう。さぁ、Webアプリ開発を始めましょう。何か作ってみる本学の学生であれば、HTMLくらいは講義で触ったことがあると思うので、そこら辺は省きます。以下はJSFiddleというこれまたWebサービスというかWebアプリを使って、簡単な例を作ったものです。左辺の2つのボックスに数字を入れて=をクリックすれば、右辺に足した結果が出るという、非常に単純なWebアプリです。Model)としてinputの部分を取得しています。HTML側の=のところでHTML5のonclick属性を使用していますが、これでJavaScript側に書かれた関数answer()を呼び出していて、その関数でid=”c”の部分に足した答えが出るようになっています。見ての通り、何も難しいことはありません。HTMLで要素を作り、JavaScriptでロジックを書くだけです。これをHerokuやレンタルサーバにでも上げれば、JavaScriptの動くブラウザならどれでも「足すだけ計算機」を使うことができます。Webアプリの完成です!もっと面白いことしてみたい上の例では、ブラウザ側でJavaScriptを使って計算させました。複雑な計算をさせるとなると、ユーザー側のマシンスペックによっては計算が遅くなってしまったり、スクレイピングなどブラウザだけでは出来ない処理があります。Webサーバ側で何か処理をさせた例を作ってみました。https://piccolle.hatu.gaここにアクセスしてみてください。この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という技術を使えば、双方向のデータ送信が可能になりますが、それはまた今度...今回の記事は以上とします。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。