A Day In The Boy's Life -77ページ目

A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS .../山本 陽平
¥2,699
Amazon.co.jp


あけましておめでとうございます。本年もこのブログともどもよろしくお願いいたします。

新年一発目のエントリは、休みの間に読んだ書評から。


この「Webを支える技術」は副題にあるように、RESTの技術を中心としながらHTTPやHTML、AtomなどWebの技術やその技術の歴史的な背景や経緯などを幅広くまとめた教科書的な本でした。

(後述の目次を見ればわかるようにかなり広い範囲の技術が取り扱われています)


プログラマの人には、HTTPの技術を中心としてその書いたコードがどのようにクライアントとやり取りされ動いているか、またRESTやAtomを中心としてそのコードを幅広クライアントに利用してもらうためにはどのような技術やアーキテクチャが存在しているのかという知識を与えてくれます。

また、URIやWebサービスの設計に必要な知識なども盛り込まれていてシステムアーキテクチャの人にも十分に参考になるのではないかなと思います。


小規模なWebサービスではなかなか構築しないAPIや拡張性などをどういった技術や思想で作りこみ、公開していくかってところが書かれていて、「自分もそういったものを作りたい!」って気分にさせてもらいました。

また、プログラミングやインフラ系の構築をしている中で出てくる技術の意味を再度整理して見直すのにもちょうどいい網羅性も持っています。

本書に記載の幅広い技術は、プログラマやインフラエンジニア、システムアーキテクチャなどそれを支える幅広いエンジニア層にもそれぞれ参考になるのではないでしょうか。



目次


第1部 Web概論
第1章 Webとは何か
1.1 すべての基盤であるWeb
1.2 さまざまなWebの用途
1.3 Webを支える技術
1.4 本書の構成

第2章 Webの歴史
2.1 Web以前のインターネット
2.2 Web以前のハイパーメディア
2.3 Web以前の分散システム
2.4 Webの誕生
2.5 Webの標準化
2.6 Web APIをめぐる議論
2.7 すべてがWebへ

第3章 REST - Webのアーキテクチャスタイル -
3.1 アーキテクチャスタイルの重要性
3.2 アーキテクチャスタイルとしてのREST
3.3 リソース
3.4 スタイルを組み合わせてRESTを構成する
3.5 RESTの2つの側面
3.6 RESTの意義

第2部 URI
第4章 URIの仕様
4.1 URIの重要性
4.2 URIの構文
4.3 絶対URIと相対URI
4.4 URIと文字
4.5 URIの長さ制限
4.6 さまざまなスキーム
4.7 URIの実装で気をつけること

第5章 URIの設計
5.1 クールなURIは変わらない
5.2 URIを変わりにくくするためには
5.3 URIのユーザビリティ
5.4 URIを変更したいとき
5.5 URI設計のテクニック
5.6 URIの不透明性
5.7 URIを強く意識する

第3部 HTTP
第6章 HTTPの基本
6.1 HTTPの重要性
6.2 TCP/IPとは何か
6.3 HTTPのバージョン
6.4 クライアントとサーバー
6.5 リクエストとレスポンス
6.6 HTTPのメッセージ
6.7 HTTPのステートレス性
6.8 シンプルなプロトコルであることの強み

第7章 HTTPメソッド
7.1 8つしかないメソッド
7.2 HTTPメソッドとCURD
7.3 GET - リソースの取得
7.4 POST - リソースの作成、追加
7.5 PUT - リソースの更新、作成
7.6 DELETE - リソースの削除
7.7 HEAD - リソースのヘッダの取得
7.8 OPTION - リソースがサポートしているメソッドの取得
7.9 POSTでPUT/DELETEを代用する方法
7.10 条件付リクエスト
7.11 べき等性の安全性
7.12 メソッドの誤用
7.13 Webの成功理由はHTTPメソッドにあり

