Web開発の現在

ホーム > Webアプリの記事

最近ホームページという言葉を聞かなくなったような気がします。

代わりにサイトとかWebサイトとかいう、なんだかカッコ良い言葉が使われるようになったみたいです。だからといってホームページという言葉を使う事を恥ずかしがる必要はありません。かつてこのWebとやらが、ホームページとか「ほめぱげ」とか呼ばれていた時代からこの分野を生業としているのだぞ?というアピールにもなるかもしれないですからね。

でも、「ほめぱげ」とか知らない若い頭脳に「ホームぺージとか言っちゃうような化石みたいな人に任せるのは不安だなあ」とか思われたら困る事があるかもしれないので、ここでコッソリと、今の時代にあったワードを勉強しちゃいましょう。

ワールドワイドウェブ

まず、このインターネットに接続してサーバ上のハイパーテキストシステムを観覧できる仕組みの事を、World Wide Web(ワールドワイドウェブ)と呼び、いまどきは略してWeb(ウェブ)とか呼びます。

そして、そのWebという仕組みの中で、観覧できるいわゆるホームページの事を、Webページと呼び、そのWebページの固まりの事を、Webサイト(直訳してWebの場所)とかとか呼びます。

テキストや画像を静的に読む事だけを目的としたものをWebサイトとかホームページとし、ユーザーの動作に対して動的に変化を返すような高い機能をもったWebサイトを、Webアプリケーション(略してWebアプリ)と呼ぶ時代のようです。

PikodonCompanyはホームページというよりも、仕組みのあるアプリケーションを専門とするため、このソリューションノートの4項目目のカテゴリー名はWebアプリケーションとしました。

ハイパーテキストシステム

Webとはインターネットに接続してサーバ上のハイパーテキストシステムを観覧できる仕組みと説明しましたが、所謂、文字の羅列の事をテキストと呼びます。そこに画像が含まれていたとしても、やはりその1枚の書類をテキストと呼びます。そのテキストを何枚も用意して、それぞれをリンクで繋げた集合体の事を、ハイパーテキストと呼びます。これがWebサイトの定義です。

そのハイパーテキストを作るための共通の記述の言語をハイパーテキスト・マークアップ・ランゲージ。略してHTML(HyperText Markup Language)と呼びます。HTMLという共通の言語で書けば、世界中のWebサイトとつなぎ合わせる事ができます。英語以上に大きな共通言語です。

このHTMLは、カスケーディング・スタイル・シート、略してCSS(Cascading Style Sheets)と呼ばれる文書装飾の技術を組み合わせて綺麗に整形して作ります。

ここまでがWebページの基本的な定義です。

クライアントサイドスクリプト

テキストに装飾記号を加えただけのHTMLも、今の時代ではプログラミング言語と呼んで間違いはないようです。

でも、プログラミングといえば、計算式や関数などを駆使して、ユーザーのリアクションの変化に応じる結果を出力する仕組みや、自己判断して自動計算する仕組みを論理的に作りこむ作業というイメージがあります。

HTMLやCSSでは、こういった論理的な複雑な処理や、計算式を思い通りに作り上げる事はできません。そこでクライアントサイドスクリプトと呼ばれる言語を使います。

JavaScript

JavaScriptはクライアントサイドスクリプトの代表で、今の時代なら唯一と言って良いほどの存在になりました。

JavaScriptが登場したのは1995年の事だそうですが、当時、JavaScriptなんて近いうちに滅ぶだろうと思ってFlashを覚えました。しかし、Flashは滅んでJavaScriptが生き残りました。

そもそも、一企業による技術に過ぎないFlashには寿命があって、プログラミング言語としてのJavaScriptには未来があるのはわかりますが、登場した頃はJavaScriptが最大限に力を発揮できるほどコンピューターのスペックは高くなく、何よりも突貫工事のような仕様のJavaScriptはかなり複雑で、安定した仕組みを組める人もあまり見かけませんでした。

jQuery

そこで2006年に登場したのがjQueryというライブラリです。JavaScriptという難解な(厄介な)言語の面倒くさい部分を、まとめて処理してくれるプログラムをパッケージしたものです。

jQueryは面倒くさい事を書きまとめただけのメモ帳みたいなものですが、これを使う事で、開発者は環境を選ばず、比較的安定して動くJavaScriptをシンプルで短い記述だけで作れるようになりました。

jQueryはかなり多くのバージョンがあり、大きくわけて1.x系、2.x系、3.x系がリリースされています。

1.x系は、2006年からある初期バージョンで、最終版は1.12.4です。全てのブラウザに対応しています。
2.x系は、2013年からあるバージョンで、IE8以前のブラウザには非対応です。最終版は2.2.4です。
3.x系は、対応ブラウザは同じですが、根本的な基盤から作り直されて高速化しています。
1.x系から2.x系に変わった時、多くの仕様変更がありました。新しいからと言って、納期のシビアな案件で、2.x系や、3.x系を使うと地獄を見るかもしれません。

