Laboratory

LABで使った技術のまとめ

login

PHPとMySQLを使ったログインフォームの雛形。databaseとしてテーブルadministration (key user password timestamp)を使っている。パスワードはMD5で作っているが登録フォームを作っていないので手作業する必要がある。md5はmd5_file($str);で作成すること。

lab

colormodule

RGBの値をHSVに変換するPHPスクリプト。

color-pallet, color-pallet2

イメージからよく使われている色を抜き出すPHPスクリプト(ネットから取得したもの)。color-palletではSVG人形に色を当てはめる。color-pallet2はウェブサイトデザインに使う為にRGB値を抜き出す。

jQuery UIを使って取得したカラーパレットをドロップレットにする。

イメージのサイズを取得して適当な大きさにリサイズするPHPコード。

tmpl

HTML文書の雛形に使えるテンプレート集。固定長、可変長、携帯電話対応など。

PHPで作ったメールを送るフォーム。

map

ajax.js

  • XMLHttpリクエストを使ってテキストを受信するJavaScript。
  • XMLHttpリクエストを使ってXMLを受信するJavaScript。
  • MySQLのインターフェイスになるphpを操作してデータの作成・削除を行う。
  • 完了(ステータスが200)したらメッセージを表示するJavaScript。
  • XMLから読み取った情報をもとにマーカーを抽出して書き出すJavaScript。
  • XMLの要素の抽出など。
  • Google Maps APIを使ってマーカーにシークレットメッセージをアタッチするJavaScript。
  • マーカーとメッセージウィンドウ(infowindow)を同時に書き出すJavaScript。
  • 予め行列に書き込んだマーカーをすべて消し込むJavaScript。
  • 住所を入力してGEOコードを取得する。地図にはマーカーを書き出すJavaScript。
  • DOMを操作してフォームを自動生成するJavaScript。

direction.php

プルダウンメニューで予め登録された情報をもとに経路情報を抽出するミニアプリ。Googleから拾ってきたもの。

geolocation.php

デバイスが現在いる場所を取得して地図にセンターを表示するJavaScript。Googleから拾ってきたもの。

getTwitterAPI.js

TwitterAPIに接続して情報を書き出すために必要なJavaScriptファイル。OAuthを使用しているらしい。

google.js

Google Maps API version2に必要なコードを集めたもの。住所検索など。index.phpで使用する。

index.php

Google Maps API version2を使って地図表示、住所検索、KMLファイルのバインドなどを行う。PicasaWebにある位置情報ファイル(KML)を読み出して地図にバインドする。

marker2.php

MySQLデータベースから情報を抜き出してXMLに整形するPHPスクリプト。markers.xmlを出力する。

objectdump.js

オブジェクト情報をHTML上にダンプするjavascriptファイル。

photoinfo.php

予めファイル名が分かっている写真からGEOコードを抜き出すPHPコード。地図のセンターポジションを移動するためのJavaScriptコード。

photolist.php

  • 特定のディレクトリに入っているEXIF情報から位置データをPHPで抜き出す。
  • Google Maps API version3の地図上にマーカーとして出力する。
  • PHPで行列(多次元)を書き出す。

search2.php

オートコンプリートのないGoogle Maps API version3の住所検索機能。クリックしたらマーカーを配置し配列にプッシュ(array.push)(コードはajax.jsに)。配列に入ったマーカーをすべて削除する。

search3.php, search3_2.php

MySQLからXMLを書き出し(marker2.php)それを読み込む。Google Maps API version3の地図に書き出して表示する。

XMLを読み出して削除候補のマーカーをフォーム上に書き出す。マーカー情報をMySQLから削除し、XMLファイルを再度パブリッシュする。

viewmarkers.php

XMLの情報をもとにGoogle Maps API version3の地図上にマーカーを書き出す。

twitter.php

オートコンプリートフィードのついたGoogle Maps API version3の住所検索機能。

KLMファイルに書き出した情報をもとにレイヤーをバインドする。Google Maps API version3アプリ。

twitter2.php

地図の中心地3km以内で呟かれた情報をTwitterAPIから読み出し、jsonファイルを受け取る。それをもとにGoogle Maps API version3にマーカー情報を書き出す。

personal_fashion

個人的に洋服のシルエットを研究するために作ったミニアプリ。気に入った写真をアップロードして、グループ分けした上で表示する。勝手に編集されると困るので、簡単なログインフォームがついている。

JavaScript

  • DOMを操作してフォームを自動生成する
  • DOMを操作してフォームを消す
  • XMLオブジェクトから要素を取り出す
  • SVGの色を変更する
  • Tweet情報からKMLを出力する
  • Tweet情報からSIF(ネットワーク解析用)を出力する

Ajax

  • XMLHttpリクエストでテキストを受信する
  • XMLHttpリクエストでXMLを受信する
  • XMLHtttpリクエストで処理が終ったときに動作する

jQuery

  • jQueryを使ったUIのチュートリアル
  • galleriffic-2.0 - ギャラリープラグイン
  • jcrop - 写真をクリッピング
  • bxslider - ギャラリーウィジェットプラグイン
  • fileuploader - 画像ファイルをアップロード
  • ドロップレットを作り、CSSの属性(色)を変更する。
  • 画像一覧を読み込んで(PHP)簡単なフォトアルバムを作る。

PHP

  • RSSの読み込み
  • XMLファイルの作成
  • 自作のログインフォーム
  • メールの送信
  • colormodule - RGBとHSVの値を相互変換
  • GD - イメージ操作/サムネイルを作る
  • ファイルの一覧を取得する
  • 配列を作成する
  • イメージ
    • 写真のEXIF情報を抽出する
    • イメージのサイズを取得する。list($width, $height) = getimagesize($img);

HTMLとCSS

ボタン(CSS3)

  • CSS3を使ったボタンのライブラリ(→mail

API

Google Maps API

  • 地図を表示する(ver2, ver3)
  • クリックしたところにマーカーを付ける(ver3)
  • 位置を指定して地図にマーカーを付ける(ver3)
  • 地図のマーカーを全部消す(ver3)
  • マーカーにアクションを追加する(ver3)
  • マーカーに隠しメッセージを表示する(ver3)
  • 住所を入力してGEOコードを取得する(ver2, ver3)
  • ディレクション(経路)を検索する(ver3)
  • デバイス位置情報からセンターを割り出す(ver3)
  • 地図にPicasa情報をバインドする(ver2, ver3)
  • 地図にKMLレイヤーをバインドする(ver2, ver3)
  • 地図にXMLから取り出したマーカーを表示する(ver3)
  • Tweetから取り出した情報を地図に表示する(ver3)

Twitter API

  • JavaScript
    • Tweetを検索する