第8章 ステータスコード
8.1 ステータスコードの重要性
8.2 ステータスラインのおさらい
8.3 ステータスコードの分類と意味
8.4 よく使われるステータスコード
8.5 ステータスコードとエラー処理
8.6 ステータスコードの誤用
8.7 ステータスコードを意識して設計する

第9章 HTTPヘッダ
9.1 HTTPヘッダの重要性
9.2 HTTPヘッダの生い立ち
9.3 日時
9.4 MIMEメディアタイプ
9.5 言語タグ
9.6 コンテントネゴシエーション
9.7 Content-Lengthとチャンク転送
9.8 認証
9.9 キャッシュ
9.10 持続的接続
9.11 その他のHTTPヘッダ
9.12 HTTPヘッダを活用するために

第4部 ハイパーメディアフォーマット
第10章 HTML
10.1 HTMLとは何か
10.2 メディアタイプ
10.3 拡張子
10.4 XMLの基礎知識
10.5 HTMLの構成要素
10.6 リンク
10.7 リンク関係 - リンクの意味を指定する
10.8 ハイパーメディアフォーマットとしてのHTML

第11章 microformats
11.1 シンプルなセマンティックWeb
11.2 セマンティクス(意味論)とは
11.3 RDFとmicroformats
11.4 microformatsの標準化
11.5 microformatsの分類
11.6 microformatsとRDFa
11.7 microformatsの可能性
11.8 リソース表現としてのmicroformats

第12章 Atom
12.1 Atomとは何か
12.2 Atomのリソースモデル
12.3 エントリ - Atomの最小単位
12.4 フィード - エントリの集合
12.5 Atomの拡張
12.6 Atomを活用する

第13章 Atom Publishing Protocol
13.1 Atom Publishing Protocolとは何か
13.2 AtomPubのリソースモデル
13.3 ブログサービスを例に
13.4 メンバリソースの操作
13.5 サービス文章
13.6 AtomPubに向いているWeb API

第14章 JSON
14.1 JSONとは何か
14.2 メディアタイプ
14.3 拡張子
14.4 データ型
14.5 JSONPによるクロスドメイン通信
14.6 ハイパーメディアフォーマットとしてのJSON

第5部 Webサービスの設計
第15章 読み取り専用のWebサービス設計
15.1 リソース設計とは何か
15.2 リソース指向アーキテクチャのアプローチ
15.3 郵便番号検索サービスの設計
15.4 Webサービスで提供するデータを特定する
15.5 データをリソースに分ける
15.6 リソースにURIで名前をつける
15.7 クライアントに提供するリソースの表現を設計する
15.8 リンクとフォームを利用してリソース同士を結びつける
15.9 イベントの標準的なコースを検討する
15.10 エラーについて検討する
15.11 リソース設計のスキル

第16章 書き込み可能なWebサービスの設計
16.1 書き込み可能なWebサービスの難しさ
16.2 書き込み可能な郵便番号サービスの設計
16.3 リソースの作成
16.4 リソースの更新
16.5 リソースの削除
16.6 バッチ処理
16.7 トランザクション
16.8 排他制御
16.9 設計のバランス

第17章 リソースの設計
17.1 リソース指向アーキテクチャのアプローチの落とし穴
17.2 関係モデルからの導出
17.3 オブジェクト指向モデルからの導出
17.4 情報アーキテクチャからの導出
17.5 リソース設計で最も重要なこと

付録A ステータスコード一覧
付録B HTTPヘッダ一覧




本エントリで2010年も最後になる思うので、せっかくブログを書くんだったらブログそのものをネタにして締めくくりたいと思います。

このブログを書き始めて4年半が経過しましたが、今年は月あたりに10エントリ以上書いたのが1月しかない・・・という状況になってしまいましたが、それでも相変わらず自分にとってブログを書くということはライフスタイルの一環というほどになっています。


一方で、ブログ自体を書く人が減ってその存在感自体は薄れつつあるというニュースを見たりして、日常の情景を表現するエントリというのはTwitterやらmixiなどのSNSに持ってかれつつあるのかなって実感したりもしています。