バージョンがあがるにつれて処理速度があがっていますが、どのバージョンを使っても案外普通に動きます。

10年以上昔のv1.3.2とか使っても問題ありません。人気があるのはv1.8.2やv1.9.1あたりです。1.3から1.4、1.7から1.8、1.8から1.9で大きく記述方法が変わっていますので、jQuery以外のプラグインを追加する場合、バージョン管理は十分に気を付けたほうが良いでしょう。

もし、jQuery以外のプラグインを必要とせず、納期に追われる心配もない場合、3.xの最新バージョンを使ってみてください。複雑であれば複雑であるほど処理が速く、記述方法もまとまっていて、快適です。

クライアントサイドとは?

JavaScriptはクライアントサイドスクリプトの代表とか軽く書きましたが、そもそもクライアントサイドってどういう意味かを説明しておきます。

クライアントサイドとは、あなたのパソコンやスマホの事です。インターネットに繋がなくても動くスクリプトをクライアントサイドスクリプトと言います。「え?おかしい。JavaScriptって、インターネットのホームページにあるものでしょ?」という疑問が沸きますが、インターネットを通じてデータをダウンロードして、あなたのPCやスマホで動いているスクリプトです。

例えば、怪しいホームページを見た時に、JavaScriptが体内に侵入するようにコッソリとダウンロードされ、あなたのスマホで悪い処理をこっそり裏で実行し、個人情報を引き出したり、スマホを破壊しているかもしれません。

最新のブラウザでは、JavaScriptを使って悪意のあるプログラムを実行できないように、公開サーバ上でないと実行しないようにしたり、不正なプログラムが実行できないような工夫が施されていますが、まだ安心できる世の中ではありません。

クライアントサイドスクリプトは、動きのある演出や、音を鳴らしたり、ゲームのような複雑な処理をしたり、激しい動きをつけたりする事ができます。

サーバサイドスクリプト

サーバサイドスクリプトとは、サーバ側で動くプログラムです。ユーザーがボタンを押すなどすると、サーバ上のデータベースを検索し結果をHTMLとして出力したり、サーバ上でなんらかの計算処理を行い、結果を返す役割を果たします。

サーバサイドスクリプトは、サーバ上でのデータ処理を目的としていますのが、アクションゲームのようなものは作れません。データ入力と出力、そして計算のみを行います。

役割分担としては、例えばクライアントサイドスクリプトで激しいアクションゲームを作り、そのハイスコアをサーバサイドスクリプトを通してサーバに記録する仕組みを作ります。

JavaScript一強のクライアントスクリプトに対して、サーバサイドスクリプトには現役で多くの種類が使われており、それぞれ得意不得意があります。特にポピュラーなものからいくつか紹介します。

PHP

Webに関わる仕事をしている方なら、誰もが耳にした事があるオープンソースの言語です。MySQLなどのフリーのデータベースアクセスの処理に優れており、HTMLと混ぜ込んで書ける手軽さなどから、Web制作初心者の方でもわかった気になってHTMLの隙間に書き込めてしまう言語です。

わかった気になって書いて、動いてしまえば、サーバサイドスクリプトはユーザー環境に依存しないので、それで充分です。HTMLと合わせて是非習得したい言語です。

PHP言語の危険性は、URLを無防備に露呈したままにすると、外部から悪意のある実行命令を受けやすいという事です。例えば、いとも簡単にメール送信処理を書けてしまうだけに、メール送信PHPをそのまま放置しておくと、外部から不正にメール送信を実行されたりしてしまいます。

PHPだけが特に危険というわけではなく、他のサーバサイドスクリプトも同様ですが、PHPは見た目で理解しやすくて、使いまわしもしやすいので、つい脇が甘いまま公開してしまいがちなのです。

PHPは比較的積極的にアップデートが行われています。古くからPHPを扱っている場合、今でもPHP5で動かしているWebサイトとかありますが、古いPHPはサポートが終了しており、後で発見されたセキュリティホールを放置したままになっている事も多いです。

PHPを扱ったCMSなどもどんどん新しいバージョンに切り替えています。基本的なデータベースアクセス部分や、よく使う基本関数などの仕様変更もありますので、PHPを新しいバージョンに合わせて書き直すのは案外面倒ですが、古いバージョンのPHPでは、何かが動かなくなる等の不具合が発生するのは時間の問題です。早めに最新バージョンに対応する事をお勧めします。

Python

台風?だとかフェイソーン?とか?読み方わからない人多いようです。正しくはパイソンと読みます。今最も熱い言語かと思います。人気の理由は、機械学習とかディープラーニングといった人工知能(AI)の開発に向いているためです。

機械学習やディープラーニングは、気が遠くなるような多次元配列や、ベクトルや行列演算の繰り返しです。それを連続して何度も行ったり、条件を少しずつ変えて、毎秒、数億回、繰り返し、それを数日間繰り返す。といったような極端な処理を続けます。

