人がプログラムを組んだりWebアプリを作ってみたりできるまでに、どういう順番で知識を得ていけばいいかに興味がありますよ。 要員を育てて手伝わせたいから。

Webプログラミングを習う過程を考えてみる話

静的コンテンツ編

HTMLを書く練習をしながら基礎知識を得る

なぜHTML

  • Webアプリ書くのに役に立つ
  • ビジュアルがそこそこ楽しく、成果がわかりやすい
  • 筆者がはじめて触ったのは「BASIC」ですが、そんな時代でもないかと
    • HTMLとプログラム言語は次元が違うんだけど、まあ。

HTMLを書いてみる

  • 「ホームページビルダー」がなくたって、案外なんとかなりますよ
  • 「ページのソースを表示」って見たことありますか。これがHTML
    • 何かと都合がいいので、この際「Firefox」を導入しませんか
  • 「メモ帳」で書き始められるんですよ
    • Microsoft Wordとかで書いたらだめですよ。通常、あれはテキストファイルじゃないファイルを作ります
    • テキストファイルか、テキストファイルじゃないか?これが見分けられるかは重要
  • 全角文字、半角文字って分かりますか。今後ははっきり区別できるようになってね
  • ファイルの拡張子って知ってますか
    • OSの設定で拡張子を表示「する」習慣をつけてほしい
    • まだMIMEの話はしない
  • 最初はある程度の雛形から始めてよいです
    • 既存のページの修正とかから
  • タグを開く、タグを閉じる、という感覚を知ってね。ボールド文字の例あたりから
  • タグに属性をくっつける、という感覚。文字の色付けあたりから
    • fontタグはこのごろ主流から外れているが、わかりやすいので一応チェックしておく
  • セーブ、リロード、セーブ、リロード、という製作サイクル
    • マウスをあまり使わないようにすると、指が長持ちしてよいです
    • Ctrl+S でセーブ、ALT+TAB で切り替え、F5 でリロード…
  • 文字のエンコーディングって知ってますか
    • 文字化けについての知識を整理しておきましょう
      • 文字エンコーディングの知識をこの際整理しておきたいですが、さしあたりシフトJISとEUCについて
      • エンコーディングと文字セットの違いはハッキリさせるべき
    • ついでに改行コードの話も少しだけ
    • ついでに、機種依存文字の話の少しだけ
  • 「メモ帳」の機能が不満になったら、もっと便利なエディタを探すチャンスですよ
    • EUCエンコードも扱いたい
    • UNIX的改行も扱いたい
    • 検索や置換を便利に行いたい
    • でもエディタに凝りすぎるのも本末転倒なのでほどほどに
  • HTMLのいろいろ練習
    • 色とサイズを変化させる
      • 色名で指定、細かい数字で指定
    • 表をつくる(tableタグ)
    • リストをつくる(olタグ、ulタグ)
    • フォントを指定するという感覚は少ない。見るのはWindowsだけと限らないから
    • やや高度だけど使用頻度の高い、表の入れ子
      • レイアウトに表構造を使うのを嫌う向きもあるが、今はさしあたり練習なので

ちょっと書けるようになったら、画像でも埋め込んでみる

  • 複数ファイルでひとつのページ、という例のはじめ
  • IMGタグ
  • 少しわき道。画像ファイルの種類と特徴、画像関係のツール
    • GIF画像、JPEG画像、PNG画像、その他形式の特徴と使いどころ
  • HTMLでも画像でもない、その他の色々なファイル
    • 埋め込めないときは、「ダウンロード」になる
  • 勉強を進める方向が「Webアプリ」なら、デザインはまずはほどほどに
    • HTMLだけで色やサイズをガリガリ変更すると、後々困ることもある
  • 画像がすごく重い気がする?
    • ファイルサイズを縮めるのと表示サイズを縮めるのは別。結構ヒンシュクを買うミスだよ
  • 余談:CSS
    • 一括で各要素の見栄えを変える方法
    • HTMLをシンプルにできる
    • ほどほどに

ページ間の移動(ハイパーリンク)ができることも確認しておく

  • Aタグ
    • 最初はディレクトリ間を移動しない、いちばん簡単な相対リンク

ここらへんで、WebページをGUIで生成するソフトウェアのことも考えてみる

  • ある程度わかったあとなら、こういうツールで楽することを考慮してもよい
  • WYSIWYGなもの、WYSIWYGでないもの
    • What You See is What You Get
  • 普段は便利、ときどきおせっかい
  • もの凄いHTMLを吐き出すソフトに注意

やや余談・XMLの話

  • XMLとHTMLは似ている気がする
    • HTMLはXMLほど厳密じゃなくても許される。でも一応意識していたほうがいい
    • 共通の祖先であるSGMLが云々、という薀蓄は、習得に関係ないので省略

サーバーに置いてみて分かることいろいろ

