5-2. primedex_2010 Live! - 一般社団法人日本グラフィックサービス工業

2010年10月27日（水）
明日を創る戦略
いつでもどこでもホームページ更新
営業部 商品開発室
佐藤 聖
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
明日を創る戦略 いつでもどこでもホームページ更新
始めにご挨拶
z大正12年（1923）6月に、東京都小石川で謄写版機材販売を開業
z昭和21年（1946）6月に、現在地である中央区京橋に店舗を移転
z平成18年（2006）に、Web制作部門 「東京ウェブ」 を設立
タナカ印刷ホームページ
http://www.tanaka-p.co.jp/
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
東京ウェブホームページ
http://www.tanaka-web.jp/
2
CMS概要
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
明日を創る戦略 いつでもどこでもホームページ更新
CMS（コンテンツマネージメントシステム）について
• ホームページの更新管理をブラウザで効率良く行うシステム。
• PHP、CGIなどのプログラム言語を知らなくてもシステム構築が
出来る。
• CMSは2005年頃より一般的に普及したといわれている。
• CMSは有料・無料、さまざまなシステムが存在する。
• 個人ブログから企業サイトまで、幅広いホームページの制作が可
能。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
4
明日を創る戦略 いつでもどこでもホームページ更新
CMSで何が出来るのか？
• ブラウザがあれば、パソコン、iPad、携帯などからホームページ
の更新が可能。
• ブログや掲示板に書き込むような感覚でホームページを更新出
来る。
• 新着情報（What’s New、トピックス）などの情報更新が即時反映
出来る。
• ホームページ制作会社に更新作業を依頼しないで済む。
コストダウンに繋がる。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
5
明日を創る戦略 いつでもどこでもホームページ更新
CMS製品のご紹介
• 有料CMS
• 無料CMS
参考サイト： CMSを導入する100の方法 http://tdbox.jp/wordpress/2010/01/02/3/
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
6
明日を創る戦略 いつでもどこでもホームページ更新
CMS MovableTypeとWordPressの比較表
• 国内のシェアが高いCMSは下記の２つになります。
MovableType5（ムーバブルタイプ）
WordPress3（ワードプレス）
動作言語
Perl 5.8.1 以上
PHP 5.2 以上
データベース
MySQL バージョン5.0 以上
MySQL 5.0.15以上
配信方法
静的と動的
動的
テンプレート
MTタグと呼ばれる独自のテンプレート
PHP形式のテンプレート
ライセンス
63,000円(1サーバ 5ユーザー)
無料
年間サポート
10,500円/年(次年度以降)
※個人利用、MTOS（機能制限版）は無料
なし （フォーラムにて報告）
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
7
明日を創る戦略 いつでもどこでもホームページ更新
MovableTypeのメリット
•
•
•
•
日本で一番名前が知られている。情報が多い。
シックス・アパート社による日本人スタッフのサポートがある。
Perl言語を覚えないでも構築が出来る。
入力フィールドを自由に追加出来る、配置も自由に出来る。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
8
明日を創る戦略 いつでもどこでもホームページ更新
MovableTypeを活用したホームページ
参考サイト： Six Apart 導入事例 http://www.sixapart.jp/business/
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
9
primedex_2010 制作事例
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
明日を創る戦略 いつでもどこでもホームページ更新
primedex_2010 開催概要
• 名
称
ＰＲＩＭＥＤＥＸ 2010
• テ ー マ
プリントメディアの明日を提案
～ＴＨＩＮＫ！ Ｐｒｉｎｔ Ｎｅｘｔ～
• 会
2010年７月22日(木)～24日(土)
期
• 開場時間
午前10時～午後５時(最終日は午後４時)
• 会
場
パシフィコ横浜 展示ホールＣ・Ｄ
横浜市西区みなとみらい１－１－１
• 主
催
ＰＲＩＭＥＤＥＸ協議会
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
11
明日を創る戦略 いつでもどこでもホームページ更新
primedex_2010 ホームページとCMSを活用した箇所
2. 活動状況
3. 出展企業
5. primedex_2010Live!
4. ビジネス交流エリア出展社
1. 新着情報
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
12
明日を創る戦略 いつでもどこでもホームページ更新
1-1. 新着情報（ユーザ）
▲ トップページ
入力フォームに情報を書き込み、「保存」ボタン
を押すと自動でページが作成されます。
【自動作成ページ】
・ トップページ
・ 新着情報一覧ページ
▲ 新着情報一覧ページ
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
13
明日を創る戦略 いつでもどこでもホームページ更新
1-2. 新着情報（制作サイド）
• 「URL」入力フィールドの文字列で条件分岐させます。
URLに入力情報があれば、
その情報をリンクさせる。
URLが空ならリンクを貼らない。
※参考MTタグ：<MTIfNonEmpty tag="url">
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
14
明日を創る戦略 いつでもどこでもホームページ更新
2-1.活動状況（ユーザ）
▲ 活動状況 トップページ
入力フォームに情報を書き込み、「保存」ボタンを
押すと自動でページが作成されます。
【自動作成ページ】
・ 活動状況トップページ
・ 活動状況ページ
▲活動状況 詳細ページ
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
15
明日を創る戦略 いつでもどこでもホームページ更新
2-2. 活動状況（制作サイド）
• 「公開日」の入力フィールドで見せ方を自由に変更出来ます。
公開日を基準に年号で記事をリストを分ける。
新しい記事を一番上から並べる。
公開日を基準に前後の記事を探して、
ページ下部にリンクを自動で付ける。
【注意事項】
ホームページ上の年号表記を和暦で表示させ
るには、MovableTypeの標準機能では出来な
いため、かなり面倒なプログラム処理をするこ
とになります。
※参考MTタグ： <MTEntryPrevious> <MTEntryNext> （要プラグイン）
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
16
明日を創る戦略 いつでもどこでもホームページ更新
3-1. メーカー・ベンダー出展企業（ユーザ）
入力フォームに情報を書き込み、「保存」ボタンを
押すと自動でページが作成されます。
【自動作成ページ】
・ 50音順ページ
・ 検索結果ページ
・ 出展企業一覧ページ
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
17
明日を創る戦略 いつでもどこでもホームページ更新
3-2. メーカー・ベンダー出展企業（制作サイド）
• カテゴリ機能を利用し、50音順に表示させます。
▲出展企業 50音ページ
カテゴリを必要な数だけ作成します。
あとは自動でMovableTypeがページを作ります。
【注意事項】
MovableTypeは高度な検索が出来ない。
スペース区切りの検索も対応していない。
▲出展企業 詳細ページ
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
18
明日を創る戦略 いつでもどこでもホームページ更新
4-1. ビジネス交流エリア出展社（ユーザ）
・内容は「メーカー・ベンダー出展企業」と同じです。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
19
明日を創る戦略 いつでもどこでもホームページ更新
4-2. ビジネス交流エリア出展社（制作サイド）
• 既に作成してある構造（ブログ）は簡単に複製出来ます。
▲「システムメニュー」から
「ブログ」を選びます。
▲対象のブログにレ点を入れて、
「ブログの複製」を選択します。
その後に「Go」ボタンをクリッ
クして複製します。
▲「ブログの設定」で新しい情報に打ち変えます。
また、「公開パス」も変更します。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
20
明日を創る戦略 いつでもどこでもホームページ更新
5-1. primedex_2010 Live! （ユーザ）
• iPadからホームページを更新します。
ホームページ更新
Apple iPad アイパッド
デジタルカメラ
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
21
明日を創る戦略 いつでもどこでもホームページ更新
5-2. primedex_2010 Live! （制作サイド） 1
• 現地更新のポイント
・ デジタルカメラのキレイな画像を使いたい。
・ ノートパソコンは重くて機動力に欠けるため使いたくない。
・ iPadの可能性を確かめたい。
• 心配なこと
・ iPad(WiFi)とイーモバイルD25HWはどのくらい充電が持つのか。
・ 電波障害が起こっていないか。
・ 未知のトラブルは無いか。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
22
明日を創る戦略 いつでもどこでもホームページ更新
5-2. primedex_2010 Live! （制作サイド） 2
• 使用した機材
iPad(WiFi)、イーモバイルD25HW、エネループ（充電器）、デジカメ、
Apple iPad Camera Connection Kit、ノートパソコン（緊急時）
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
23
明日を創る戦略 いつでもどこでもホームページ更新
5-2. primedex_2010 Live! （制作サイド） 3
• 現地で更新している風景
・ 一人が各ブースを撮影。一人がiPadで更新作業。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
24
明日を創る戦略 いつでもどこでもホームページ更新
5-2. primedex_2010 Live! （制作サイド） 4
• 写真加工に使用したiPhone（iPad）アプリ
SimpleResize（無料） 480pxにリサイズ
・
PhotoSharp（無料）
画像を明るくシャープにする
デジタルカメラ
▲ SimpleResize
▲ PhotoSharp
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
25
明日を創る戦略 いつでもどこでもホームページ更新
5-2. primedex_2010 Live! （制作サイド） 5
ホームページ更新完了
モブログがムーバブルタイプに情報送信
モブログがメールを受信
メール送信
メールを起動
画像を添付しタイトルと本文を記入
アプリで画像編集
デジカメで撮影
アイパッドでデジカメデータを取り込む
• 更新フロー
※ MovableTypeはメールで更新する機能がありません
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
26
明日を創る戦略 いつでもどこでもホームページ更新
5-2. primedex_2010 Live! （制作サイド） 6
• モブログとは？
・携帯電話のインターネット機能を利用して更新するウェブシステム。
「モバイル」(mobile)と「ブログ」(blog)の造語。
• モブログくんとは？
・モブログくんは、MovableType や WordPress で簡単にモブログする
ことができる無料のサービスです。簡単3ステップで専用のモブログメー
ルアドレスを発行し、今すぐモブログが始められます。
iPad更新の実践デモを行います
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
27
明日を創る戦略 いつでもどこでもホームページ更新
5-2. primedex_2010 Live! （制作サイド） 7
• 良かった点
・ デジカメデータの読み込みが素晴らしい
・ 文字入力の予測変換が良かった
・ iPadのバッテリーは8時間使用しても、50％の残量があった
・ ノートパソコンより軽くコンパクトなので持ち運びが快適だった
• 問題点
・ エネループスティックブースターはiPad未対応で充電出来なかった
・ イーモバイルD25HWはバッテリーの減りが早かった
・ iPad用のキーボードがあれば楽に作業が出来た
・ iPadは入力フィールドのスクロールバーが出ない
・ iPadは画像参照ボタンが使えない。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
28
明日を創る戦略 いつでもどこでもホームページ更新
MovableType構築時に活用した書籍、おすすめの書籍
・ MovableType4
・ MovableType5
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
29
明日を創る戦略 いつでもどこでもホームページ更新
MovableTypeの情報収集
• シックス・アパートのメルマガ
https://www.sixapart.jp/inquiry/mail_magazine.html
・ バージョンアップの情報やセミナーの案内を受け取れます。
• シックス・アパート主催のセミナー
http://www.sixapart.jp/seminar/
・ プラグイン制作会社やWeb制作会社の事例など、
さまざまセミナーを開催しています。
• ブログ
Movable Type 備忘録 http://bizcaz.com/
小粋空間 http://www.koikikukan.com/
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
30
明日を創る戦略 いつでもどこでもホームページ更新
MovableType おすすめのプラグイン
• Toi企画 http://tec.toi-planning.net/mt/
数多くのフリープラグインを配信
primedexサイトでは「CustomDefaultFields」を利用
• The blog of H.Fujimoto http://www.skyarc.co.jp/
主にMovableTypeの情報を発信しているブログ。
primedexサイトでは「Sort Categories And Folders」を利用
• SKYARC System http://www.skyarc.co.jp/
プラグイン制作会社。
primedexサイトでは「PageBute」を利用
• アルファサード（ Power CMS） http://powercms.alfasado.net/
プラグイン制作会社。強力な検索システムなどを提供。
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
31
明日を創る戦略 いつでもどこでもホームページ更新
ご清聴ありがとうございました
ご不明な点がございましたらお気軽にお問い合わせください。
お問い合わせ先
タナカ印刷株式会社
０３－３５６７－２５５１
担当： 営業部商品開発室 佐藤 聖
Copyright(C)2010 Tanaka Printing Co., Ltd. All rights reserved.
32