JavaScriptでそんな計算させようものならブラウザクラッシュしますし、PCでやるようなものではないです。これを高速なGPUを内蔵した高性能なコンピューターで処理させるようなプログラムを組み、人工知能の学習を進めます。

人工知能に関する情報共有はだいぶ進んでいて、「この計算式で動かせば良い」といった、読み方もわからないような計算式が既に情報として出回っていますが、この多次元配列やベクトル、行列演算の計算式は、かなり難解なもので、計算式はなんとか読めても、実行するアルゴリズムやプログラムまで考えるのは相当大変な事です。

そんな難解な行列やベクトルに関する計算式をそのままプログラム言語として使えてしまうような環境を持っているのがPythonで、人工知能のための計算ライブラリや、人工知能以外にも様々な科学計算用のライブラリや情報などが、世界中で共有されています。

そして、学校教育でもPythonを採用するそうです。

Java(JSP)

JavaはSun Microsystems社が開発した言語です。OSプラットフォームに依存しない言語なので人気が高く、Windows、mac、Linux、android、iPhoneなど、殆ど全ての環境向けにネイティブ開発する事ができます。

そのため、プログラマーと呼ばれる専門家が言語取得している事が多く、複雑なシステムを開発する場合に活用しやすい言語です。サーバ上のコンピュータで動作させ、それをHTMLなどに出力させて使います。PHP等のようにHTML内に埋め込む事ができるようになったものがJSPです。

Ruby

日本発のプログラミング言語です。日本発なので日本語への対応や日本語のドキュメントが充実しています。そしてとても人気があります。他のプログラミング言語で面倒なルールがみんな共存しているため、例えばカッコをつけても付けなくても、記号をつけてもつけなくても、動きます。

ルールが柔軟なので、複数のプログラマーによる共同作業に適しています。Rubyが好きな人が書くソースコードは短くてスッキリしていて綺麗ですが、他の言語から共同作業に参加した人は、それぞれの癖のある書き方があるかもしれません。

その仕組み故に、昔は他の言語に比べて処理が重いというデメリットがありましたが、最近は気になるほどではなくなりました。

Perl

昔からよく使われている言語です。「ほめぱげ」時代は、CGIと呼ばれるものの代表で、殆ど唯一のサーバサイドスプリプトであるかのように使われていました。他のサーバサイド言語に比べて複雑で難解、そして、古臭いと敬遠されてきているように思います。

ネットワークエンジニアでPerlを知らない人はいませんが、言語習得度に差が出る言語で、共同作業のバランスが崩す可能性もあるため、あまり積極的に選ばれないようになった気がします。

ASP

Microsoft社によって開発された。Windowsサーバで動く言語です。Windowsアプリケーションの開発者であれば、馴染みのある文法で、もしサーバがWindowsで、Windows系の開発者が多い環境でしたら、ASPを選択するのも良いでしょう。

サーバとクライアントの合わせ技

Ajax

ゲームのように素早い描画処理が得意なJavaScript(クライアントサイド)は、ユーザーのリアクションを待たずに連続や自動でサーバサイドスクリプトにアクセスする事ができます。

いちいちボタンを押して、クルクルパッ。クルクルパッ。とページ表示するのではなく、バックグラウンドでサーバと交信し、シームレスに連続してデータがバラバラと表示されていくようなWebアプリを見た事があるかと思います。TwitterやFacebook、最近はWordPressのグーテンベルクなどでも採用されています。

こういったJavaScriptとサーバサイドスクリプトの組み合わせは、JavaScriptのAjaxという技術で実現しています。両方を組み合わせる事で、よりWebアプリらしいサイトを作る事ができます。

API

サーバサイドスクリプトはPHPに限らず、Windowsで動くプログラム言語であったり、Linuxで動くJavaであったり、サーバ側で高速計算させるPythonで作った人口知能プログラムであったりします。

そういったプログラムは、企業内の最前線の知識を持った数百人のプログラマーが開発している事もありますし、世界中の数百万人のプログラマーが遠隔で協力して生み出しているかもしれません。

そのプログラムは、国防レベルの大規模システムや、人工衛星などを制御しているプログラムと連結されているかもしれませんし、どこかの機密機関で高度に発達した人工知能かもしれません。

つまり、サーバサイドでは技術的に無限の可能性があり、その先でどんな高度で最先端な技術開発が行われているかわかりません。

その技術に外部からアクセスして、そこから提供される情報を使うデータ形式や規約を、API(Application Programming Interface)と言います。

APIを活用すれば、通常のインターネット技術では考えられないような高度な仕組みを扱い、それをブラウザ上で実現する事ができます。一般的に使われる有名なAPIはJavaScriptに対応していますが、機密情報に関わるようなAPIは使用条件や環境が限られています。

次はスマホアプリの作り方について説明します。