世界標準ブログツール WordPress と ケータイ対応プラグ

世界標準ブログツール
WordPress と
ケータイ対応プラグイン
Ktai Style
2010年7月24日
第40回FLOSS桜山
池田 百合子
注意事項
• Ust してます
 http://ustream.tv/channel/osc-nagoya/
 Thanks: Usagi Project の Katz さん
• ハッシュタグ #flosss
(フロスS)
WordPress が人気
• ブログツールでシェア No.1
 バージョン3は1か月で1050万ダウンロード
http://wordpress.org/download/counter/
 日本からは1000回／日以上
• ユーザー・開発者の交流イベント
「WordCamp」を世界40都市以上で開催
• 日々「WordPressに移行した」の報告
WordCamp
• ユーザーと開発者が集うお祭り
 カンファレンスと懇親会
• 日本でも WordCamp を多数開催
 WordCamp Tokyo 2008, 2009
 WordCamp Kyoto 2009
 WordCamp Fukuoka 2010
 WordCamp Yokohama 2010
WordCamp Nagoya 2010
• 2010年10月30日(土)
• 日本では6回目
• 東海地区では初
• 名古屋市立大学 経済学部 (ココ)
• 電源 + 無線LANはあまり期待しないで
そもそもWordPressって?
• ブログツール／サービス
• PHP + MySQL
• GPL v2
• 日本語 (UTF-8) に対応
• テーマ・プラグイン多数
• b2 の後継
WordPressブランドの数々
• 単独インストール型
 WordPress
 コミュニティー (wordpress.org) で開発
• レンタルブログサービス
 WordPress.com
 Automattic, Inc が提供
単独インストール型
• 本家サイト
 http://wordpress.org/
• 日本語版
 http://ja.wordpress.org/
ja.wordpress.org
マルチサイト機能
• 複数ブログ・複数ユーザー対応
• WordPress MU の機能を 3.0 で統合
• 大規模ブログサービスを構築可能
 WordPress.com のバックエンド
 1000万ブログが稼動中
• サブドメイン／サブディレクトリー
いずれも対応
 http://DOMAIN.example.com/
 http://example.com/DIRECTORY/
日本独自の活動
• Codex 日本語版
 http://wpdocs.sourceforge.jp/
 オンラインマニュアルを英日翻訳
• WordPress Plugins/JSeries
 http://wppluginsj.sourceforge.jp/
 日本独自のプラグインを開発・配付
 携帯対応／英語プラグインの翻訳版など
• WordBench
Codex 日本語版
Plugins/JSeries
WordBench
• WordPress の地域コミュニティー
• 2008年9月発足
• 札幌、仙台、秋田、東京、川崎、横浜、
名古屋、石川、福井、京都、大阪、岡
山、福岡、沖縄など全国約35グループ
• 毎月どこかで宴会や勉強会
• BuddyPress で運営
WordBench.org
ブログと携帯は相性がいい
• 国内ブログサービスの多くは
 携帯電話で新規登録できる
 携帯電話で閲覧できる
 携帯メールで投稿できる
• ブログはサイト構造が単純でナビゲート
しやすい
素の WordPress は携帯未対応
• XHTML + CSS なので内容は読める
• でもサイズオーバーでエラーになったり
途中で切れることも
• 画像はほとんどがサイズオーバー
• 管理パネルは Ajax 多用だが、国内携帯は
JavaScript 未対応が多い
そこで携帯対応ツール
• 閲覧
 Ktai Style
 MobilePressNEO
 fortysix-mobile
 WPtouch, iWPhone
• 投稿
 wp-mail.php
 Ktai Entry
 WordPress アプリ (iPhone, Android など)
スマートフォン対応は充実
• WPtouch はネイティブ
アプリのような見栄え
 でも「ウェブ見てたのに
アプリに切り替わった」
ような混乱もある??
• WordPress for iPhone
はネイティブアプリ
 使いやすい
 オフラインでも操作可能