最寄のウェブサーバーに「アップ」してみましょう

  • さわれるサーバー環境があればよいが、適当な無料Webサービスでもよい
    • 無料サービスだと広告が挟まることがあるが、さしあたり無視しながら
  • 普段やってるのはダウンロード、ここでやるのはアップロード
    • HTTPにアップロード機能がないわけじゃないけど、まずはありふれたFTPを
  • コマンドラインのFTPを少しだけ試して、今後は無理せずツールを使う
  • 「世界デビュー」なので、内容は慎重に

ページどうしのリンクについて知識を確かに

  • Aタグでページ間の移動。これでいかにもWebっぽい「ネットサーフィン(死語)」になった
  • 相対URLへのリンク
    • アップロードする前にリンクをテストできる
    • 掘り進む相対リンク、さかのぼる相対リンク
  • ルート相対へのリンク
    • 共通に使う画像とか
  • 絶対URLへのリンク
  • リンクの種類の使い分け基準
    • 間違えると保守が面倒になるときがあるよ

URLの文字列をよく見てみる

  • プロトコル部
  • ホスト部
    • DNSのしくみなどを説明したい誘惑に駆られるが、今は割愛
  • パス部
  • パス部以下。アンカーやらパラメータやら
    • アンカーは、ページの途中にリンクするためのもの

「フォーム」の取り扱いはまだまだあとの話

  • でもgoogleの検索窓なんかはもう設置できる。すごいことをした気分になれるので、やってみる

フレーム構造を持つページについて

  • 一応やってみる
    • フレーム定義するファイルと、各フレームの中身にファイルを準備
  • そろそろ時代遅れ。次世代のHTML仕様では省かれるらしいよ
    • ブックマークのしにくい/できないページになると思わない?
      • ブラウザのアドレス欄は変化していない。フレーム親だけを表示するから
    • 検索エンジン経由で、フレームの片側だけに飛び込んできたら変じゃない?
  • インナーフレームは、まあ考えてもよい
  • 全部のページに共通部分を表示したいときに、確かに便利ではあった
    • 後にやる自動生成とかがこれらを解決するだろう

Webサーバーが何を考えて仕事しているのかを想像してみる

  • Webサーバーとクライアントの役割を整理する
    • クライアントから「見せろ」って言われる
    • サーバーは、何を渡したらいいかを考えて…
    • はいこれですよ
    • HTMLを「解読」して見た目を整えるのは、サーバーじゃなくてクライアントの役割
    • 「プロトコル」を眺めておく。HTTPのPは「プロトコル」。
  • ついでに、Webプロキシー(キャッシュサーバー)についてのイメージも知っておく

さしあたりの到達点

  • 一昔前の「ホームページ」を設置するくらいの知識は、ここまでで得られたはず
  • 今はブログだのSNSだのを使うだろうから、知るべきことも減ったけどね(老人)

スクリプト言語編

  • C言語とかを使う気はないからね
  • 便利な「プログラム言語」が増えています。基本的には、楽できる言語を選びましょう
    • 記述量が少なくて楽
    • 参考情報がたくさん得られて楽
    • 教えてくれる人が近くにいて楽
    • 間違いを発見するのが楽
      • どんな名人だろうが、エラーを繰り返してプログラムを組みます
  • perl? Java? ruby? php? python? VB+ASP?
    • どんな言語を選んでも、結局は同じことができます
    • 宗教戦争に首突っ込むこたあありません
  • 最初にpythonをやってみましょう(Webの動的生成編では、たぶんphpから入りますが)
    • (codepadなんかを使いながら、たくさん演習をしてみる)
    • (課題もたくさんやってみる)
      • 課題は、python challengeみたいな形式にしてみると面白いのかも知れない。問題解決したぞという実感がある
        • 最初はcodepadで足りるくらいのネタ
        • 日本語や外部ファイルを扱い始めると、ローカルPCにpythonインストールしてもらう必要も出てくる
        • 処理を関数にまとめて引数で済ませたいと思えてきたら上出来
    • (ここで、実際に役に立つようなツールをひとつこしらえてみる)
  • プログラミング技術の向上に終わりはない。「必要に応じて学べる」というレベルに達したらここでは完成
    • でも、次にプログラムを読む人のことを考えるのは強調しておきたい
      • 人のプログラムを読むのは、たいていの場合高ストレスな仕事
      • 自分以外も楽させるのでなくては意味がない
      • コメントとかドキュメントとか
  • ところで、pythonでHTMLを生成して出力してみましょうか
    • 簡単なことならもうできるようになっている、予定
      • <ul><li>をうまくくっつけてリスト生成とか
      • <table><tr><td> をうまくくっつけてテーブル生成とか
      • 自動で文字の色つけとか
    • これを今PC上でやるんじゃなくてサーバー上でやると、いわゆる動的生成というものになるよ
    • CGIにこだわらなくても、スクリプトでHTMLをあらかじめ作ってしまうというやり方でも充分便利になるよ

