ホームページやBlogが生まれ変わる お手軽Ajaxパーツ集

[表紙]ホームページやBlogが生まれ変わる お手軽Ajaxパーツ集

紙版発売

B5変形判/272ページ

定価2,728円(本体2,480円+税10%)

ISBN 978-4-7741-3183-2

ただいま弊社在庫はございません。

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

Ajaxを使うと,さまざまなWebサービス等から動的にデータを取り込んで,表示することができます。例えば,「Amazonの売れ筋商品の情報を表示」「Yahooオークションに自分が出品している商品の情報を表示」といったものです。ただ,Ajaxを利用する際,プログラミングの知識が必要になるので,敷居が高いです。

本書は「自分のサイトにAjaxを取り入れたいが,自分には難しくてできない」という方のために,プログラミングの知識がなくても,自分のサイトにAjaxを取り入れられるような方法を紹介するものです。

こんな方におすすめ

  • 自分のWebページ上で、人とは違ったカスタマイズがしたい人
  • 自分のWebページにオリジナルの機能を追加したい人
  • プログラミングの知識があまりない、Webページいじりが好きな一般ユーザ

目次

第1章 Ajaxパーツの基礎

  • 1.1 Ajaxの概要
    • 他のサイトから情報を得て表示するには?
    • Ajaxで動的にWebページを書き換える
    • Ajaxの難しさ
    • Ajaxパーツを利用して手軽に
  • 1.2 Ajaxパーツ関連のファイルをセットアップする
    • サーバー側のプログラムのダウンロードとインストール
    • configディレクトリのアクセスの確認
    • サンプルファイルのダウンロード
  • 1.3 Ajaxパーツの基本的な使い方
    • 取り上げる例
    • 作業(1):prototype.jsとprototype_add.jsを読み込む
    • 作業(2):AjaxパーツのJavaScriptを組み込む
    • 作業(3):通信結果を表示する部分を入れる
    • 作業(4):Ajaxの処理を行う部分を入れる
  • 1.4 Movable Type 3.3のブログでAjaxパーツを使う
    • 作業(1):メインページのテンプレートにprototype.js等を組み込む
    • 作業(2):AjaxパーツのJavaScriptを組み込む
    • 作業(3):各アーカイブ・テンプレートにprorotype.js等を組み込む
    • 作業(4):通信結果を表示する部分をサイドバーに入れる
    • 作業(5):Ajaxの処理を行う部分を入れる
    • 改良テキストフィルターをインストールする
    • サンプルファイル
  • 1.5 Movable Type 4のブログでAjaxパーツを使う
    • 作業(1):「ヘッダー」のテンプレートモジュールにprototype.js等を組み込む
    • 作業(2):AjaxパーツのJavaScriptを組み込む
    • 作業(3):通信結果を表示する部分を「サイドバー」のテンプレートモジュールに入れる
    • 作業(4):Ajaxの処理を行う部分を入れる
    • 作業(5):特定の種類のページにのみAjaxパーツを入れる
    • 改良テキストフィルターをインストールする
    • サンプルファイル
  • 1.6 WordPressのブログでAjaxパーツを使う
    • 作業(1):header.phpにprototype.js等を組み込む
    • 作業(2):AjaxパーツのJavaScriptを組み込む
    • 作業(3):sidebar.phpに通信結果を表示する部分を入れる
    • 作業(4):Ajaxの処理を行う部分を入れる
    • 作業(5):記事にAjaxパーツを入れるための準備
    • header.phpとsidebar.phpのサンプルファイル
  • 1.7 Serene BachのブログでAjaxパーツを使う
    • 作業(1):ベースHTMLテンプレートにprototype.js等を組み込む
    • 作業(2):AjaxパーツのJavaScriptを組み込む
    • 作業(3):サイドバー部分に通信結果を表示する部分を入れる
    • 作業(4):Ajaxの処理を行う部分を入れる
    • 作業(5):記事にAjaxパーツを入れるための準備
    • 複数のテンプレートを使う場合
    • サンプルファイル

第2章 テンプレートのカスタマイズ方法の基本

  • 2.1 テンプレートのカスタマイズの基本
    • テンプレートエンジンの「Smarty」を利用
    • テンプレートを書き変えてみる
    • 複数のテンプレートを使い分ける
  • 2.2 テンプレートの基本的な記法
    • Smartyのテンプレートの構造
    • 変数
    • テンプレート関数
    • ブロック関数
    • 修飾子
    • Smarty標準の関数/修飾子とAjaxパーツ専用の関数/修飾子
  • 2.3 よく使う関数
    • 条件によって出力する内容を変えるif関数
    • 数をカウントして出力するcounter関数
    • リストから値を順に出力するcycle関数
    • テンプレートの中で変数を設定するassign関数
    • テンプレートの出力を変数に保存するcapture関数
    • 不要な空白を取り除くstrip関数
    • 他のテンプレートの内容を取り込むinclude関数
    • テンプレートの中で「{」と「}」の文字を使うldelim/rdelim/literal関数
    • 日付が新しいかどうかを判断するdate_is_new関数
  • 2.4 よく使う修飾子
    • 日付の書式を指定するdate_format修飾子
    • 数値の書式を指定するstring_format修飾子/number_format修飾子
    • 改行を「<br />」に置換するnl2br修飾子
    • HTMLのタグを除去するstrip_tags修飾子
    • 各種のエンコード/エスケープ処理を行うescape修飾子
    • 大文字/小文字の変換を行うupper/lower/capitalize修飾子
    • 空白や改行を取り除くstrip修飾子
    • 長い文字列の先頭部分を得るmb_truncate修飾子
    • 文字列を置換するreplace/regex_replace修飾子