垂直型ブログ、水平型Twitter


それでもブログを書き続ける理由は、自分の場合技術系のネタとかを書き残すって意味もあったりするんですけど、エントリを書く中で自分の知識や考えを整理できるって点が結構大きいかなと思ったりしています。


SNSの流行でコミュニティそのものを築くのはブログなんかでやるよりは、SNSでやった方が多くのつながりを得られます。

ですが、そのつながりから新たな気付きというものを得られる一方で、それが邪魔する場合もあったりして、自分のポジションとして1から10まで吐き出しきるのはブログの方が向いてるのかなって思ったりしてます。

まぁ、それは自己満足の世界だったりもしますし、他人の意見を聞くことで当初の自分の考えが大きくぶれてしまうこともあるんで、そういうのを無しに書ききりたいなって場所として。


別にぶれることは悪くないでしょうし、新たな視点としての気付きを得られることが自分にとって大きなプラスになることは当然あります。

わからないことを手探りで掘り出していくようなことをしたいなら、ブログなんかよりTwitterでやった方がいろんな情報や意見を掘り起こせると思います。

これは、個人の考え方のプロセスの違いでしょうけど、自分はTwitterとかだと2つ3つつぶやいてしまうと結構満足してしまって、それ以上あまり深く考えられなかったりもするので、こうしてエントリを書いてるように、遮断した世界の中で一気にまとめてしまった方が表現しやすかったりするんですよね。



結局誰も吐き出すのが好きなのさ


少しまでは短い文章や写真だけを載せてブログを更新していた人もTwitterやSNSの中の世界へ表現の場所を変えていったりしています。

表現ツールの多様化、ブログに代わるもの 」にも書きましたけど、それは単に多様なサービスによって分散化しているだけで、ブログでやっていたような表現することそのものをやめる人が減ったわけではないと思うわけです。


むしろより手間をかけずに出来るようになって表現への参加者というのは増えているわけで、そこには短文だけども多くのことをつぶやいたり、写真だけを載せたり、様々な人たちと言葉を交わしたりと何らかの形で自分の中にある思いや考えや才能を吐き出したいって思ってる人が多いんだろうなと思います。


一昔前なら得意な職業やメディアを持つ人がその環境を活かしてしか出来ないことが今では末端で誰もが可能な状況になっていて、表現するコストというのは劇的に下がってきているということが見て取れます。

TVに始まり新聞や雑誌など既存のメディアはまだまだネットに比べて強い表現力は持っているものの、その境界線はかなり薄れてきていて、一部の支配者が情報を統制するようなことは現在のネットの世界では到底無理な話です。


そもそもその表現するツールを手に入れた人たちがこれほどあふれ出しているのを見ると誰もが自分の中にあるものを吐き出したいと切望していることがわかったりもしますしね。

自分自身もブログやTwitterを始めて、自分の中にそういうものがあるってわかったことを少し驚いていたりもします。



自分にあったコミュニティはどこだ?


自分の場合、このブログやTwitterが主な表現の場所になってますけど、それは人それぞれ違う場所になっているでしょう。

単にそれ以上広げないのは、新たなコミュニティの場所を一から築いていくのが正直しんどいというのとお腹いっぱいってのがあったりもするんですけど、人それぞれ自分に合ったコミュニティで活動していけばいいんだなと思ったりします。


SNSも複数あったりしますから、いろんなところで始めてみてそこで出会った人たちとのやり取りが自分にとって居心地がいいか悪いかの世界だけかなと。

そういうのって表現しやすいかどうかに繋がるので、結構重要な要素にはなってくるかなと思います。

サービスごとに自分というものを使い分けるというケースもあるでしょうし、求めるコミュニティによって使うサービスを決めるというパターンもあったりするわけです。


何れにせよ自分自身が表現したいというその欲望をかなえる場所というものが自由に選べる時代になってますし、そのサービスの中でも小さなコミュニティがいくつもできて、自分にとって吐き出しやすい場所というものが選べるようになってきています。


