WebApplication
目次
- webアプリ開発・概要
- CGI
- Ajax・JSON
- ワークフローツール
- Yeoman
- Grunt
- フロントエンドツール
- Twitter Bootstrap
- AngularJS
- エンジン
- jade
- LESS
- プログラミング言語・概要
- Erlang
- Node.js
- Perl
- PHP
- Ruby
- Python
更新日
- 2014/04/18 14:00:06
※ このページは、「言語あれこれ・概要(language)」 から再構成しました
※ 当面 Webアプリ向けの言語をまとめます
webアプリ開発・概要
ウェブアプリケーション - Wikipedia
ウェブアプリケーション(Web application)は、インターネット(もしくはイントラネット)などのネットワークを介して使用するアプリケーションソフトウェアである。多くの場合、これらのアプリケーションは、Webブラウザ上で動作するプログラミング言語(たとえばJavaScript)によるプログラムとWebサーバ側のプログラムが協調することによって動作し、ユーザはそれをWebブラウザ上で使用する。
ウェブアプリケーションに対して、ローカルのデスクトップ環境上で動作するアプリケーションは、デスクトップアプリケーションやスタンドアロンアプリケーションと呼ばれる。
- ひとこと
- 現在では、べたな CGI プログラミングは推奨されていなくて、フレームワークを使うのが定番。低層のCGIをラップしたり、固有で斬新な仕組みを実現しています
- PHP/Python などでは、テンプレート機能で手書きレベルでも比較的簡易にhtmlを構成できます
- テンプレートエンジンという処理系があり、フレームワークは各種の個性的なエンジンに対応しています。詳しくは、各々の言語で触れます
- ※ 本サイトでは、最近の注目テーマを主に扱う方向です
◇ 参考
CGI
Common Gateway Interface - Wikipedia
Common Gateway Interface(コモン・ゲートウェイ・インタフェース、CGI)は、ウェブサーバ上でユーザプログラムを動作させるための仕組み。現存する多くのウェブサーバプログラムはCGIの機能を利用することができる。
- CGI について
- web ページの表示内容やデータ入出力は、サーバサイドでは php,python,ruby などによる CGI プログラムが、クライアントサイドでは、php/JavaScript などが処理します。
- CGI はサーバ側の処理系がサーバで処理するわけです。JavaScriptは個々のブラウザに組み込まれたインタプリタが実行します(そのため、ブラウザには JavaScript のデバッグ機能も実装されています)
- クライアントからは、クエリでCGIにデータを渡すことができます。クエリはURLに付随させてページを静的に構成出来ます。Ajax を使い、画面の一部を更新するような動的な構成にすることも可能です。
- URL 付随のクエリは、「?」から後方で、これを当該ページのプログラムが処理します。Google の検索や翻訳などが分かりやすいでしょう
- なお、URL 自体も、以前は当該ページが実際に html として全てあらかじめ作成されていたのが、現在では、ページによって動的に生成する手法が広まっています。
- そうした web サイトの運用以外にも、サーバーをコマンドで実行管理する仕組みが可能で、ロボットの遠隔操作に使うなどの事例も見られます。
- CGI を動作させるには、http サーバの設定が必要です。下記は Apache の例です
◇ Apacheの設定
設定例
ここで CGI でページを構成したときに css を参照する場合は、css も設定しておきます
CGIファイルの所有者はApacheに指定します(環境による?)
vim /etc/httpd/conf/httpd.conf
<Directory "/var/www/cgi-bin">
AllowOverride None Options ExecCGI Order allow,deny Allow from all AddHandler cgi-script .pl .cgi AddHandler text/css .css AddHandler image/gif .gif</Directory>
Ajax・JSON
Ajax - Wikipedia
Ajax(エイジャックス、アジャックス、アヤックス[要出典])は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。
従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取ることで画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる。 例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していくといったことが可能になる。
Googleでは、デスクトップアプリケーションと遜色のない電子メールクライアントであるGmailやGoogle Calendarでも積極的にAjaxを採用し、Ajaxの実用性がGoogleのWebアプリケーションを通じて世間に認知されはじめている。
JavaScript Object Notation - Wikipedia
JSON(ジェイソン、JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。
JSONは単純であるので、特にAjaxの分野で利用が広がりつつある。JavaScriptでJSONをパースして読み込むには、文字列をJavaScriptのコードとして解釈させるeval関数を作用させるだけでよい。このように、広く普及しているウェブブラウザ搭載言語であるJavaScriptで簡単に読み込めるため、Ajaxの開発者達から注目を浴びることになった。
ワークフローツール
Yeoman
Yeoman (computing) - Wikipedia, the free encyclopedia
Yeoman is an open source client-side development stack, consisting of tools and frameworks intended to help developers quickly build high quality web applications. Yeoman runs as a command-line interface written in Node.js which combines several functions into one place, such as generating a starter template, managing dependencies, running unit tests, providing a local development server, and optimizing production code for deployment.
Yeoman was released at Google I/O 2012.
Stable release 1.0
client-side development stack で、スターターテンプレートを生成、依存関係を管理し、ユニットテストを実行し、ローカルの開発サーバーを提供する。展開用の量産コードの最適化など複数の機能を組み合わせている。 Node.js で書かれたコマンドラインインターフェイスとして動作する
概要
- フロントエンド指向な構成でひな形を生成し、テストまで管理します
- バックエンド側は、構成によってはかなり手動になりそう
- AngularJS 界隈では定番らしい(手動だと大変ということ?)
- 内部的には3つのツールで、一緒に入れてしまう場合>npm install -g yo grunt-cli bower
- Yo、対話式でひな形生成。AngularJS を指定したり。各種ジェネレータ(テンプレート)あり。自作も可能
- bower、Twitter社提供、package manager
- Grunt、テストなど、task runner
公式
- Yeoman - Modern workflows for modern webapps
- BOWER: A package manager for the web
- Grunt: The JavaScript Task Runner
関連記事
- Yeomanのあれこれ - Qiita [キータ]
- WEBアプリケーションビルド・ テストツール YEOMAN -slideshare
- フロントエンドのツール Yeoman を勘違いしていた -slideshare
- YOEMANを使ってMEAN(MongoDB + Express.js + Angular.js + Node.js)のWebアプリケーションを作る
- Ruby と Compass のインストール
- generator-angular-fullstack は Compass を使用するので Ruby と Compass をインストールします
- cinst ruby
- gem install compass
※ Compass は、CSS メタ言語な Sass を使いやすくするらしい。RubyGems も必要らしい
Grunt
概要
- 前項 Yeoman で登場しましたが、これ単体で運用する場合が多いようです
- Sails.js は、これに管理される立場なのに、最近のバージョンでは内部的に呼び出して顰蹙をかっているようです
関連記事
- Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17
- 2013/03/14
- Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。
- コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。
フロントエンドツール
Twitter Bootstrap
.
概要
- デザイン(CSS)がメインのフロントエンドフレームワーク
- 手元でカスタマイズして使用するのが定番のようです
- ボタンなど、size/色がパラメタで簡易に指定出来て便利 (項目による)
- 詳しくは、こちらのページ →Twitter Bootstrap
公式
AngularJS
AngularJS - Wikipedia
AngularJS(アンギュラージェイエス)は、Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワークである。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としている。MIT Licenseでライセンスされたフリーソフトウェアである。
初版 2009年
最新版 1.0.4 / 2013年01月22日
詳しくは、こちらの予定 →JavaScript
エンジン
- ひとこと
- html の文法を簡易な記法でラッピングしたのが、テンプレートエンジンです。blog や wiki で独自の記法がありますが、そんな感じです。当然 html の隅々まで対応出来て、構造化などで強力な補助機能があります。フレームワーク抜きで、各種エンジンだけ使うのもアリでしょう
- インストールは紹介記事などを参照して下さい
- Tips
- ページ全体のレンダリングでなく、エンジンのAPIを呼んで、小規模・部分的な書き出しをすることで捗ることも多いようです
- また、スクリプト本文をテンプレートファイル内に置き、その内容に変数を持たす手法もあるようです
jade
- ひとこと
- Node.js/Express では、.html は URL アクセス時の動的生成でフォルダには残りません
- 確認向けには、「jade ファイル名」で、.html が生成されます。-P で、改行入り
◇ 公式
- 例文
doctype 5
html(lang="en")
head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine #container.col if youAreUsingJade p You are amazing else p Get on it! p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.
◇ 便利サイト
◇ 参考
- Jade について。
- こんにちは。今回は現実逃避を兼ねて Jade の素晴らしさをお伝えしたいと思います
- Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言語 である Haml に影響を受けた JavaScript テンプレートエンジンでもあります。
- ちなみにこの Haml は近年爆発的に普及をみせる CSS プリプロセッサ Sass の記法の元にもなっています (Sass の中でも普及率が高いのは SCSS 記法の方ですが)。
- A Node in Nodes - 10分でわかるjadeテンプレートエンジン
- 2012/03/02
- 今回は実際にjadeを使ってHTMLを生成するところをやりたいと思います
- jadeでコードを書く際のポイント
- HTMLタグを < > 無しで書きます
- 閉じタグの代わりにインデントで親子関係を表します
- CSSと同様idとclassの表記が使えます
- デフォルトのタグはdivです
- 先頭が英文字の場合はエスケープ
- python で jade が使える pyjade で jinja2 記法をしてみる?|?デブ ハゲ
- jade とは node.js 用のテンプレートエンジンで grunt とか使って開発してると jade のほうが node とは相性いいしなぁと思っていたら pyjade という python 用 jade パーサーがあった
LESS
- ひとこと
- LESS は、CSS メタ言語です
- twitter Bootstrap でも使われています →Bootstrap
- Node.js/Express で LESS 使用指定の場合は、.less ファイルを編集します。実行・GET 処理時に自動でコンパイルされ、確認なしで .css に上書きされます。この場合も、参照は下記のようにしておきます。( jade での例 )
- link(rel='stylesheet', href='/stylesheets/style.css')
- なお、LESS 指定でも、対応する .less が存在しない .css を参照している場合、そのファイルは手動で自由に編集して問題ありません
- 例文のインストールで npm が使われていますが、こちらで説明 →Node.js
◇ 公式
- LESS ≪ The Dynamic Stylesheet language
- The dynamic stylesheet language.
- LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
- LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
- version 1.5.0
- 例文(変数指定など。最後はネストの div の設定)
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; box-shadow: @style @c;}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));}
.box {
color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) }}
// Compile to CSS:
npm install -g less
lessc styles.less styles.css
◇ 記事
- LESS を使用して CSS でもっと多くのことを行う -IBM
- 2013/8/22
- LESS は CSS に似た言語であり、クライアント・サイドで、またはサーバー・サイドのプリプロセスによって、シームレスに CSS にコンパイルすることができます。
- ASCII.jp:CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
- 2012/02/09
- 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加
プログラミング言語・概要
◇一覧
言語処理系 | 登場時期 | 最新版 | リリース | 備考 |
Erlang | 1986 | R16B01 | Open Telecom Platform (OTP) | |
Perl | 1987 | 5.18.1 | 2013/8/12 | |
Python | 1990 | 3.3.3 | 2013/11/17 | 2.6/2.7系 |
PHP | 1995 | 5.5.6 | 2013/11/14 | |
Ruby | 1995 | 2.0.0-p353 | 2013/11/22 | |
Java | 1995 | |||
JavaScript | 1995 | 1.8 | 2008 年 | 評価版 1.9.3 / 2010年 |
Node.js | 2009 | v0.10.22 | 2013/11/13? | v0.11.9 (開発版) |
Go | 2009 | 1.2 | 2013/12/1 | 愛称 golang で検索が捗る |
※ 2013/12/12 更新 (一部 2014/3/8 )
- Googleの Go 言語による実装では、Docker が注目されています(Web アプリではありませんが)
Erlang
Erlang - Wikipedia
Erlang(アーラン)は、コンピュータにおいて汎用的な用途に使うことができる並行処理指向のプログラミング言語および実行環境。
Erlangの直列処理のサブセットの言語は、関数型言語であり、先行評価を行い、変数への代入は1回限りであり、動的型付けである。 Erlangはエリクソンにより次の条件のシステムを構築できるよう設計された。
- 分散化された環境
- 障害に耐性をもつ (フォルトトレラント)
- ある程度のリアルタイム性を備える
- 無停止で稼働する
ホットスワップが可能であり、稼働中のシステムを停止すること無くErlangのプログラムを変更することができる。 Erlangは、当初はエリクソン社内部だけで使われる非公開の技術であったが、1998年にオープンソースとして公開された。 エリクソンによるErlangの実装は基本的にはインタプリタであるが、HiPEというコンパイラも同社の実装に含まれている。 ただしHiPEはErlangが動作する全てのプラットフォームで使えるわけではない。
Erlangにおいては、マルチスレッドの処理の並行性はプログラム開発者(プログラマ)にとって明瞭である。 これに対し、ほとんどのプログラミング言語においては、マルチスレッドは複雑で誤りを犯しがちな分野である。 Erlangで「プロセス」(スレッド) を生成し管理する手法はごく平凡な方法である。
エリクソンはErlangをオープンソースとして、1998年に公開した。 その意図は、特定企業からの独立性を確保することと、Erlangに対する人々の認知を高めることであった。 ライブラリとリアルタイムデータベース (Mnesia) と共に配布される Erlangプログラミング言語の配布形式は、Open Telecom Platform (OTP) と呼ばれている。 エリクソンおよび数社の企業は、Erlang技術に対する商用サポートを提供している。
関連記事
- 実践 Erlang/OTP コトハジメ 2014.03
- 実際に仕事で Erlang/OTP を使う際に必要になるポインタをまとめ
Node.js
- 詳しくは、こちらのページ→Node.js
- 概要
- Node.js では、JavaScript でサーバを構築出来ます。
- それだけでなく、イベント処理などの新機軸やネイティブコード化で、大量のユーザをさばいたり、ゲームなどにも使える高速処理が可能
- jQuery に類するモジュールも有ります。モジュールは特定の処理を行う .js で構成されます。様々なモジュールが、専用の管理ツール npm で取り込めます。
- もちろん、ちょっとしたツールも作れます。(標準仕様でも見えますが、コマンドライン引数を処理するモジュールを探してみるのもいいでしょう)
Node.js - Wikipedia
Node.js はイベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境である(V8 JavaScriptエンジンで動作する)。Webサーバなどのスケーラブルなネットワークプログラムの記述を意図している。ライアン・ダールによって2009年に作成され、ダールを雇用しているJoyentの支援により成長している。
Node.jsはPythonのTwisted、PerlのPerl Object Environment(英語版)、C言語のlibevent(英語版)、RubyのEventMachineと同様の目的を持つ。 ほとんどのJavaScriptとは異なり、Webブラウザの中で実行されるのではなく、むしろサーバサイドJavaScriptの一種である。 Node.jsはいくつかのCommonJS(英語版)仕様を実装している。 Node.jsは対話的なテスト用にREPL (Read-eval-print loop) 環境を含んでいる。
Node.jsは、バイナリにコンパイルされた多くの「コア・モジュール」とともに提供される。それはネットワークの非同期ラッパーであるnetモジュールの他、パスやファイルシステム、バッファ、タイマー、より一般的なストリームなどの基本的なモジュールを含む。サードパーティ製のモジュールを使用することも可能である。それはプリコンパイルされた".node"アドオン、または、プレーンなJavaScriptファイルのどちらの形式でもよい。
Node.js - Wikipedia, the free encyclopedia
Stable release 0.10.22 / November 12, 2013
Preview release 0.11.9 / November 21, 2013
Perl
Perl - Wikipedia
Perl(パール)とは、ラリー・ウォールによって開発されたプログラミング言語である。実用性と多様性を重視しており、C言語やsed、awk、シェルスクリプトなど他のプログラミング言語の優れた機能を取り入れている。ウェブ・アプリケーション、システム管理、テキスト処理などのプログラムを書くのに広く用いられている。
言語処理系としてのperlはフリーソフトウェアである。Artistic LicenseおよびGPLのもとで配布されており、誰でもどちらかのライセンスを選択して利用することができる。UNIXやWindowsなど多くのプラットフォーム上で動作する。
PHP
PHP - Wikipedia
PHP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般的には PHP と省略して用いられており、これは「個人的なホームページ」を意味する英語の "Personal Home Page" に由来する。
PHPはサーバーサイド・スクリプト言語として利用されており、Webサーバ上で動作し、Webサーバ上でPHPスクリプトの文書が要求されるたびに、そのPHPスクリプトが実行され、結果をウェブブラウザに対して送信する。平易な文法のため初心者でも習得しやすく、また大規模な開発にも多く用いられている。多くのフレームワークやライブラリが存在し、開発の手助けとなっている。
数多くのオープンソースウェブアプリケーションに利用されている一方、しばしば脆弱性の報告がなされ、過去に深刻なセキュリティホールが何度か報告されている。
Ruby
Ruby - Wikipedia
Ruby(ルビー)は、まつもとゆきひろ(通称 Matz)により開発されたオブジェクト指向スクリプト言語であり、スクリプト言語が用いられてきた領域でのオブジェクト指向プログラミングを実現する。
Ruby on Rails - Wikipedia
Ruby on Rails(ルビーオンレイルズ)は、オープンソースのWebアプリケーションフレームワークである。RoRまたは単にRailsと呼ばれる。その名にも示されているようにRubyで書かれている。またModel View Controller(MVC)アーキテクチャに基づいて構築されている。
◇ 記事
- さくらVPS/CentOS 6.4にRailsサーバを構築する手順をまとめました![Ruby] - 酒と泪とRubyとRailsと
- SEP 22ND, 2013
- さくらVPSのCentOS 6.4にRailsサーバを構築するための手順をまとめました。
- Apache + Passengerは安定運用の面ではオススメですが、最近仕事でNginx + Unicornという構成をメインにするようになったので、そちらをメインストリームに変更してみました!アプリ側の対応も必須になるため、移行コストがかかりますが変化を楽しみたいと思います^^
- (2013/09/24 追記) CentOS 6.4対応、Nginxのセットアップを追加
- Unicorn + Nginx で複数の Rails アプリを動かす : あかぎメモ
- 軽量な Rails アプリをいくつか作ったが、都度専用のデプロイ環境を用意するのは効率が悪い。そこで ネームバーチャルで複数の Rails アプリを動かしてみる。Web サーバには Unicorn を使い、Nginx をリバースプロキシとして動作させる。
- 次世代Ruby on RailsサーバーUnicorn(汎用のRackアプリケーションサーバ)を使ってみた | TechRacho
- 2010/07/09
- Railsサーバはたくさんあってややこしいですね!
- 最近さらにUnicornというものが頭角を表してきたようで、Twitterやgithubも使っているようなので使ってみましたので、特徴や使い方などレポートしてみたいと思います。
- RedmineでUnicornサーバー - データサイエンティストのタコ部屋
- 2013年2月21日
- Redmineをインストールする方は、多くの場合、Apache+Passengerか、Apache(リバースプロキシ)+webrickか、webrick単体でブラウザからダイレクトにポート接続というパターンが多いと思います。ここではより高速化ために、NginxとUnicorn(Railsサーバー)構成でRedmineを動かしてみます。
- Redmine を Nginx + Unicorn へ移行 - Tosshi Note
- 2013/06/17
Python
- 詳しくは、こちら→Python
Python - Wikipedia
Python(パイソン)は、オランダ人のグイド・ヴァンロッサムによって開発されたオープンソースのオブジェクト指向スクリプト言語。コメディ番組『空飛ぶモンティ・パイソン』にちなむ。Pythonという英単語は爬虫類のニシキヘビを意味し、Python言語のマスコットやアイコンとして使われることがある。
Web Server Gateway Interface - Wikipedia
Web Server Gateway Interface (WSGI; ウィズギー) は、WebサーバとWebアプリケーション(もしくはWebアプリケーションフレームワーク)を接続するためのインタフェース定義の1つであり、プログラミング言語Pythonにおける標準として使われている。また、WSGIから着想を得て、他の言語にも同様のインタフェースが作られた。
Django - Wikipedia
Django(ジャンゴ)は、Pythonで実装されたWebアプリケーションフレームワーク。 model-view-controller デザインパターンに緩やかに従う。 バンド gypsy jazz のギタリスト ジャンゴ・ラインハルト にちなんで命名された。
Django の第一の目的は、複雑で、データベース主体の Web サイトの構築を簡単にすることである。Django はコンポーネントの再利用性と'pluggability'、素早い開発、DRY (Don't Repeat Yourself)の原則に力点を置いている。ファイルやデータのモデルにいたるまで、Python が一貫して用いられている。
Django はまた、動的に生成され、データモデルの定義を通じて完全に構成することができる、データベース管理 CRUD インターフェイスをオプションで提供する。
IDLE (Python) - Wikipedia
IDLEはPython用の統合開発環境であり、バージョン1.5.2b1以降のPythonに標準で付属している。
IDLEは使い勝手の点から様々な批判を受けている。フォーカス機能がないこと、クリップボードにコピーする機能がないこと、行番号が表示されないこと、インターフェースのデザインなどが批判の的である。ユーザがより高機能のIDEにすぐに移ることから、IDLEは使い捨てのIDEであると揶揄されている。
- 最終更新:2014-03-08 18:55:07