第3章 自分サイトに関する情報を表示する

  • 3.1 Google PageRankを表示する
    • Google PageRank表示Ajaxパーツの概要
    • Google PageRank表示Ajaxパーツの組み込み手順
    • テンプレートの作り方
  • 3.2 はてなブックマークとdel.icio.usの被ブックマーク状況を表示する
    • 被ブックマーク状況表示Ajaxパーツの概要
    • 被ブックマーク状況表示Ajaxパーツの組み込み手順
    • はてなブックマークの被ブックマーク状況表示Ajaxパーツのテンプレートの作り方
    • del.icio.usの被ブックマーク状況表示Ajaxパーツのテンプレートの作り方
  • 3.3 Yahoo!の検索欄をサイトに付加する
    • Yahoo!検索Ajaxパーツの概要
    • Yahoo!検索Ajaxパーツの組み込み手順
    • Yahoo!検索Ajaxパーツのテンプレートの作り方
  • 3.4 ゲストブックを設置する
    • このゲストブックの概要
    • 動作の条件
    • データベースの初期化
    • ゲストブックの基本的な組み込み手順
    • スタイルシートのカスタマイズ
    • テンプレートのカスタマイズについて
  • 3.5 複数のAjaxパーツを組み込む
    • ヘッダー部分の書き換え
    • 通信結果の表示先と通信処理のJavaScriptを組み込む
    • サンプルファイル

第4章 各種の情報を自分のWebページに表示する

  • 4.1 さまざまなサイトのRSSを読み込んで表示する
    • RSS表示Ajaxパーツの概要
    • RSS表示Ajaxパーツの組み込み手順
    • RSS表示Ajaxパーツのテンプレートの作成
  • 4.2 Google Mapsを表示する
    • Google Maps導入支援ページとJavaScriptの概要
    • Google Maps API Keyの取得
    • Webページのヘッダー部分の書き換え
    • Google Maps導入支援ページでJavaScriptを作成する
    • JavaScriptをWebページに貼り付ける
    • Movable TypeのエントリーにGoogle Mapsの地図を表示する
    • Movable Type 4のエントリーに地図を貼り付ける
    • WordPressの記事にGoogle Mapsの地図を表示する
    • Serene Bachの記事に地図を表示する
  • 4.3 Flickrの写真を表示する
    • Flickr写真表示Ajaxパーツの概要
    • Flickr写真表示Ajaxパーツの利用手順
    • Flickr写真表示Ajaxパーツのテンプレートの作り方
  • 4.4 YouTubeの動画を表示する
    • YouTube動画表示Ajaxパーツの概要
    • YouTube動画表示Ajaxパーツの利用手順
    • YouTube動画表示Ajaxパーツのテンプレートの作り方
  • 4.5 twitterの情報を表示する
    • twitter情報表示Ajaxパーツの概要
    • twitter情報表示Ajaxパーツの使い方
    • Twitter情報表示Ajaxパーツのテンプレートの作り方

第5章 アフィリエイト等の情報を表示する

  • 5.1 Yahoo!オークションに出品中の商品を表示する
    • Yahoo!オークション出品情報Ajaxパーツの概要
    • Yahoo!オークション出品情報Ajaxパーツの利用手順
    • テンプレートの作り方
  • 5.2 楽天の商品を検索して表示する
    • 楽天商品情報表示Ajaxパーツの概要
    • 楽天商品情報表示Ajaxパーツの利用手順
    • テンプレートのカスタマイズ
  • 5.3 Amazonの広告を表示する
    • この節で行うこと
    • AmazonのアソシエイトIDとAccess Key IDの取得
    • 各検索方法で共通の手順
    • 特定の商品の情報を表示する
    • キーワードで商品を検索して表示する
    • ある商品に関連する他の商品の一覧を表示する
    • リストに登録した商品を表示する
    • 各環境のサンプルファイル
    • Amazon広告表示Ajaxパーツのテンプレートの作り方
    • 作成したテンプレートの利用
  • 5.4 ブログの記事に合った商品を表示する
    • 各システムに共通の考え方
    • Movable Type 3.3の場合
    • Movable Type 4の場合
    • WordPressの場合
    • Serene Bachの場合

著者プロフィール

藤本壱(ふじもとはじめ)

1969年兵庫県伊丹市生まれ。神戸大学工学部電子工学科を卒業後,パッケージソフトメーカーの開発職を経て,現在ではパソコンおよびマネー関連のフリーライターや,ファイナンシャルプランナー(CFP(R)認定者)などとして活動している。

ホームページ
URLhttp://www.1-fuji.com

Blog
URLhttp://www.h-fj.com/blog

著書