日本特有の注意
• 文字コードの違い
(UTF-8 ではなく Shift_JIS)
• 絵文字、半角カナの多用
• キャリア毎に仕様が異なる
(CSS, 絵文字、画像…)
• ユーザーID・端末識別情報を使った
ユーザー認証
Ktai Style は国内携帯に対応
• Ktai Style は国内5キャリアに対応
• UTF-8 ←→ Shift_JIS 変換
• 絵文字対応 (表示および入力)
• 長い内容を自動分割
• 画像を縮小
• ユーザーID・端末識別情報の読み取り
出力例:フロントページ
出力例:シングルポスト
出力例:最新コメント一覧
出力例:月別アーカイブ
出力例:ドコモ・ウィルコム
• ドコモとウィルコムは一部の絵文字が互換
出力例:au・ソフトバンク
• auとソフトバンクはスタイルシートが使える
出力例:イー・モバイル2種
• 音声端末, Windows
Mobile は少数派
テーマ:Redportal
• Red+Blue
• livedoor Blog
に似せた
• コメント並びの
昇順／降順を切
り替え可能
テーマ:Monolith
• Silver+Navy
• インラインCSS
• 古い端末は右の
通り
テーマ:Green
•
•
•
•
Green+Nature
インライン CSS
古い端末は中央
代替アイコンも用意
テーマ:Loving
• 情熱のピンク
• ♥ の数がコメント
数に連動
• 代替の枠
テーマ:Photolog
• その記事の写真
を り込み表示
• インラインCSS
テーマ:iPotch
•
•
•
au, SoftBank
/
ドコモ旧端末
/ ウィルコム
WPtouch に似せたテーマ
ドコモ (旧端末) はマージン・ボーダーに非対応
テーマ:Arege
• Slashdot に似
せた
• インライン
CSS
携帯テーマの改造も容易
http://wppluginsj.sourceforge.jp/ktai_style/howto/color-change/
で解説
携帯サイトを作ろう
• サイト利用者のためになる
• アクセス数がほぼ倍になる
• Ktai Style なら、専用の携帯サイト
同等の出来栄え
• PHP4 の人はPHP5のサーバーにしよう
メール投稿のすすめ
• 最近は twitter とブログ連携が流行ってい
るけど……。
 twitter は140文字しか書けない
 写真投稿は twitpic や yfrog など外部サービ
ス必須
• ブログ向きなのは、写真付きメール投稿
 非常に機動性が高い (本文記入は圏外でも可)
 外部サービスに頼らなくてよい
メール投稿の流れ
1. 写真撮影
2. GPS 測位
3. 本文、題名の記入
カテゴリー、タグの指定
4. 送信
メール投稿の仕組み (1)
外部メールボックスに随時アクセス
1. メールを送信
2. WordPress が動いているサーバーから
定期的にメールを読み込み
3. ブログに反映
外部メールボックス方式
• 利点
 設定が簡単
 誰でもどんなサーバーでも使える
• 欠点
 リアルタイム性に劣る
(読み込み時間間隔だけ待たされる)
 投稿の失敗がすぐには分かりにくい
(メールボックスに残ったメールを分析しなければな
らない)
メール投稿の仕組み (2)
メール着信時に投稿スクリプトを起動
1. メールを送信
2. メールが着信したら、メールサーバーが
投稿スクリプトを実行
3. ブログに反映
投稿スクリプト起動方式
• 利点
 リアルタイム性が高い (ほぼ即時反映)
 投稿の失敗はエラーメールで分かる
• 欠点
 設置・設定にはそれなりの知識が必要
 使えるサーバーが限定される
(メールサーバー == ウェブサーバーであること)
 設定失敗やスクリプトのバグがあるとメール
ループなどの事故が起こりやすい
Ktai Entry は両方使える
• Ktai Entry は両方の方式に対応
 外部メールボックスに随時アクセス
 メール着信時に投稿スクリプトを起動
• 他のメール投稿ツールは前者のみが多い
 wp-mail.php, wp-shot, mobG, etc
 wp-mta は後者のみ対応
