「GIMPですぐデキる！フォトレタッチスーパーテクニック2010」作例執筆
「GIMPですぐデキる！フォトレタッチスーパーテクニック2010 」にて作例を3点執筆しました（過去の作例執筆2点も収録）。
ソフトのインストール方法から、基本操作や画像加工テクニックが満載のムックです。
（画像をクリックするとイメージがご覧いただけます）
- お客様
- 晋遊舎様
- 概要
- 作例執筆（3作品）
- サポート
- 作例制作、工程執筆
- 提案のポイント
- 素材画像を合成・加工し、GIMPのテクニックを説明しました。
「GIMPですぐデキる！フォトレタッチスーパーテクニック2010 」にて作例を3点執筆しました（過去の作例執筆2点も収録）。
ソフトのインストール方法から、基本操作や画像加工テクニックが満載のムックです。
（画像をクリックするとイメージがご覧いただけます）
「GIMPデジタルフォトテクニック2010 (100%ムックシリーズ)」にて作例を3点執筆しました。
ソフトのインストール方法から、基本操作や画像加工テクニックが満載のムックです。
（画像をクリックするとイメージがご覧いただけます）
Love Letter Project実行委員会様が運営されている、「Love Letter Project」の2009年度版の「フライヤー」と「ポスター」を制作させていただきました。
書家の紫舟さんが中心となり、誰かを思いながら、心を込めて、時間を費やして、自分の手で手紙をつづることで愛する人や、家族・友人などへの思いやりについて考えるとても素敵なプロジェクトです。
（画像をクリックするとイメージがご覧いただけます）
大型プリンター導入にともない、インクジェットプリント出力用のポスターを制作しました。
ラミネート加工して会社にオモテに貼っています。
（画像をクリックするとイメージがご覧いただけます）
広友社のイメージポスターを制作しました。
パネルやタペストリーにして会社に貼っています。
（画像をクリックするとイメージがご覧いただけます）
香川県のメンズヘアーサロンROOMS様のポストカードを制作しました。
洒落たカフェかバーと見間違うほどの外観のメンズヘアーサロンです。お近くの方はぜひ！
（画像をクリックするとイメージがご覧いただけます）
香川県のメンズヘアーサロンROOMS様のロゴを制作しました。
洒落たカフェバーかと見間違うほどの外観のヘアーサロンです。お近くの方はぜひROOMSで男前にしてもらいましょう！
（画像をクリックするとイメージがご覧いただけます）
広友社の「会社案内」を制作しました。
ご希望であれば郵送いたしますので、お問い合せフォームから資料のご請求をお願いします。
（画像をクリックするとイメージがご覧いただけます）
和歌山民医連様の「医療体験募集ポスター」を制作しました。
民医連様では、医学生向けの実習や企画、奨学金制度があり、患者さんと地域住民の立場に立つ親切で良い医療を行う医師育成に力を入れておられます。医学生のみなさん、地域のなかで学び成長する、そんな医師を目指してみませんか。
（画像をクリックするとイメージがご覧いただけます）
広友社のスタッフが、日頃デジカメで撮った写真をアップするサイトです。
掲載している画像の利用や加工は、個人・商用問わずフリーとなっております（そんなたいした画像はありませんが…）。
写真を撮るのが好きって方は多いはず。みなさんのサイトにも「フォトログ」っぽい写真ギャラリーサイトを追加してみませんか？
個人のページだけではなく、社内の活動写真日記としての活用や、自社の商品を掲載して宣伝することも可能です。
（画像をクリックするとイメージがご覧いただけます）
晋遊舎様の「GIMPですぐデキる！フォトレタッチスーパーテクニック 2009」で作例を3点執筆しました。
ソフトのインストール方法から、基本操作や画像加工テクニックが満載のムックです。
「GIMP」とはプロが使用するPhotoshop並の画像加工ができるフリーのグラフィックソフトです。一般の方でもデジカメで撮った画像を、簡単に合成や加工ができますよ。
（画像をクリックするとイメージがご覧いただけます）
こども用の印刷物をInDesignで作成されてる制作者の皆さん！「ルビふり」に困ってませんか？
「ふりふり」は、フォームから送信された文章を、Adobe InDesignで読み込めるタグ付きテキストへ変換し、ダウンロードできる無料のWebサービスです（現在、Windows CS3限定）。
ぜひ、ご活用くださいませ！（利用規約をよく読んでくださいね）
（画像をクリックするとイメージがご覧いただけます）
奈良コープ産業様の「さんま寿司」のパッケージデザインをいたしました。
手作りにこだわり、一本ずつ木枠の中で押されて出来上がる「さんま寿司」は絶品です。
（画像をクリックするとイメージがご覧いただけます）
Love Letter Project実行委員会様が運営されている、「Love Letter Project」の2008年度版の「フライヤー」と「ポスター」を制作しました。
書家の紫舟さんが中心となり、誰かを思いながら、心を込めて、時間を費やして、自分の手で手紙をつづることで愛する人や、家族・友人などへの思いやりについて考えるとても素敵なプロジェクトです。
（画像をクリックするとイメージがご覧いただけます）
昨年度、制作させていただいた「NPOどんどこプロジェクト」の2008年度版です。
今年は開催地域と参加児童館も増えて、ますます賑やかで楽しい内容となっています。
サイトの構成は、Movable Typeを活用し、NPOのスタッフの皆さん自身が更新できるシステムです。
（画像をクリックするとイメージがご覧いただけます）
大阪DTPの勉強部屋さんが開催する「電子書籍勉強会」に参加いたします。
電子書籍に興味のある皆様、ぜひご参加くださいませ。
■日時：2010年7月24日（土）
（受付）13時～ （開始）14時～
■会場：TKP大阪梅田ビジネスセンター（TKPゲートタワービル 10F ルームB）アクセス
■参加費：2,500円（領収書の発行有）
セミナーの概要は下記となっております。
]]>■内容（予定）
現在わかっている電子書籍に関する情報を3つにわけてまとめます。
- 電子書籍を見る
- パソコン・携帯・iPad
- アプリ型で見る。ePubで見る
- 電子書籍を作る
- 「InDesignからのEPUB」 Yuji氏（InDesignの勉強部屋）
- 司会を入れてディスカッション。
- DTP系からの作る
- 竹内亨氏（(株)遊文舎）（たけうちとおるのスクリプトノート）
- Yuji氏（InDesignの勉強部屋）
- Web系からの作る
- 佐々木康氏（(株)広友社）
- セキュリティ
- 竹内亨氏
PDFに認証をかけて違法コピー出来ないようにする仕組みがいくつかのベンダーさんから提供されていますが、もう少し簡単なものを試験的に作ってみました。デモと解説。
- 電子書籍を売る
- App Storeで売る
- 専用サーバーで売る
定員は40名程を予定しています。
先着順ではありません。定員を超えた場合は抽選になります。
2010年5月1日（土）～5日（水）
2010年5月6日（木）から通常営業いたします。
※休業期間中のお問い合わせについて
メールでのお問い合わせは24時間受け付けますが、上記休業期間に頂いたメールにつきましては5月6日以降に順次対応させていただきますので、ご了承下さい。
]]>
弊社のスタッフが、「ADOBE® CREATIVE SUITE® 5 デザインセミナーツアー」（大阪会場）にて、パネルディスカッション「変わってきた制作と印刷の現状 ～紙媒体とクロスメディアのこれから～」のゲストスピーカーとして出演いたします。
ADOBE CREATIVE SUITE 5印刷関係またはWeb関係の皆様、ご参加くださいませ。
日時：2010年5月26日（水）
会場：ブリーゼプラザ小ホール（大阪市北区梅田2-4-9）
第1回 開場12:30 開演13:00～15:30
第2回 開場16:00 開演16:30～19:00
（第1回・第2回 各回定員 : 250名）
参加費無料（事前登録制）
セミナーの概要は下記となっております。
]]>ADOBE® CREATIVE SUITE® 5 デザインセミナーツアー
紙媒体やWebはもちろん、様々なメディアに向けてデザインを行わなければいけない現在、これからのデザイナーには幅広いクロスメディアに対する取り組みは必須となっています。
Adobe Creative Suite 5 なら、グラフィックデザインのみならず、インタラクティブコンテンツの制作までこなすさいに問題となるデザインの境界線を越える新機能が充実し、より速く、より精細に、あなたの作りたいを手助けします。
Print&Digitalの方向に必要なすべてのコンテンツ制作が可能に！豊かな表現でユーザーの注目を受けるコンテンツを得られる新しい世界を、Adobe Creative Suite 5で手に入れましょう。
今回のセミナーでは最新機能を知るだけでなく、各地・地場のクリエイター様や企業様を招いてのゲストセッションも設け、様々な面からデザイン現場の今を知ることができます。
共通の悩みや取り組んでいるプロジェクト、著名クリエイターによるTipsや世界観など、ここでしか知ることができないセッションばかりです。また、協力企業様によるブース出展もございます。
さああなたも今すぐ、Adobe Creative Suite 5のイベント「Design セミナーツアー」に参加して、これからのデザインに必要なモノを知ろう！
新年明けましておめでとうございます。
昨年は格別の御厚情を賜り、厚く御礼を申し上げます。
本年も印刷物からWEB制作まで、皆様にご満足頂けるサービスを提供できるよう、スタッフ一同邁進してまいります。
何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。
]]>
大型プリンターを導入しました。
ポスター・カンプ・店内ＰＯＰ・イベントや展示会用パネル等の大型の印刷物を1枚からプリントが可能で、お値段もリーズナブル！
8色顔料インクジェット出力ですので、耐候性も高く仕上がりもとても綺麗で B1サイズまでOKです。
もっと広友社のことをお客様に知っていただくために会社案内を作成しました。
これから弊社の営業スタッフが、この会社案内を持って皆様のもとにお伺いいたします。
ご希望であれば郵送いたしますので、お問い合せフォームから資料のご請求をお願いします。
]]>| 【職 種】 | 営業職 |
|---|---|
| 【勤務地】 | 東大阪市 |
| 【業務内容】 | 印刷物・WEBの企画営業、印刷物の配達 |
| 【募集対象】 | 35歳ぐらいまで
は大歓迎です |
| 【勤務時間】 | 9時00分～18時00分（休憩60分、残業あり） |
| 【休 日】 | 日曜日、祝祭日、夏季休暇、年末年始休暇、有給休暇、年間休日数105 日 |
| 【給 与】 | 応相談 |
| 【福利厚生】 | 健康診断、勉強会 |
| 【加入保険】 | 健康・厚生・雇用・労災 |
| 【連絡先】 | 株式会社 広友社 |
広友社の制作スタッフによるLABサイト「KYS-LAB」をオープンしました。
Webやグラフィックなど前向きに実験するLABサイトです。
]]>
携帯やパソコンのメールソフトから簡単にブログが更新できるシステム「ミニブログ」を開発中です。
只今、弊サイトのトップページ（左側）にて実験公開しています。
出先などからお手軽に携帯からブログが更新でき、画像や動画の添付も可能です（クリックすると原寸表示します）。また、パソコン側からお気に入りのサイトや参考になるサイトをブックマークするだけで、サイトへのリンクやリンク先のテキストも自動更新できる優れものです。
ホームページのちょっとしたアクセントとしてどこにでも配置できる「ミニブログ」。更新が多いニュースや社内の情報共有などにも活用できるサービスとしてご提供できます。
お問い合わせは、kouyusha@ccccc.co.jpまで。
]]>特定の条件でファイルをアップロードすると、
というエラーが出る。
この現象が発生する条件は以下のとおりだそうです。
ファイルアップロードでエラー「不正な要求です。文字コードUTF-8に含まれない文字データを送信しています。」 | Movable Type 4 FAQ
Perl 5.8.5 以前の場合、Perlのバージョンを上げるのは、レンタルサーバの仕様によるので、無理なところもあります。
また、「Firefox」や「Safari」などのブラウザでアップロードすれば問題はないのですが、「IE」を愛用されている方に、強制はできません。
よって、ここではファイルパスを日本語を含まずに、全て半角英数文字にする方法を紹介いたします。
以下の環境でテストしました。
「スタートメニュー」→「マイドキュメント」を選択します。
「マイドキュメント」に半角英数文字で「新規ディレクトリ」を作成します（「マイピクチャ」内でも大丈夫）。
（名前は半角なら何でもいいです。例：Blog_Photo）
「Blog_Photo」ディレクトリ内にアップロードする画像を入れて、「ファイル名」も半角英数字にします。
MTの「ファイルのアップロード」で、STEP2のアップロードする画像を選択すると、アップロードできるようになります。
「マイドキュメント」に半角英数文字のフォルダを作成しても、画像が投稿できない場合、Windowsにログインするときに、「ユーザー名」が日本語になっている可能性があります。
「ユーザー名」の確認方法。上記の赤線の囲み部分をご確認ください（個人によって異なります）。
もし、「ユーザー名」が日本語になっている場合、変更するのは少し面倒ですので、「Cドライブ」に半角英数文字のフォルダを作成し画像をアップする方法もございます。
以下、手順です。
「スタートメニュー」→「マイコンピュータ」を選択します。
「ローカルディスク（C:）」をダブルクリックして開きます。
「ローカルディスク（C:）」の中に半角英数文字で「新規フォルダ」を作成します。
（名前は半角なら何でもいいです。例：Blog_Photo ）
「Blog_Photo」フォルダ内にアップロードする画像を入れて、「ファイル名」も半角英数字にします。
MTの「ファイルのアップロード」で、STEP4のアップロードする画像を選択すると、アップロードできるようになります。
画像のファイルパスを全て半角英数文字にするのに、「マイドキュメント」や「マイコンピュータ」は日本語なのでは？ と疑問を持たれるかと思います。
「マイコンピュータ」の「ローカルディスク（C:）」は表示が日本語ですが、フォルダの実態は
C:
となります。
また、「マイドキュメント」は
C:¥Documents and Settings¥<ユーザー名>¥My Documents
がファイルパスです（ユーザー名は個人によって異なります）。
例えば、
「ローカルディスク（C:）」の「Blog_Photo」にある「081009.jpg」は
C:¥Blog_Photo¥081009.jpg
がファイルパスとなります（画像選択時に自動でつきます）。
なお、「.jpg」などの拡張子の表示はコンピュータの設定によります（表示・非表示の切り替え可能）。
お客様からいただく原稿も「Office 2007」や「CS3」までの対応が可能となり、スタッフ一同新しいソフトと格闘しながら、日々精進しております。
今回は入稿時の原稿についてご注意がありますので、記載しておきます。
お客様同士の文書のやりとりでも、「メールで送ったWordのデータと文字が変わってるやん」といったこともあるかもしれません。
まだまだ一般的に使用されている「Windows XP（以下、XP）」は、コンピュータの文字コードが「JIS 90」をベースとしています。
これに対して「Windows Vista（以下、Vista）」は、経済産業省が2004年に漢字コードに関するJIS規格を変更した最新の文字コード「JIS 2004」に準拠して作成されており、MSゴシック・MS明朝ともに1,000文字以上が追加されています。
これにより、「XP」と「Vista」では、文字の環境が異なっているため、「Vista」で作成した文書が「XP」では、表示ができなかったり、文字化けする現象が起こります（【図１】参照）。
逆の現象も考えられます。
広友社では、お客様からの原稿を印刷に適した（文章の内容に適した）書体に置換し印刷物を作成しますので、お客様が「Vista」で人名など正しく文字を入力したのに、旧字体に変換されることもあります。
特に「名簿」や「住所録」などは、細心の注意が必要となりますので、事前に広友社の営業にご相談くださいませ。
株式会社モリサワさんによる『「Windows Vista」で変わる文字環境』の詳しい資料がございますので、ご参考ください。
「Windows Vista」で変わる文字環境(株式会社モリサワ様 作成）（PDFファイル／3.3Mb）-------------------------------------------------------------
広友社では、名簿や抄録集などの制作物も承っております。詳しくはお問い合わせください。
]]>社内で新しい「キーボード」と「マウス」を導入し、かなり作業効率がよくなったので、お話したいと思います。
筆者は、今まで「仕事の道具」にこだわるということをしてきませんでした。「キーボード」と「マウス」はPCを購入したときについているモノを使用してましたし、「マウスパッド」は雑誌やプリント用紙を代用して使用していました(問題外ですね・・・）。まぁ『使えたらええやん』みたいな感じでした。
ある日、スタッフU氏の
『僕たちの仕事は、一日中キーボードとマウスを触るんだから、もっと道具にこだわって、効率的に仕事をしよう』
との提案により、社内で新しい「キーボード」と「マウス」を購入することになりました。
その「キーボード」と「マウス」についてご紹介します。
今回購入した「キーボード」は2台。
一つ目は、
「DIATEC Majestouch Mini」
ミニというだけあって通常のキーボードより、幅が約6センチ短い。短いといってもキー同士のピッチは同じで、比較的使用頻度の少ない3つの特殊キー（右Alt/右Ctrl/Winアプリケーション）を省き、5つのキー(Home/End/PageUp/pageDown/Insert)はShiftキーとテンキー部との組み合わせで代用します。
打感も悪くなくやわらかいのにしっかり打てるといった感じ。また、「キーボード」の横に「マウス」を配置しても体をひねることなく操作が出来て、作業スペースの確保となりました。
二つ目の「キーボード」は、
「東プレ Realforce 91UBK」
これも上のミニと同じで、幅が短のにキーピッチはフルキーボードと変わりない。違いは、テンキーを省いていること。
テンキー操作になれている方には、使いづらいかもしれませんが、なんといっても打感が軽くて素晴らしい・・・。
「enterキー」だけ微妙に音が違っており(心憎い）、「スコスコスコ…キン」という感覚で軽快に打鍵できます。大げさでなく「疲れがとれるキーボード」といったところでしょうか。
値段だけのことはあります。金額に余裕があればかなりお勧めします。
続いて「マウス」も2種類購入しました。
一つ目は
「Logicool MX Revolution」
詳しい機能は製品サイトを見ていただくとして、ホイールを回したときのクリック感を自由にON/OFFできる「MicroGearプレシジョンスクロールホイール」により、一行単位でも数千行単位でも指先一つでホイールを操作できるのがかなり快適です。任意のテキストをドラッグしてワンクリックでブラウザで検索できるのもかなり便利。
また、人間工学にもとづいているだけあって親指がしっかりマウスに乗って手によく馴染みます。充電式のコードレスなので電池を入れ替える面倒くささもないです。
まだ数日しか使ってませんが、作業効率が上がり、肩こりとストレスが軽減しました。
二つ目の「マウス」は
「Logicool G9 Laser Mouse」
ゲーマーに圧倒的な指示を受けている「マウス」です。
さすがに「世界最強のカスタマイズマウス」というだけあって、上の製品の機能にプラスして解像度の変更、重さの調整、カバーの付け替え、などユーザーに合った細部までのカスタマイズが可能です。
また、マウスの解像度やプロファイルを示すLEDを搭載しているので操作感もよく、見た目もかっこいい。これでコードレスなら完璧なんではないでしょうか。
ついでに「マウスパッド」も購入しました。
「シグマAPOシステム販売 エアパッドプロIII」4枚（Win用とMac用）
「史上最強のマウスパッド」というだけあって、ポインタの動きが、非常にスムーズ。
セットの「エアーパッドソール」をマウスの裏に貼ると、まさに「エアーホッケー」なみに滑りまくります。
（写真は、ちとエアーパッドソール貼り過ぎ？）手の移動距離も少なくてすみ、手首にやさしいのでストレスを軽減します。
「道具はいいものを使おう！」
これにつきます。
次はモニターにこだわりたいと思います。。。
今回はSketchUp（スケッチアップ）について説明します。
簡単な建築物を作ることに威力を発揮する3Dソフトです。
このソフトは、Googleが無償で提供するサービスのひとつで、ここから誰でも簡単にダウンロードして使用することができます。
無償版と有償版の2種類があります。
ただ、無償版と有償版の差はデータの書き出しの制限などほんの僅かです。
無償版は英語版のみですが、SketchUpの公式サイトの有償版用のビデオチュートリアル（日本語ボイス解説付き）があるのでここを活用しましょう。
［Rectangle（長方形）］ツールや［Push/Pull（押す/引く）］ツールを使うだけで、スケッチ感覚で簡単に立方体や三角形の屋根がつくれます。
この感覚は、今までの3Dソフトでは得られないものです。
慣れてくれば、いろんな窓の形やベランダなども短時間で作れるようになります。
［shadows（影）］を使ってモデルに太陽光の影を投影することもできます。
いろいろな瓦や壁のテクスチャも内蔵されており、無償にしてはかなり本格的なソフトではないでしょうか。
自分のモデリングだけで満足できなければGoogleより登録されたハイポテンシャルな既存のモデリングデータをダウンロードして使用することも可能です。
ここではヘリとポルシェを使用しました。
また、このソフトはGoogle Earthとの連携も考えられており、Google Earth上に自分の作成した建物をSketchUpのplace modelより出力して配置することも可能です。
興味を持たれたなら早速ダウンロードしてみてください。
でわまた。 ]]>圧倒的なサービスを提供し続けるGoogleの「Google Earth」を使って簡単な動画を作成してみました。
以下、簡単な作成の流れをご説明します。
これがないと始まりません。まだインストールしていない方は、「Google Earth」をインストールしましょう。
動画を作らなくても1日遊べます。
「Google SketchUp」をインストールします。
同じくGoogleが提供する無料3D作成ツール「Google SketchUp」で建物を作成します。「Google SketchUp」は、「Google Earth」との連係機能を備えており、3Dモデルを自由に「Google Earth」上に配置できる無料3D作成ツールです。
今回、弊社のビルを作成してみました（実際はこんなにでかくないです・・・）。
まず、「Google Earth」で任意の場所を検索で指定し、「Google SketchUp」にエリアの画像を配置し、その上に建物を作成します。四角や円の図形を押し出すだけで直感的に作れます。
次に作成した建物を「Google Earth」に送ってあげます。
「Google Earth」の画面を「「Windows Media Encoder」で録画します。
「Windows Media Encoder」のインストールと動画の取り込み方法は、以下のサイトを参考にさせていただきました。ありがとうございます。
お気に入りのカメラワークが設定できたら、エンコードして録画しましょう。
「Windows Media Encoder」で保存された「WMV形式」の動画を編集します。
編集といっても部分的にカットしたり、サイズの調整です。動画編集ソフトは、「Adobe Premiere」を使用しました。
「そんな高価なソフトないや」って方でもWindowsなら「動画編集・変換フリーソフト」などで検索すると多数のフリーソフトがありますので気に入ったものをお探しください。
編集が終わると「FLV形式」の動画に変換して保存します。
「FLV形式」で書き出された動画を「Flash」に埋め込みテキストのムービーと合成してみました。
なお、「Flash」での動画の埋め込みは、かなりデータを重くするので、取り込む前の動画のサイズや画質の圧縮に注意が必要です。
以上、動画の素材として「Google Earth」を使う簡単なTIPSでした。それぞれのソフトが奥が深いので操作説明はしていませんが、作業の流れを自分用のメモ書きとして掲載しました。興味がわいたら試してみてください。
「はてな」や「del.icio.us」といった日本で主要なソーシャルブックマークにクロスポストすることが出来るシステムです。ボタンを生成してテキストをブログに貼付するだけで、簡単にブックマークアイコンが追加できます。
また、どのエントリーがブックマークされたかを解析、統計することが出来るブックマーク統計機能もあり、かなり便利そうです。
自分のブログやホームページに、ブックマークアイコンを付けると、閲覧者は、クリックするだけで任意のソーシャルブックマークサイトにブックマークできるサービスです。
弊社も早速追加してみました（記事の右下にあるアイコンです）。
などなど・・・
皆さんのブログにもどうですか？
]]>グラフィックデザインに関わっている方は周知のことかと思いますが、一般の方はともかく意外とWEBデザイナーの方でも「解像度」について理解されていない方も多いのではないでしょうか。
よく画像原稿を入稿したが、「画像の解像度が低い」「画像が小さい」「印刷すると粗くなった」などと印刷業者の方からいわれたご経験はありませんか。
ここでいう「解像度」とは、「画像のきめ細かさや滑らかさの度合い」です。厳密にいうと１inch（インチ＝2.54cm）当たりのdot（点）の数のことです。単位は「dpi（dot per inchの略）」で表現し、この値が高いほど、より自然に近い美しい画質が得られます。
たとえば、「72dpi」という解像度は、１inchの幅に72個のドット(点)が収まっているということになります（下表のdpiの表示の違いを参照）。
 |  |  |