動的コンテンツ編

  • php
    • 一見今までのHTMLなんだけど、途中がちょっとだけ変化してくれるやつ
    • 共通ヘッダ・フッタなんかをインクルードしてみる
    • これだけでも結構動的生成のご利益を得られる
  • その他CGI
    • 今度は、一部だけじゃなくて全部を動的に出力
      • ファイルをそのままクライアントに渡すんじゃなくて、ファイル(スクリプト)の「実行結果」を渡す!
    • こうなるとphpはそんなにお手軽とは限らない。phpでがんばってもいいし、他の言語に「ギアチェンジ」する選択もアリ
    • かつてperlでおびただしい量のCGIが書かれた。
      • 作者はもうperl好きじゃないけど、リスペクトとしていくつか書いてみましょうか。既存のソースをいじる機会もまだまだあるでしょうし
      • でも本講では、今後主にpythonで書くことにします
    • レスポンスヘッダは、今は「おまじない」と割り切る
      • でもここがMIMEメッセージを説明するチャンスかな
    • Hello, World!
  • 動的生成だけどphpでもCGIでもないもの、についてちょっとだけ知っておく
    • Javaサーブレット/Ruby on Rails/Django/Zope&Plone/
    • Webアプリを作るのは、本質的に面倒な仕事。どんな技術も、「楽したい」という情熱の産物であることを理解する
  • 静的生成と動的生成では、ウェブサーバー側の気持ちがどう異なるかを想像してみる
  • アップロードしないでCGIの動作を試したい
    • MicroApacheとかを使うと便利です。XAMPPなんかでもいいけど、今の用途には機能豊富すぎ
    • もっと楽できるのは、サーバーに直接ログインして、viか何かで直接いじりながら試すこと
  • 環境変数と標準入力から「指示」を受け取る
    • ファイル実行の「オカズ」情報。パラメータって呼ぶのが普通か
    • 動的生成とは言っても、パラメータが与えられなければ実際の役には立ちにくい
    • 「?」以降の指示を受け取って、これに対応した動作をさせる
    • お決まりの書き方を真似てしまえば早い。今は「環境変数」も「標準入力」も正確にわからなくていいや
  • リンクのURLにもパラメータを混ぜる
  • フォームを書いて、ボタンからCGIを動作させてみる
    • GETとPOSTの違いをすこしばかり
  • Cookieはもうちょっとあとで。
    • でもこれの概要くらいは説明しておいて悪くない
    • 「セッション」を実現するために使うのがほとんど
    • 知らないうちに、Webの利用が追跡されていることもあるよ。普段どんなCookieを食わされているか見てみる?
  • これ以降、どちらに発展させる?
    • 動的生成ページの可能性
      • サーバーができる仕事は、すべてCGI等を通してできることになる
      • 危険も大きいけど
    • Webアプリからのメール送信だの、
    • HTTPベースのファイルアップローダ(マルチパート送信)だの、
    • 認証とアクセス制限(IP,個別ユーザー)だの、
    • Javascript等のクライアント側スクリプトだの、
      • JQueryなんかを使う楽しいUIだの、
    • テンプレート化による表示とロジックの分離だの、
    • ファイルやDBの扱いだの、
    • プログラムの定期的な自動実行(いわゆる夜間バッチ)だの、
    • WebAPIを使うだの、
    • 開発手法(テストファースト、バージョン管理、UML)だの、
    • フレームワーク開発の必然性だの、
    • Google App Engineだの、
    • 負荷対策だの、
    • google等検索エンジンの振る舞いの理解だの、
    • 情報漏えい対策だの、
    • SSHを使った直接操作だの、
    • SSLの何が安全で何が安全でないのかの説明だの、
      • サーバー証明書の理解だの、
    • いくつも浮かぶといえば浮かぶけれど
  • いろいろな発展先があるけど、とりあえず知っておくとよいのは、ちゃんとしてWebアプリを開発するというのは相当な勉強と忍耐がいるということ。魔法じゃないよ。

作成物のライフサイクル編

  • プログラムやシステムはシンプルに保つほどよい
    • シンプルを達成するには、技術的には熟練が必要であることを理解する
    • 使う側の業務内容もこの際シンプルにできる、ときさえある
  • 「リファクタリング」という考え方を知る
    • 一度つくっちゃったものを未練がましく抱え込まない
    • 思い切ってバラして作り直すと、見通しがよくなることがある
    • 必要じゃないのについ作り直したくなる、というワナもあるけど
      • つくるよりもメンテが一般につまらなくて大変だから。
    • 動作テストを効率化するのもリファクタリングの要素だけど、そんなに複雑なものはまだ…
  • いらなくなったシステム、手間が増えすぎたシステム、理解できなくなったシステムは捨てなければならない
  • 構築と廃棄の技術が継承されなければならない
  • 「車輪の再発明」をしない。わざわざ作らなくてよいものはたくさんあるよ
    • 既存の色々な汎用型ソフトウェア/ウェブサービス
      • Wikiタイプ
      • ブログタイプ
      • ソーシャルブックマークタイプ
    • Webアプリ製作の知識は、これらの評価や設置やトラブルシュートに役に立つので、無駄にはならないよ
 
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki