カテゴリー: Blog

Cacoo for WordPressを使うメモ

Posted on 2010-01-10

かなり久々のエントリー。twitterの影響か？twitterもあんまりつぶやいてないけどもw
今年は気楽につまらんことでもブログに書こうと思う。
ってな訳で本題。

まずはCacooのアカウントが必要

知らない方向けに簡単な説明。
Web上で利用できるドローツールで、IllustratorとかFireworksより簡単で、複数人でも編集できるのがポイント。
Mac用のアプリケーション「OmniGraffle」を複数人で利用できるイメージ？（※あくまで個人の感想です）
詳しくは、下記のリンク先とか検索とかしてみてください。

【レビュー】申し分なし! Web版ドローツール『Cacoo』の使い心地 – リアルタイムコラボにもおすすめ! | ネット | マイコミジャーナル

アカウントが必要なので、持ってない方は取得してください。

Cacoo for WordPressのインストール

Cacoo for WordPressをダウンロードして解凍してください。
他のプラグイン同様、解凍したフォルダを

/wordpressのディレクトリ/wp-content/plugins/cacoo-for-wordpress

といった感じで配置してください。
WordPressにログインして、「プラグインの管理」で、cacoo-for-wordpressを有効化させてください。

投稿画面

上記のようにプラグインをインストールすると、投稿画面で、ツールの右端にCacooのロゴのボタンが出現します。

Cacooボタンを押すと、投稿画面で前面に大きなダイヤログウインドウが出現します。

このウインドウには、Cacooの画面が埋め込まれていて、その場で操作することも可能です。
Cacooの画像貼付けには、2種類あります。

Viewer
画像の下部にCacooのツールバー、画像の周囲に経線があるパターンです。

ツールバーには、複数シートのボタンがあり、画像をまとめて見せたいときなど便利だと思います。
Image
通常のイメージとして、貼付けるパターンです。

Viewerでの貼付け

投稿画面でCacooのボタンを押した後で現れるダイヤログウインドウで貼付けたい図を選択します。
図を選択したら、【リンク】ボタンを押すと、各種URLが現れます。
Viewerで使用する場合は、『図の詳細画面のURL』という部分をコピーして、【URL】の部分に貼付けます。

次に【Next】ボタンを押して、サイズ、テーマ、ツールバーの有無を指定します。
指定したら、【Insert】ボタンを押すと、投稿画面にCacoo用のコードが追加されます。

慣れてきたら、わかる方は直接コード書いてもいいかと思います。

Imageでの貼付け

【リンク】ボタンを押して、各種URLが現れるところまではViewerのときと同じです。
Imageで使用する場合は、シートごとにしか貼付けられませんので、『各シートの画像URL』という部分をコピーして、【URL】の部分に貼付けます。

次に【Next】ボタンを押して、サイズの指定をするのですが、Imageでの貼付けで注意すべき点は、サイズの指定です。
400×300などCacooプラグインが用意しているサイズを選ぶと、画像がそのサイズで指定されてしまいます。
かといって『custom』でサイズをなしにしてしまおうとすると、エラーになりますし、個別に指定するのもめんどくさいです。
私の場合は、一度、400×300で指定し、あとでWordPressの画像編集機能を使うようにしています。
まずは、400×300で指定すると、基の画像が400×300でない限りは横長か縦長の画像になります。
投稿画面にインサートされた画像をクリックすると、【画像の編集】ボタンが現れます。

『詳細設定』タブをクリックして、【元のサイズ】ボタンを押すと、Cacooでの元々のサイズが反映されます。
縮小が必要な場合は、元々のサイズを反映させた後に80%等のサイズを指定してやるといいと思います。
そして【更新】ボタンを押すと、元のサイズ比率が反映された画像になります。

WebサイトでCacooを使う場合の最大のメリット

最大のメリットは、画像を更新した場合、Cacoo側だけ更新すると、Webサイト側は修正する必要がない。ということでしょう。
※サイズが変更になると、修正が必要だとは思います。
Cacoo上で更新した例

Webサイトに勝手に反映された例

例えば、アプリケーションの操作マニュアルなどで、バージョンアップに伴い、画面スクリーンの更新が必要だったりするかと思いますので、そのような場合に効果を発揮すると思います。
実はBacklogのマニュアルもCacoo for WordPressを使ってリニューアル予定です。