|---|
デジタルカメラでよく耳にする「画素数」ですが、画像のデジタルデータは、画像を細かく分割したものを1つの色で表現します。この分割した面積を「画素」といいます。上記のドットの大きさと同じようなものだと思ってください。よって、画像の分割が多いほど（画素数が多いほど）、自然に近い美しい画質が得られます。
モニターの解像度はこの「画素数」にあたり、画面全体をいくつの「画素」で表現するかを意味しています。
一般的に画像の解像度は「300～350dpi」あれば、高品質な印刷ができます。高価な美術書や写真集となると「400dpi」は必要です。
パンフレットやチラシなどに使用する画像にホームページからダウンロードした画像が使えるかとご質問を受けますが、ホームページで表示している画像は72dpi（低解像度）で、印刷すると粗くなりますので使用できません。
基本的に「96dpiまたは72dpi」です。
モニタのデバイス解像度は、機種によって異なりますが、一般に「Windows」は96dpiです。「Mac」のモニタのデバイス解像度は一般に72dpiです。
現在ブラウザでご覧になっている画像の大きさが「96dpiまたは72dpi」で実寸に近いとお考えください。よって、Webでは印刷とは逆に表示を遅くするだけなので、高すぎる解像度は必要ないということになります。
ブログなどで、画像をアップするときは、大抵画像の大きさを設定できるようになっていますので、参考にしてみてください。
なお、「Flash」などに画像を取り込んで加工するのであれば、200dpiぐらいは必要かもしれません。
画像の大きさの比較を下表に表してみました。各「Sampl」をクリックしてみてください。
当然ブラウザでの表示になりますので、「解像度」は「72dpi」となっています。Webと印刷物に使用する画像の大きさを比較してみてください。
サイズ | Web | 一般印刷物 |
名 刺 （55×91mm） | ||
ハガキ （100×148mm） |
印刷時は、印刷する紙などにあわせて「解像度」を「300～350dpi」ぐらいに設定しなおします。ブラウザでは「72dpi」で表示していますが、実際の印刷時の大きさは各サイズの大きさ（単位cmやmm）となります。
「Photoshop」などのグラフィックツールが、あれば「解像度」を調べることができます。
「そんなソフト高くてよう買わん」という方は、フリーの画像編集ソフト（GIMPなど）もありますので、興味があれば調べてみてください。
また、簡単に画像の大きさを調べるのであれば、「jpg」の画像データを「IE」や「fierfox」などのブラウザにドラッグ＆ドロップしてみてください。あくまで目安ですが、印刷時に必要な大きさは、ブラウザに表示した画像の大きさの「約4～5倍」だと考えてください。
なお、今回は「解像度」についてご説明しましたが、デジタルカメラなどで撮った画像の色は「RGB」で表現されており、印刷時には「CMYK」に変換する必要があります。「RGB」と「CMYK」の違いは、機会があればこちらで、掲載いたします。
以上、簡単ではございますが、ご家庭で年賀状を作成したり、ブログに画像を掲載する際にもご参考にして頂けたら幸いです。
]]>
「Flash」と「HTML5」が、よく議論されいて、どっちを覚えたらいいのか分からない人も多いかと思います。ボクもそうです。
自分の勉強もかねて、同じアニメーション（マウスに追随するオブジェクト）を、それぞれのスクリプト（ActionScriptとJavaScript）で書いて比較してみました。
Flash (ActionScript 3.0)「マウスに追随するオブジェクト」
（要：FlashPlayer 9.0以上）
Flashのプロパティでドキュメントクラスに「Ball」と記述（名前は何でもいいけど、クラス名と合わせておく）。
package { import flash.display.Sprite; import flash.events.Event; public class Ball extends Sprite { private var circle:Sprite; private var speed:Number = 0.4; //ボールのスピード（小さいほどゆっくりになる） private var radius:Number = 20; //ボールの半径 private var color1:uint = 0xFFFFFF; //ボールの色 private var color2:uint = 0xD8EB00; //背景の色 private var SCREEN_WIDTH:Number = stage.stageWidth; //ステージの幅 private var SCREEN_HEIGHT:Number = stage.stageHeight; //ステージの高さ public function Ball() { // 背景を描く var square:Sprite = new Sprite(); square.graphics.beginFill(color2); square.graphics.drawRect(0, 0, SCREEN_WIDTH , SCREEN_HEIGHT); square.graphics.endFill(); square.x = 0; square.y = 0; addChild(square); // 円を描く circle = new Sprite(); circle.graphics.beginFill(color1); circle.graphics.drawCircle(0,0,radius); circle.graphics.endFill(); circle.x = SCREEN_WIDTH/2; // ステージの真ん中（よこ） circle.y = SCREEN_HEIGHT/2; // ステージの真ん中（たて） this.addChild(circle); //ステージに表示 this.addEventListener(Event.ENTER_FRAME, MoveCircle); } //円の動き private function MoveCircle(event:Event):void { circle.x += (mouseX - circle.x)*speed; circle.y += (mouseY - circle.y)*speed; } }}HTML5 (Canvas)「マウスに追随するオブジェクト」
Firefox 3.6、Safari 5.0、Google Chrome 5.0で検証
（IEでは閲覧出来ません）
無理矢理、インラインフレームで外部のHTML5ページを埋め込んでます（笑）。別ページで表示させる場合は、下記のリンクをクリックしてください。
HTML5 (Canvas)「マウスを追随するオブジェクト」
<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5 (Canvas)「マウスを追随するオブジェクト」</title> <link rel="stylesheet" href="css/layout.css" type="text/css" /><script> var circle; //通常はctx(context)って変数名にするっぽいよ var speed = 0.05; //ボールのスピード（小さいほどゆっくりになる） var radius = 20; //ボールの半径 var color = "#FFFFFF"; //ボールの色 var circleX = 250; // ステージの真ん中（よこ） var circleY = 170; // ステージの真ん中（たて） window.onload = function () { init(); } function init(){ circle = document.getElementById('circle').getContext('2d'); SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; document.getElementById('circle').addEventListener('mousemove',MouseMove,false); setInterval(draw,10); } //マウスの座標取得 function MouseMove(e){ mouseX = e.clientX - (window.innerWidth - SCREEN_WIDTH); mouseY = e.clientY - (window.innerHeight - SCREEN_HEIGHT); } //円を描く function draw() { circle.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); //再描画させるために、とりあえず消す circle.fillStyle = color; circle.beginPath(); circle.arc(circleX,circleY,radius,0,Math.PI*2,true); circle.closePath(); circle.fill(); MoveCircle(); } //円の動き function MoveCircle(){ circleX += (mouseX - circleX)*speed; circleY += (mouseY - circleY)*speed; }</script> </head> <body> <!-- Canvasを表示させる場所 --> <canvas id="circle" width="500" height="340"></canvas> </body></html><script>から</script>までが、Canvasに関する記述。
body{margin:0; padding:0}#circle{margin:0; padding:0; background-color:#d8eb00}今回はじめて、「Canvas」を書いてみましたが、「Flash」で少しでもActionScriptを書いたことがある人は、似たような表記も多いので、理解が早いのかもしれません。
とかいって、どっちも極めていないボクは超苦労しましたが (´д｀;)
とんちんかんなこと書いていたら、ご指摘よろしくお願いします（特にCanvasは怪しい箇所があるかも）。
カヤックさんがステキなサービスを提供されていますね。人様のソースを見るのはとても勉強になります。Canvasでのマウス座標取得に悩んでいたので、参考させていただきました。ありがとうございます。
iPhoneのiBooks用に動画を埋め込んだEPUBを作ってみました。
基本的に、EPUBはXHTMLとCSSで出来ているので、HTML5からも作成できます。
<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>Movie-Sample</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <h1>Rabbit Movie</h1> <video src="Rabbit.3gp" controls="true" autoplay="false" /> <p>After Effects で作成した動画をH.264形式に保存しています。</p> </body></html>
XML構文で書いてみました。<video>タグで囲んでいるところが動画ファイルです。
動画は、以前After Effectsの勉強で作ったムービー を、Safariにも対応しているH.264にエンコードしました。
EPUB作成ソフトは、「Sigil」が有名ですが、自分の使い方が悪いのか、勝手にDTD宣言を書き換えたりして不便に感じたので、「eCub」というソフトを使用しました。
「eCub 1.10」 EPUBに対応した電子書籍オーサリングソフト - builder by ZDNet Japan
新規プロジェクトを作成し、本のタイトルなどのメタデータを入力。
HTMLや動画データの入ったディレクトリを選択。
表紙も作れたりします。テンプレートもいくつかありますな。
設定が完了したら、「Compile」でEPUB作成。
ただし、これだけでは、肝心の動画ファイルがEPUBの中に入っていないので、いったん拡張子を「.epub」から「.zip」に変更後、解凍。
動画ファイルをzipを解凍した「OPS」フォルダに入れます。
「META-INF」、「mimetype」、「OPS」の三つのファイルを選択し、zip圧縮。
※三つ選択するところがポイント。「mimetype」を無圧縮にする関係で、親フォルダでまとめて圧縮してもEPUBはできません。
ファイル名と拡張子を「.epub」に変更。
あとは、iPhoneをiTunesに接続し、同期させたiBooksに、作成したEPUBをドラッグコピーすれば、完成。
4Gじゃないけど。
iBooksライブラリの画面。
動画が埋め込まれている。
再生ボタンをタップすると動画がはじまる。
iPhoneのスクリーンショットって撮れるんですね。
「スリープボタン」と「ホームボタン」を同時に押すと「カシャッ」と音が鳴って撮影できます。
]]>
縦書き文庫さんのサービスで使用されているJavaScriptでサイトを縦書き表示にする「涅槃（ねはん）」をWordPressで試してみました。
涅槃の縦書きの表示
実際の導入したWordPressのページは下記からご覧ください。
KYS-WP* - 縦書き組版「涅槃」をWordPressで試してみましたダウンロードはGoogle Codeから最新のバージョンがダウンロードできます。
nehan - Project Hosting on Google Code
「涅槃」のブログでの導入の仕方は、いたって簡単です。下記ページで説明されています。
上記ページにも解説ありますが、WordPressでは、縦書き表示にさせる箇所を <div> で囲むと改行がおかしくなったので、 <pre> で囲み、 noBR を true にました。
<script type="text/javascript"> Nehan.LayoutMapper.start("pre", { //divのかわりにpre charImgRoot:"http://○○○/img", //約物のイメージフォルダへのパスを記述 fontFamily:"IPA明朝, ＭＳ 明朝, Osaka-Mono, Hiragino Mincho Pro", filter:"direction", noBR: true, //trueに変更 onSeek: function(groupName, seekPercent){ }, onComplete: function(groupName){ }, onCompleteAll: function(){ } });</script>画像の回り込みは、imgタグに
align="top"を追加するだけ。
また、ルビふりや縦中横も
<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>で、ルビがふれます<pack>!!</pack>タグを入れてあげれば可能。
縦書き用の約物は、最適な画像が自動で挿入されます。いや、すごいですね。
あとは、cssで見栄えを調整すれば、縦組み表示のブログが完成です。
ちなみに、リンクテキストにアンダーラインを入れていたら、文字と文字の間に線が入って、こんな感じになっちゃうんで、
cssで、はずしておいたほうがいいですね。
最近話題の電子書籍のフォーマットの一つであるePubにしろ、縦書きや禁則処理やレイアウトが問題視とされていますが、CSS3で日本語の組版をするための拡張案も出ていますね。期待したいところです。
]]>
アドビさんのCS5発売に向けた「ADOBE® CREATIVE SUITE® 5 デザインセミナーツアー」（大阪会場）にて、ゲストスピーカーとして出演させていただきました。
いやぁ、250人以上の方を前に話をするなんて、初めてだったので、ほんと緊張しました。
すでにリハーサルの段階で、目の前に椅子がいっぱい並んでいるのを見て舞い上がってしまうし。壇上に設置されたMacの操作もおぼつかないし（普段はWindowsを使っているので）。
ご一緒させていただいたプランニング・ロケッツの石黒さんがおられなかったら、寂しくてこっそりとビールを買いに行っていたかもしれません（笑）
セミナーの内容は、撮影・録画が禁止でしたので、詳しくは掲載できませんが、石黒さんの考えるクロスメディア論は参考になりました。
紙媒体やWEBだけではなく、クライアントとユーザーを結びつけるために、イベントも企画してお客さんのニーズに応えていくという取り組みは、今後、弊社でも勉強していきたいところです。
私は頭の中が真っ白だったんで、ご来場者の皆さんに、きちんと話が伝わったかどうかは分かりませんが、石黒さんがかなり助長されたお世辞をブログに書いてくださってます（笑）
アドビの栃谷さんと岩本さんのプレゼンは、さすがプロですね。とても分かりやすく楽しいプレゼンでした。会場の皆さんも「ほぉーー！」と歓声をあげておられました。
「Photoshop」も「Indesign」も「Illustrator」もどこまで、かゆいところに手が届くねん！って感じです。
そんな「Adobe Creative Suite 5」。今回のバージョンアップは、さらにクリエーターの強い味方となっておりますよ！
アドビシステムズ様、ご関係者様、ご来場の皆様、この度は貴重な体験をさせていただき、本当にありがとうございました！感謝いたします。この場をかりてお礼申し上げます。
]]>
「GIMPですぐデキる！フォトレタッチスーパーテクニック2010 」にて作例を3点執筆しました（過去の作例執筆2点も収録）。
「戦艦の写真（上）から宇宙戦艦YAMATOのようなCG（下）に」
惑星と宇宙空間を一から作成後、戦艦の写真を加工し、波動砲を発射させました。
「孔雀とカモメの写真（上）から火の鳥のCG（下）に」
炎の素材を一から作成後、孔雀とカモメの画像を合成加工して、「火の鳥」を作成しました。
「海外の新聞（上）を加工してアートっぽいバラのCG（下）に」
新聞の画像を切り貼りしながら加工して、「CDジャケット」風に。
詳しくは、ムックを見てくださいね～（ゴメンなさい）
]]>
フォントメーカー、モリサワさん主催の『モリサワ文字文化フォーラム「文字とデザイン2010」』に参加しました。
第2回モリサワ文字文化フォーラム「文字とデザイン2010」 | 企業情報 | 株式会社モリサワ
豪華出演者であるにもかかわらず、参加費1,000円という超太っ腹なモリサワさんのフォーラム。かなり聴きごたえががありました。
マシュー・カーター氏は、serif系の「Georgia」やsans-serif系の「Verdana」などの書体をデザインされた超大御所書体デザイナー。
午前中、仕事があったので、USTREAMのライブ中継を観ていました。実際のフォント制作時の資料は、タイポグラフィーの歴史書ですね。
仕事が終わるとすぐに会場に向かいましたが、最後の5分くらいしか生で聴講できなかったのが残念。シマダさんとの対談ももうすこし見たかったなぁ。
街にあふれるちょっとずれた？広告やサインを題材に、楽しいトークが繰り広げられていました。
大日本タイポ組合さんの文字に対する独特の視点が面白く、「鳩時計」の作品も素晴らしかったです。いただいたメモ帳、大切にします。
北川さんの事例で紹介されたフライヤーに笑うとともに納得。ターゲット層にあわせたデザインを徹底的にこだわる姿勢に感心しました。
同時に、葛西さんの「デザイナーが作る地図ほど見づらい地図はない」とおっしゃってたのに頷かされました。見栄えよりも伝わる地図を作らなければいけないということ。む～バランスが難しいな。
これからは、動物に近い直感的なデザインも視野に入れて仕事をしていくとするか。
弦人さんが手がけられる「BCCKS」。Webからの文庫本出版、さらにiPhoneアプリへの展開に興味を持ちました。
実際に、出来上がった文庫本を手にしてみると本当によくできている。というか、文庫本そのまま。これで500円から出版できるって安すぎやしませんか。
ブログ本のサービスは、今までにもありますが、BCCKSの「天然文庫」は、質というかデザインで勝負している印象。
それと、iPhoneアプリ用にモリサワさんが文字の表示にこだわったビューワは、まさに職人の技という感じ。文字にこだわり続けるモリサワさんならではですね。先日、電子書籍についてブログに書きましたが、モリサワさんが絡めば、相当いいビューワができるでしょう。
あと、勇吾さんのデバイス開発に度肝を抜かされました。iPadどころではない。とにかくでかい。
まさに、部屋のインテリアとして違和感のない「映像の置き場所」。各メディアや媒体を超越した何か新しい可能性を感じました。
対談が始まる前に、いきなりピンポン玉を聴講者に向けて打ち出した浅葉さん（笑）。
巨匠たちの言葉とデザインはとにかく説得力がありました。自分ごときが、あれこれいうこともなく、
それに尽きる対談だったと思います。
聴講中に後ろをふり返ると勇吾さんが座っていたり、葛西さんとトイレで隣り合わせになったり、休憩時間ごとに喫煙ルームでタバコを吸っていた浅葉さんを見かけたり、講演以外にもドキドキしながら楽しめました。
文字に関する素晴らしいお話、ありがとうございました！
]]>
「Kindle」や「iPad」の発売で注目を浴びている電子書籍。
電子書籍のファイルフォーマットである「ePub」が、Indesign（CS3以降）で書き出せるので試してみました。
「ePub」ファイルの確認は、「Adobe Digital Editions」を利用しました。
Adobeさんのサイトから無料でダウンロードできます。
Adobe - Digital Editions
「Indesignの画面」
「一般、画像、目次に関する各設定ができる」
「Adobe Digital Editions」で見るとこんなかんじ。
「Adobe Digital Editionsの画面」
うーん。レイアウトができていないというのもあるが、微妙。。。
「均等配置」が効いてない（段落の右端が揃っていない）のが、気になる。これは、リーダーによって解消されるのかな？
重要なのは見栄えではなくコンテンツだとは思いますが、これを「書籍」というのはちょっと。まだ、「PDF」のほうが読みやすいと思いました。
「ePub」ファイルは基本的には、zipファイルとのことなので、拡張子を「.zip」に変更し、解凍してみました。
解凍した「ePub」フォルダの中の「OEBPS」フォルダを開くと、XHTMLファイルとCSSファイルがありました。どうやら、「ePub」ファイルはXHTMLとCSSでレイアウトするようです。
「ePub」の中身については、スタッフのUeda氏がまとめているので、ご参照ください。
最近話題の「ePub」という電子書籍フォーマットを勉強してみました ― KYS-LAB_ueda
ということは、基本的にリキッドレイアウトのWebページと変わらないということなのか。
あと気になったのが、「Fonts」フォルダの中に、Indesignで使用したフォントがコピーされていたこと。埋め込まれないでコピーされるとデータが重くなるし、第一にライセンス的に問題があるのでは？？ モリサワのリュウミンとか平気でコピーされてるし。これって、大丈夫なんでしょうか。
仮にフリーフォントを使用したとしても、旧字や外字などがきちんと表示するのかも問題。
日本語は欧文と違って、文字数が圧倒的に多いので、この文字の壁をクリアできないと、今の段階では厳しいのでは。「Flash」でいう、日本語を埋め込んだら重たいみたいな。ん～、ちょっと違うか。
結局、現段階（2010.4.9）では、Webページをつくってるのと、変わらないような気がしました。ただし、そういった日本語に関する不具合も、水面下ですでに開発中で、いずれ解消されそうな勢いも感じます。
ちょっと触っただけなので、大きな勘違いをしていたらスイマセン。また、何か分かったら書いてみようと思います。
まぁ、いずれこういった電子書籍がわんさか出てきそうです。
スタッフのUeda氏からの情報で、「MS Word 2007（以下Word）」からブログの投稿ができるとのことなので、試してみました。
仕事で先方からいただく原稿は「Word」で作成したデータが多く、おそらく一般の方がよく使うソフトの一つだと思うので、クライアントにとってはブログの投稿画面より、「Word」で投稿できるほうが便利かもしれないですね。
取りあえず、Microsoft Officeのボタンから「新規作成」を選択すると、「新しいブログの投稿」ってありました。いやぁ、知らなかった。
制作作業で「Word」を触ることがほとんどないので、結構盲点ですな。世間では既知なんでしょうか。
MTとWP両方で設定してみました。どちらも「XML-RPC」を利用します。
（バージョンMTOS4.1）
事前にMTのダッシュボードで、「システムメニュー＞プロフィールの編集」の「Webサービスパスワード」をひかえておく。
（バージョン2.9）
事前にWPのダッシュボードの「投稿設定」で、「XML-RPC」の「WordPress、 Movable Type、 MetaWeblog および Blogger XML-RPC 投稿プロトコルを有効にする。」にチェックを入れておく。
MTの結果 | WPの結果 | |
|---|---|---|
画像のアップロード | ○ | ○ |
表 | ○ | ○ |
レイアウト反映 | ○ | ○ |
記事のカテゴリー | × | ○ |
総評 | MTのダッシュボードでは、複数の画像を一度にアップロードできないが、「Word」からだと可能なので便利。 公開方法がダイナミックか、静的かによって表示したりしなかったりする。ちょっと不安定な感じ。 あと、カテゴリーが選択できないのが、惜しいところ。 | これといった不具合もなく、発行するとすぐに反映されるので、かなり使える感じ。 MS-Wordからの投稿（サンプルページ） |
いずれにせよ、自分はブログ投稿に「Word」を利用しませんが、クライアントにとっては投稿方法の選択肢が増えるので、サービスの一環として提案できそうですね。
スクリプト関連は、ちょっと触ってなかったら、すぐに忘れてしまいますな。左脳のリハビリがてら、IndesignのテキストをXMLに関連付け（紐付け）させる練習をしてみました。
前回、「XHTML/Dreamweaverへのコンテンツの書き出し」について調べてみたけど、Indesignのコンテンツを元にXHTML化するというのは、ある意味「ワンソース・マルチユース」っぽいけど、Flashなどに読み込めないなど、用途に限界があります。
今後の展開を考えると、最終的にはXMLとしてコンテンツを書き出せたほうがベストですよね。
まず、テキストフレームを新たに構造のXMLに関連付け。「xmlElements.add()」メソッドを使用。
「段落スタイル」を適用させるためには、あらかじめスタイルを作成しておく
//////////////////////////////////////テキストフレームの関連付けの練習//////////////////////////////////////var myDoc = app.activeDocument;var myPage = myDoc.pages.item(0);var myRootXMLElement = myDoc.xmlElements.item("Root");//テキストフレームに入れるテキストvar myTxt = "TextFrame Sample"//テキスト配置var myTextFrame = myPage.textFrames.add();myTextFrame.visibleBounds = ["98.5mm","55mm","141mm","155mm"];myTextFrame.contents = myTxt;//1番目の引数にタグ名、2番目の引数にテキストフレームのオブジェクトmyRootXMLElement.xmlElements.add("tfName",myTextFrame);//段落スタイル適用（スタイルはあらかじめIndesignで作成しておく）myTextFrame.paragraphs.item(0).appliedParagraphStyle = "段落スタイル 1"; 
任意のテキストが入ったテキストフレームが作成される
テキストフレームがXMLに関連付けされる
なお、XMLを読み込んで、そのXMLにテキストフレームの内容を関連付けさせる場合は、「markup()」メソッドを使用。
TextFrame.markup(XMLElement);
以前に作成した「Indesign CS3 JavaScriptで表組作成」をさらに発展させて、表の中のテキストをXMLに関連付けさせてみました。
表の関連付けは「convertElementToTable()」メソッドを使用。
「表スタイル」と「セルスタイル」を適用させるためには、あらかじめスタイルを作成しておく
////////////////////////////表組みの関連付けの練習////////////////////////////var myDoc = app.activeDocument;var myPage = myDoc.pages.item(0);var myRootXMLElement = myDoc.xmlElements.item("Root");//タグはあらかじめIndesginで作成しておいたものを参照（「xmlTags.itemByName()」）//ちなみにタグを追加する場合は、「xmlTags.add()」var myTableTag = myDoc.xmlTags.itemByName("table");var myRowTag = myDoc.xmlTags.itemByName("row");var myCellTag = myDoc.xmlTags.itemByName("cell");//表に入れるテキストの配列作成var txtArray = new Array();txtArray[0] = ["1","2","3"];txtArray[1] = ["4","5","6"];txtArray[2] = ["7","8","9"];//XML elementsの追加var myTableXMLElement = myRootXMLElement.xmlElements.add(myTableTag);for(var i = 0; i < 3; i++){ myTableXMLElement.xmlElements.add(myRowTag); for(var j = 0; j < 3; j++){ myTableXMLElement.xmlElements[i].xmlElements.add(myCellTag); myRootXMLElement.xmlElements.item(0).xmlElements[i].xmlElements[j].contents =txtArray[i][j]; myRootXMLElement.xmlElements.item(0).xmlElements[i].xmlElements[j].contents =txtArray[i][j]; myRootXMLElement.xmlElements.item(0).xmlElements[i].xmlElements[j].contents =txtArray[i][j]; }}//XML要素を表に変換して関連付けるvar myTable = myTableXMLElement.convertElementToTable(myRowTag, myCellTag);//テキスト配置var myTextFrame =myPage.textFrames.add();myTextFrame.visibleBounds = ["98.5mm","55mm","198.5mm","155mm"];var myStory = myTextFrame.parentStory;myStory.placeXML(myRootXMLElement);//表・セルスタイル適用（スタイルはあらかじめIndesignで作成しておく）myTable.appliedTableStyle = "表スタイル 1"; with(myTable){ for(var k = 0; k < 3; k++){ //セルの幅と高さ rows[k].width = "33mm"; rows[k].height = "33mm"; //セルスタイル適用 rows[0].cells[k].appliedCellStyle = "セルスタイル 1"; rows[1].cells[k].appliedCellStyle = "セルスタイル 1"; rows[2].cells[k].appliedCellStyle = "セルスタイル 1"; }}
表組みが作成される
表の中のテキストがXMLに関連付けされる
表組みの関連付けは、ググってもほとんど作例記事がなかったので、ちょっと苦労しました。約二日間、「InDesign CS3 スクリプティング ガイド JS」とにらめっこ。もっと論理的な発想ができる脳みそが欲しいな。
なお、表組みに関しては、読み込んだXMLに直接関連付けさせるのは難しいっぽい。新たに書き出し用のXMLを自動作成して関連付けさせるのがベターかもしれないっす。
通りがかりの偉い方、ご存じでしたらアドバイスお願いします！
]]>
前回のIndesign「XHTML/Dreamweaverへのコンテンツの書き出し」 からのつづき。
「メディア間の書き出し」機能は、確かに便利なんですが、何百ページもあるデータを各ページずつに手動で書き出すのは面倒。ファイル名の付け方も間違う可能性もあります。
なんとかJavascriptで自動化できないかとググッてみたら、海外で同じようなコードが見つかったので、ドイツ（Ichとか書いてあったので多分）のIndesignのフォーラムから拾ってきました。
どこの国でも同じようなことを悩んでいる方は、いらっしゃいますなw
app.scriptPreferences.version = 5.0; var outputFile = File('/c/test/test.html'); var document = app.activeDocument; var scriptPath = Folder.startup + '/Scripts/Export as XHTML/'; var scriptFile = File(scriptPath + 'XHTMLExport.jsxbin'); if (scriptFile.exists) { scriptFile.open(); var script = scriptFile.read(); scriptFile.close(); eval(script); var opts = new XHTMLExportOptions(); opts.styleHandling = XHTMLExportOptions.extStyleSheet; opts.styleSheet = 'template.css'; opts.formatted = true; app.exportForWebPreferences.gifOptionsInterlaced = true; var exporter = new XHTMLExporter(scriptFile); var success = exporter.doExport(document, undefined, opts, outputFile); // check the results: if(success) { /*if(exporter.outOfDateLinks.length > 0) { alert('Exporting ' + document.name + ' succeeded\nHowever ' + exporter.outOfDateLinks.length + ' links were out of date.'); } */ } else { alert('Exporting ' + document.name + ' failed with this error message:\n' + exporter.error.message); } }via:Javascript XHTML Export - Adobe InDesign - HilfDirSelbst.ch - Forum
アプリケーションフォルダ内のScriptsフォルダの中の「export as xhtml」に入ってる「.jsxbin」ファイルを読み込んで、ゴニョゴニョしているようです。
ただ、これだとドキュメント全体をXHTMLに書き出すので、全ページがつながったXHTMLができあがるだけ。それでは【ファイル＞メディア間の書き出し】で、ドキュメントを書き出しているのと同じ結果ですね。
ボクがやりたいのは、Javascriptでページごとに分割、または選択範囲のみの書き出しを自動化したいんやけど。
ちなみに上記のコードで書き出す対象（var documentの箇所）をページに変えたら、エラーが出てページごとに書き出せない。選択範囲のみを書き出す設定も出来ないっぽい。
多分、XHTMLExportOptionsでなんとかするんだろうけど、読み込んでいる「.jsxbin」がコンパイル済みのファイルなので、中身をみることもできない。どうなってるんだろう？？今のボクの脳みそでは解明は無理っす。
やりたいことは解決していないけど、XHTML Exportはモジュール化した外部スクリプトを読み込んで動かすってことが分かりました。
下記のPDFも参考になりそうなのでリンク。
]]>IndesignのXHTMLの書き出しがスゴイっすね。知りませんでした。
Webオンリーの制作されている方は、あまり関係ないと思いますが、IndesignでDTPをされている方は、組版したデータをそのままhtml化してWebにも流用する機会も今後増えてくるでしょう。
【メディア間の書き出し】機能を使えば、InDesignコンテンツをXMLやXHTMLなどのファイルへと、そこそこええ感じに書き出してくれます。
XHTML / Dreamweaver へのコンテンツの書き出し（CS3）
「Indesignで作成したコンテンツ」
「一般設定（選択範囲のみの書き出しも可能）」
「画像設定（PNGの設定もほしいところ）」
「詳細設定（書き出されたクラス名にあわせて外部CSSをつくっておくと便利）」
「書き出されたXHTML」
InDesignコンテンツをXHTMLの書き出したサンプルページ
何十ページあっても、外部CSSを一つ設定しておけば便利です。ただし、Indesignで選択範囲を作成し、1ページずつ書き出さなければいけないのが面倒なので、Javascriptで自動化できかいか思案中。
Indesign「XHTML/Dreamweaverへのコンテンツの書き出し」（Javascript編） へと続く。。。
]]>
コーディングで頭を悩ませるのが、IE6対策。
cssは当然として、画像で透過pngを多用させたい場合、苦労します。
そんなとき便利なjavascriptが結構ありますが、オススメなのが「DD_belatedPNG.js」（最新版0.0.8a、2010.1.18現在）。
img要素、pngを含んだdivなどのIDやクラスを参照し、ピンポイントで使用できるので超重宝します。ありがたいですな。
先日、バージョンアップした「jQuery 1.4」ともぶつかってエラーが出ることもなく機能しております。
「DD_belatedPNG.js」については、下記のサイトさんが、丁寧に解説されており、参考にさせていただきました。
今回は、カスタムテンプレートをつくる練習。
記事やカテゴリー、広告などを詰め込んだブログのトップページではなく、いわゆる「ホームページのトップページ」っぽいシンプルなテンプレートにしてみました。
メインインデックスのテンプレート「index.php」をローカル上で複製し、「toppage.php」と名称を変更。いらない部分を削除したり、記事一覧のコードを追加後、FTPで現在使用しているテーマのディレクトリにアップ（index.phpやheader.phpなどが入ってるディレクトリ）。
ダッシュボードの【外観＞編集】で、テーマの編集ページを開き、右側のテンプレート一覧から、「toppage.php」を選択。
「テーマの編集画面-テンプレート名追加」
「テンプレート一覧に表示される」
toppage.phpの一番上に
<?php/*Template Name: トップページのサンプルテンプレート*/?>
と記述すると、テンプレート一覧にテンプレート名が表示される。
サイトのトップーページとブログのトップページ用にページを追加。
「サイトのトップページ用のタイトル入力」
「サイトのトップページは、トップページのサンプルテンプレートを選択」
【ページ＞新規追加】でページを追加すると、右下の「テンプレート」に、先ほど作成した「トップページのサンプルテンプレート」を選択可能になる。ページのタイトルは「HOME」に。
「ブログのトップページ用のタイトル入力」
「ブログのトップページは、デフォルトのテンプレートを選択」
さらに、元のブログのトップ用に新規ページを追加して、タイトルに「ブログ」と入力し、「テンプレート」は、「デフォルトのテンプレート」を選択。
「表示設定の変更画面」
【設定＞表示設定】から、フロントページの表示を「固定ページ」にチェックを入れ、
を選択するとトップページが入れ替わる。
「Vicuna設定画面」
【外観＞Vicuna設定】で、グローバルナビから「トップページのサンプル」のID番号を入力して除外する。こういう設定もあるので、Vicunaは、いたせりつくせりですな。
トップページの外観は、シンプルにしたかったので、最新記事のタイトルと日付だけを一覧表示させることに。
「記事のタイトルにロールオーバーすると概要とサムネイル画像表示」
記事のタイトルをロールオーバーすると、title属性で記事の概要を表示させるようにしたけど、見た目がもひとつだったので、スタッフUEDA氏に教えてもらったJQueryをアレンジして、概要と記事中のサムネイル画像を表示するようしてみた。
サムネイル画像を表示させるのは、下記のサイトを参考に「Post Thumb Revisited」というプラグインを利用。
mono-stock? Blog Archive ? wordpressで記事のサムネイルを表示する
最新記事一覧のループ内に
<?php the_thumb(); ?>
を挿入するだけ。便利。
MTでは、プラグイン使わわないで必死こいてサムネイル画像を作ってたのを思い出します。
「ホームページのトップっぽいHOME（2009.12.22現在）」
KYS-WP*（WordPressの練習用トップページ）
KYS-WP*（元のブログトップページ）
とりあえず、Movable Typeでやっていたことが、WordPressでも少しずつできるようになってきました。
]]>
GIMP Perfect Technique (INFOREST MOOK)
この前、執筆させていただいた「GIMPデジタルフォトテクニック2010」を含めGIMP関連のムックがいっぱい出てますね。
「素材画像（左）を加工して、大正ロマン漂う画像（右）に」
素材画像を少し古びた加工をしてコラージュしていきます。
ノスタルジーを感じさせる色調整がポイントです。
詳細は、ムックにて・・・
]]>
WordPressの練習用サイトにいくつかプラグインを設定しました。
以下、簡単な概要。
WordPress最強のコメントスパム対策プラグイン。WordPressに標準で同梱されています。
コメントスパムやトラックバックスパムを大きく減らすか完全に排除してくれるそうです。
「APIキーをペースト」
設定を有効にするには、WordPress.comのユーザー登録画面で登録後、「WordPress.com API キー」を取得して、貼り付けるだけ。
コンタクトフォームを作成してくれるプラグイン。
Contact Form 7: WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。
「設定したコードをコピー」
「固定ページの本文にペースト」
設定したコードをお問い合せ用のページの本文に貼り付けるだけ。簡単。カスタマイズもできるようです。
なお、お問い合せページのような固定ページは、コメントとトラックバックなどををcssで表示させないようにしました。
body#entry2 #comments,body#entry2 #trackback,body#entry2 .entry ul.info{ display:none;}Google Analyticsの設定が簡単にできるプラグイン。
Google Analytics for WordPress - Yoast - Tweaking Websites
「IDを入力するだけ」
設定画面のAccount IDにGoogle Analyticsでウェブサイトを登録した際に発行されるIDを入力するだけです。
まぁ、footerに直接トラッキングコードを挿入してもいいんですが、とりあえず入れてみました。
日本の携帯対応プラグイン。
WordPress Plugins/JSeries ? Ktai Style (携帯対応プラグイン)
【ダッシュボード＞設定＞携帯表示】から設定画面へ。
「各キャリアに対応してます。スゴイ！」
PC用と同じアドレスで、携帯用に表示してくれるので便利ですね。細かいカスタマイズは、また時間のあるときにでも。
エントリーの関連記事を表示させるプラグイン。
All Things Seen and Unseen ? Similar Posts
MTでは、関連記事を表示させるのに、苦労してテンプレートタグを作ってたんですが（それもタグしか反応しないし）、このプラグインは、ダッシュボードから各設定が簡単におこなえます。
設定は下記のサイトを参考にしました。
WordPress: Similar Posts の紹介と設定例 - 関連記事[投稿|エントリ]を表示するプラグイン - Yukun's Blog
「関連記事の表示設定」
ちなみに、Output templateは
<li><a href="{url}" title="『{title}』もご覧ください">{title}<?/a></li>にしました。
「関連記事の表示画面」
ロールオーバーすると、こんな感じ。
KYS-WP*（WordPressの練習用ページ）
まだまだ、便利そうなプラグインがいっぱいありますが、プラグイン同士のバッティングにより正常に表示されない可能性もあるようなので、一つ一つ確認しながら、導入していこうと思います。
]]>
function my_remove_dashboard_widgets() { global $wp_meta_boxes; unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);//被リンク unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);//現在の状況 unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);//プラグイン unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);//最近のコメント unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);//クイック投稿 unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);//最近の下書き unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);//WordPress開発ブログ unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);//WordPressフォーラム}add_action('wp_dashboard_setup', 'my_remove_dashboard_widgets' );function my_remove_dashboard_widgets() { global $wp_meta_boxes; unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);//被リンク unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);//現在の状況 unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);//プラグイン unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);//最近のコメント unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);//クイック投稿 unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);//最近の下書き unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);//WordPress開発ブログ unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);//WordPressフォーラム wp_add_dashboard_widget( 'my_sample_dashboard_widget1', 'サンプルウィジェット1', 'my_sample_dashboard_widget1' ); }function my_sample_dashboard_widget1 () { ?> <p>サンプルウィジェット1です。</p> <p>このように自由に追加できます。<br /> WordPressで作成したサイトを納品する場合、オリジナルのダッシュボードでお客様と質問のやりとりやバージョンアップのお知らせなどを行うと効果的かもしれません。</p> <?php}add_action('wp_dashboard_setup', 'my_remove_dashboard_widgets' );<Files update-core.php>
AddHandler application/x-httpd-phpcgi .php
</Files>
<Files *.php>
AddHandler application/x-httpd-phpcgi .php
</Files>
<files load-styles.php>
AddHandler application/x-httpd-php .php
</files>
これで、CSSが利くようになりました。