ブログ自体もそういったコミュニティを作る手段の一つでしょうし、IT分野や専門知識を活かした活動を行うという自分としてのこの場があったり、その中で関連のある人たちとコミュニケーションをとりたいという理由なんかがこのブログの存続させている理由の1つなんだろなと思ったりしています。




先月末辺りから、Amebaブログでも各記事の下にアメーバなうとmixiチェック、そしてTwitterへの投稿ボタンが標準で設置されるようになりました。

ってことで、自分で作ったブログパーツはほぼお払い箱・・・、とは言うもののせっかくなんでこっちに各ボタンを取り込んで見ることにしました。

実装イメージは、この記事本文とタイトルの間に、はてなブックマークボタン、Twitterへの投稿ボタン、アメーバなうへの投稿ボタン、mixiチェックボタンが表示されているかと思います。



タイトルの下にアメーバなう、mixiチェックボタンを追加する


標準で設置されることとなった、アメーバなうやmixiチェックのボタンを見てみると、


http://stat100.ameba.jp/blog/proxy.html?longurl=記事URL&title=記事タイトル&type=ボタンのタイプ

※ ボタンのタイプは今のところnow(アメーバなう)、mixi(mixiチェック)、tw(Twitter)となっています。


という風になっていて、proxy.htmlでまとめて処理を受け取った後にtypeに応じて遷移先を変えているようでした。

なので、今までに書いた各記事のURLとタイトルを自動取得して埋め込めばいけそうな感じですね。

ベースとしているのは、前回書いた「Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ 」のソースになってます。


下記のソースを管理ページ内の「ブログを書く」>「サイドバーの設定」>「フリープラグイン」の編集から貼り付ければ動作します。


<script>
$(document).ready(function(){
    var page_url = location.href;
    if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
        var entries = $(".newentrytitle a");
        var classname = ".updatetime";
        var flg = 0;
    } else {
        var entries = $(".foot a:contains('記事URL')");
        var classname = "div.entry .theme";
        var flg = 1;
    }
    for (i = 0; i < entries.length; i++) {
        var url = entries[i];
        if (flg == 0) {
            title = entries.eq(i).text();
        } else {
            title = $("div.entry h3.title").eq(i).text();
        }
        var hatena_btn = '<a href="http://b.hatena.ne.jp/entry/' + url + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + title + '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><sc' + 'ript type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></sc' + 'ript>';

        var twitter_btn = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="YourTwitterAccount" data-text="' + title + ' | Your Blog Title" data-url="' + url + '">Tweet</a><sc' + 'ript type="text/javascript" src="http://platform.twitter.com/widgets.js"></sc' + 'ript>';

        var ameba_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&title=' + title + '&type=now"><img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_now.gif" alt="なうで紹介"></a>';

        var mixi_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&type=mixi"><img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_mixi.png" alt="mixiチェック"></a>';

        $(classname).eq(i).append('&nbsp;&nbsp;&nbsp;' + hatena_btn + '&nbsp;' + twitter_btn + '&nbsp;' + ameba_btn + '&nbsp;' + mixi_btn);
    }
});
</script>


Twitterへの投稿ボタンは、「Amebloに設置していたツイートボタンをTwitter公式のものに変えました 」で書いた公式のものを利用しているため、アメーバ標準のものは使ってません。


ちなみにこのスクリプトは、記事下に標準で表示される共有ボタンを消しても動作します。

消し方は、管理画面の「ブログを書く」>「アメブロの設定」>(ページ中段にある)「共有ボタンの表示」を「表示しない」にチェックすることで変更できます。


あと、Twitterへの投稿ボタン(ソース内のvar twitter_btn~の箇所)は以前に書いたものと同様に、


data-via="YourTwitterAccount" data-text="' + title + ' | Your Blog Title"

の部分を、それぞれ自分のTwitterアカウント名、ブログタイトル名に変更してください。