制作実績のご紹介（九州大学様）

Posted on 2009-11-03

九州大学の「SNSによる情報システム構築」のお手伝いをさせて頂きました。
九州大学「SNSによる情報システム構築」
九州大学のお仕事っていうだけで、IQ高そうでしょう（笑
お手伝いの範囲としては、インターフェースのデザインと一部プログラムです。
インターフェースのグラフィックは、タシブさんにお願いしちゃいました。
シンボルカラーを上手に使って、見やすくわかりやすいインターフェースになったんではないかと思います。
オリジナルのSNSを構築したい方、
Webアプリケーションのインターフェースデザインでお悩みのシステム会社の方、お気軽にご相談ください。

制作実績のご紹介（生活道具のお店アトリエ・トア様）

Posted on

お客さまに丁寧に道具を見立てるという呉服屋さんのようなスタイルのお店
アトリエ・トア｜生活道具の店
こちらのWebサイトの制作のお手伝いをさせて頂きました。

こちらのお仕事も、Gallery+Design studio SYUの前崎さんから依頼を受けました。
写真も前崎さん撮影です。上手ですね。

制作実績のご紹介（独華陶邑様）

Posted on 2009-09-27

すっかりこのBlogの存在を忘れてた訳でもありません。なんとか生きてます。
とっても久しぶりに投稿してみます。

独華陶邑（どっかとうゆう）｜京都・丹波の山奥にある独華陶邑。陶芸家の石井直人と作家石井すみ子が綴る、日々の暮らしと手仕事。
こちらのWebサイト制作のお手伝いをさせて頂きました。

こちらは、Gallery+Design studio SYUの前崎さんから依頼を受けました。

陶芸家のご主人石井直人さんと、生活道具などを職人さんと制作される妻の石井すみ子さんが、京都・丹波の山奥で農家を移築した茅葺き屋根の古民家にて生活、創作活動をされているとのこと。
私の理想とする生活そのものですね。

『この京都・丹波の地から創り出される作品と、生活の発信』を表現するために、石井直人さん直筆のイラストの上にウインドウが開いて展開する。
という手法にしました。

技術的な話になっちゃうんですが、
上記を表現＆メンテナンス性を考えて、iframeを多様しています。
検索エンジン経由で直接末端ページにアクセスして頂いた場合、トップページへのリンクを出力するようにしたりの配慮をしています。

京都で行ってみたい場所がまた増えました。

冥福を祈ってるゼッ！ベイベー！

Posted on 2009-05-02

＜訃報＞忌野清志郎さん５８歳＝ロック歌手　がん治療続け（毎日新聞） – Yahoo!ニュース
これはショック。
俺達の時代が終わったのか〜という印象。
『EPLP』聞いてたら、やばくなってきちゃったよ。
「あなたがいなかったら、つまらない青春時代になってたでしょう。」
「オレが逝ったらあっちでライブ見せてください。」
「心よりご冥福をお祈りします。」

WordPress勉強会in福岡に行ってきた

Posted on 2009-04-26

WordBenchの中の人であり、有名なWordPressのフォームプラグインContact Form 7の作者であるMiyoshiさんが主催されたWordPress勉強会in福岡に行ってきた。
レポートは、こちらが詳しいw

いつものように雑感

作者さんから解説聞けるとは贅沢だ
こういう勉強会もまたありがたい
フックはactionとfilter
プラグイン作成時はwp-includes/formatting.phpとかwp-includes/pluggable.phpは読んどけ的な
プラグインAPIの日本語ドキュメント充実してるじゃんかよー
プラグインでDB扱うには、add_option(),get_option(),update_option()
それだけ、ページビューあったらビジネスにならんものやろうか？
それだけダウンロード数あったらビジネスにならんものやろうか？
CMS関連でいつも思うのは、どれもそれなりに良さがあるので、一般的な最適解とかナンセンス。
どれもよくできてるんだもんね。プロジェクトによっておすすめは違うな〜やっぱ。
皆さん今後もよろしくです。

Movable Typeでの開発環境と本番でのテンプレートの差をなくす

Posted on 2009-04-19