Ktai Entry は絵文字対応
1. 絵文字メールを送信
2. Ktai Style の絵文字フォーマットに変換
(au から送信した絵文字をソフトバンク端末で
表示)
位置情報の活用
• Ktai Location プラグインで、写真や本文
に埋め込まれた位置情報を抽出
 http://wppluginsj.sourceforge.jp/ktai_location/
• Google マップ活用プラグインで地図表示
 Lightweight Google Maps
 Google Maps Anywhere
メール投稿を活用しよう
• メール投稿なら twitter 並みに気軽に投稿
できる
 事件やイベントをレポート
 今日の食事
 街ナカの変なモノ
• 写真を複数貼ったり、500文字以上の文
章が書ける
• ブログは長期残せる記録となる
活用例:Yuriko.Net 旅行記
• 2006年7月から開始
した旅行ブログ
• 国内鉄道旅行が中心
• 投稿を送信した位置
を地図表示
• 普通列車で、駅ごと
に投稿することも
• 1日で100通投稿した
ことも
(2007年9月3日∼5日)
まとめ
• WordPress はコミュニティー活動が盛ん
 wordbench.org をよろしく
• Ktai Style は国内携帯対応がバッチリ
• メール投稿でブログの可能性が広がる
追補
「WordPress 3.0 新機能」
2010年7月24日
第40回FLOSS桜山
池田 百合子
WordPress 3.0 の主な新機能
• 標準テーマが Twenty Ten に変更
• ナビゲートメニュー作成機能
• 複数サイト管理機能
• カスタム投稿タイプの導入
• カスタム分類 (タクソノミー) の機能強化
新標準テーマ Twenty Ten
• 「2010年」という意味の名称
• ヘッダー画像、背景画像やアイキャッチ
画像の設定が容易
 付属画像の一部は Matt が日本で撮影
• 「テーマフレームワーク」という構造
 子テーマによって差分を設計すればよい
• ナビゲートメニュー対応
カスタムヘッダーの設定
テーマフレームワーク
• ベースとなるテーマが「親テーマ」
 Twenty Ten
 Thematic
• 親テーマとの差分を「子テーマ」として
設計
• 親テーマが更新されても子テーマのコー
ドには影響しない
ナビゲートメニュー設定機能
• 管理パネルでナビゲート
メニューを作れる
 固定ページ
 カテゴリーアーカイブ
 外部URLリンク
• 従来は固定ページの一覧
だけがメニュー
 カテゴリーをメニューとす
るには、テーマファイル改
変が必要だった
カスタム投稿タイプ
• 従来の主な WordPress コンテンツ
 「投稿」時系列に沿ったデータ
 「(固定)ページ」時間に依存しないデータ
 「添付」投稿やページに入れる画像など
• WP 3.0 は独自のデータ形式を定義できる
 ショッピングサイトなら「商品」タイプ
 WordCamp なら「講演者」「スポンサー」
カスタム分類の強化
• カスタム分類 (タクソノミー) 機能は WP
2.8 からあった
 カテゴリーやタグも「タクソノミー」の一種
として実装
 設定画面がないので普及せず
• WP 3.0 からは親子関係のある分類も作れ
る
 旅行ブログなら「station」分類
 食べ物ブログなら「food」分類
設定用プラグイン
• カスタム投稿タイプ、カスタム分類は、
標準の管理パネルでは設定できない
• 設定用のプラグインを導入
 Custom Post Type UI
http://wordpress.org/extend/plugins/custom-post-type-ui/
WordPress 3.0 で商用サイト
• 複数サイト機能
 ウェブ制作業者が複数クライアントをまとめ
て管理
 キャンペーンサイトをすばやく構築
• カスタム投稿タイプ・カスタム分類
 ブログサイト、静的コンテンツのサイト以外
のコンテンツが作りやすい
使ってみよう・いじってみよう
• WordPress 3.0 は
 とても使いやすい
 いじっていて楽しい
 新規ユーザーにも分かりやすい
 昔からのユーザーにも馴染みやすい
• とにかく使ってみよう。いじってみよう
 使うことが「貢献」になる