昨日、2009年4月19日（土）にAIP cafeにてFWWサイト運営・管理研究会（仮）vol.6【通称：サト研】が、FWD(福岡Webデザイナーズ)と合同で、またもやなんとなく行われた（笑
今回も、初参加の方もいたなな〜。詳しいレポは、他の参加者の方がBlogに書くでしょう。（ここ他力本願で）
次も、これにめげずに、是非参加してください。
今回も参加して収穫沢山あったよ〜。MODxは、もうちょっと頑張っていじってみるかな〜。iPhoneもやらんとな〜。
そのときのMovable Type小ネタ。

Movable Typeでの開発環境と本番でのテンプレートの差をなくす

Movable Typeのカスタマイズの開発するときは、場合によっては下記のようなアドレスになるんじゃないかと。
デモ環境がサブドメインとか用意できたら、いい話なんでしょうけども、そういかない場合もあるし。

ローカルでの環境（例：http://nishiaki.probo.jp/）
デモ環境（例：http://hoge.com/demo/）
本番環境（例：http://hoge.com/）

そんで、それぞれサイトルート相対パスでテンプレートを記載しちゃうと、デモ環境の例だと↓

/demo/shared/img

を本番環境の例だと、↓

/shared/img

とかいう風に書き直さないといけなくなる。
せっかくOKなのを書き直すのもアレなので。
ホームというか、サイトルートが1番目のブログとして、

<MTBlogs blog_ids='1'><$mt:BlogURL$></MTBlogs>shared/img

とか書いてます。
そうすると、ローカル、デモ、本番関係なくいけるよね〜。っていうそれだけ。

MTテンプレートタグ内でのコメント

MTテンプレートタグでも条件分岐とかやっちゃって後で見たり、他人が見るとわかりづらい。
MTIgnoreというのがあるよ。

<MTIgnore>
ページ数が2以上あるときに、フォルダへのリンク生成
</MTIgnore>
<MTIf

ってな具合で使ってるよ

Movable Typeの条件分岐は入れ子できる

そのまんま。入れ子にできるから複雑なのも書けるよ

MTElseとかは閉じタグなくてもいけちゃうよ

どうしてかは、知らないけども。
MTElseIfとかMTElseは閉じタグなしでもいけちゃう
MTIf | テンプレートタグリファレンス

制作実績のご紹介（株式会社シャノン様）

Posted on 2009-04-15

皆さんご存知かどうかはわかりませんが、実はWeb制作をやってます。単なる変なおじさんではありません。
という訳で最近の実績をご紹介します。
セミナーの受付、管理システムであるASPサービス『スマートセミナー』を展開されている株式会社シャノン様の
Webサイトのリニューアルのお手伝いをさせて頂きました。

シャノン様のご担当者の方が、バックログをお使いになられてまして、
※バックログもお手伝いさせて頂いています。つかBlogも書いているんだった（汗
「バックログがいいと思ったので、お願いしたい。」ということで実現したお話。
いや〜こういうのって、素直に嬉しいですし、誠にありがたい。
ということで、今回もインターフェースデザインをお願いしたのは、高田さん。
コーポレートカラーを上手に使って、『セミナー・イベントの管理システムのリーディングカンパニー感』
というのが表現できたかな〜と思います。
この案件では、プログラムが必要な部分以外は、
サイト全体をMTOS: Movable Type オープンソース・プロジェクト | MovableType.jpにて管理させております。
これによって、今後コンテンツの充実にご注力頂けるのではないか？と期待しております。
より成果が出るWebサイトになるように、今後もお手伝いさせて頂ければと思っております。
B2Bのマーケティング戦略において、セミナー・イベントを実行／計画されている方は、一度ご相談されてはいかがでしょうか？

オレなりの結論としてMacのことえり使いは、山葵辞書使うべきだと思う

Posted on 2009-04-14

まずは、現在のことえりの辞書を見直そうと思った

そういえば、以前書いたことえりのエントリに対して、ことえり用「山葵辞書（シェアウェア）」「山椒辞書（フリーウェア）」の作者の行伝さんから山葵辞書のモニターを頼まれてたんだった（汗
すっかり遅くなっちゃいました。行伝さんスイマセン。

統合しても良さそうなんは、統合。いらんのは捨てる。

この辞書を入れ替えるタイミングを機に、辞書の整理もしてみようと思った。
ことえりの自動学習辞書は、

ユーザホーム/ライブラリ/Preferences/com.apple.JapaneseAnalysis/LearningDictionary.dict

にある。
これを調べて必要な分だけ合体しようと思った。
この手順については、[N] 変換候補がおかしくなった「ことえり」を直す方法を参考にやって、テキストに書き出してみた。

まずは、ことえりの『単語登録／辞書編集』を呼び出す
一時的に『LearningDictionary.dict』の辞書を入れ込むユーザ辞書（一時辞書）を作成
上記の辞書（一時辞書）に、『LearningDictionary.dict』を読み込ませる
一時辞書からテキストに書き出す
登録語数が多いと意外と時間がかかる

結論
『LearningDictionary.dict』はいきなり捨ててもOK（オレの場合）
各自自己責任で！
理由としては、ほとんど自分の辞書に登録されているのばっかりだった。
誤変換のも残っているので、日頃からちゃんと辞書登録してる人は、捨てても良さそう。

他の辞書も上記同様にして、テキストに書き出して確認してみた。
んで、統合しとくか〜というのは、統合した。

山葵辞書をインストール

久しぶりにことえり辞書扱うので、スッカリ忘れているのでメモ

ユーザ辞書のありかは、

ユーザホーム/ライブラリ/Dictionaries

画面：ユーザ辞書

ダウンロードして解凍したファイルを上記フォルダにドラッグドロップ

※山葵辞書の解凍には、パスワードが必要です。
※パスワードは、山葵辞書をダウンロードし、解凍してできたReadMe.htmに書いてある振込先に振込みして、メールしてもらってください。
現在は、ベクターのシェアレジに一本化しているらしいです。
ベクターのページ→ことえり「山葵辞書」(Macintosh / 文書作成)
ここでユーザ辞書の中に、山葵辞書が出てきてなかったので、再起動。
再起動後は、ユーザ辞書に出てきたので、『ことえり環境設定』を呼び出して優先順位の入れ替えを行った。
そして、さらに再起動。

途中わざと、ユーザ辞書なしの状態で日本語を入力してみたら、ことえりの変換があまりに間抜けで面白かった。
オレの場合、いきなりフリーの山椒辞書入れて使ってたけども、ユーザ辞書なしの状態はやっぱり凄すぎる。
山椒辞書→山葵辞書の移行の感想は、フリー版の山椒辞書に比べても穴がないというか、そつがなくかなり満足できる。
日本語入力をそれなりに行う人であれば、999円の元はすぐ取り返せるだろう。
これ、お試し期間があって、それ過ぎたらパスワード入れないと使えない仕組みとかになったらもっと普及しそうと、作者の行伝さんにメールしたんだけども、プログラムは専門分野ではないので、「山椒辞書（＝山葵辞書お試し版）」とさせて頂いております。とのこと。
なんかもったいなさ過ぎる〜。凄くいいのに〜。
山葵辞書の良さを実感して、「それ位、ちょちょいと作りますよ」なんて誠意あるプログラマの方いたら、作者の行伝さんに連絡してみてくださいな。

ググっている途中に、山葵辞書の他にも素敵な辞書を発見

【サト研vol.5】そういえば、なんか書いとかないと【FWW_サイト運営・管理研究会（仮）】

Posted on 2009-02-23

2009/2/21(土)にまたもやグダグダとした勉強会を開催しちゃってきました。
レポートは、こちら
そういえば、今回から参加して頂いたSOTRYの斉藤さんは、以前MAF（マルチメディアアライアンス福岡、現在は形を変えて福岡コンテンツ産業拠点推進会議）で、プレゼンテーションをご一緒させて頂いた方でした。
なんか不思議な縁です。これからもグダグダですが、懲りずに宜しくお願い致します。
おっ！今、福岡コンテンツ産業拠点推進会議の入会案内見てたら、年会費とか無料じゃん！
MAFの頃は、年会費とかあったからあるのかと思ってた。
と思ってたら、会員一覧に合同会社CGFMも発見。
これ次回の勉強会にてしゃべってもらおう。
MLの参加者は49名か〜
3人だけでもやるか？と話してたから立派だな。
これからも頑張ることなくグダグダと続けていけたらいいな。