ウェビンブログ » これはいい http://blog.webbingstudio.com 札幌のWebデザイナー・カスタマイズアドバイザー WebbingStudioのよしなし語り Fri, 30 Jul 2010 00:11:50 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 iPhone・iPadで読みたい本を「sigil」で作ってしまえ http://blog.webbingstudio.com/2010/07/iphone_ipad_sigil.html http://blog.webbingstudio.com/2010/07/iphone_ipad_sigil.html#comments Fri, 09 Jul 2010 11:32:55 +0000 WebbingStudio http://blog.webbingstudio.com/?p=1430

iPhone／iPad用のアプリケーション「iBooks」がリリースされました。

iBooksはストアから本を購入するだけでなく、自分で用意したEPUB形式の電子書籍を読むこともできます。最近では、既存の文書を自分で電子化することを「自炊」というらしいです。

EPUB形式の電子書籍を作れるフリーウェア「sigil」を使って実際に作ってみたので、手順やポイントなどまとめてみます。


「sigil」は、ブログやDreamweaverと同じ感覚で電子書籍を作成できるソフトで、HTMLなどのデジタル文書からの変換に適しています。Win／Mac／Linuxをカバーしています。

sigil – Project Hosting on Google Code

今回のサンプルは私の好きな短編「山月記」にしました。

実は青空文庫にはEPUB変換ブックマークレットが既にあるのですが、今回は敢えて自炊してみます。

最初のテスト原稿が@smokeymonkeyさんの「妻は俺の嫁」だったことは内緒です。

いちばん簡単な作り方

「sigil」をインストールして起動すると、すぐに編集画面になります。

通常はプレビュー画面モードになっていますが、Web制作のスキルがある人には分割モードか、コード画面モードの方が取っ付きやすいと思います。
モードは画面の上の方にある、本と<>が重なったボタンで切り替えできます。

ひとまず、HTMLを<body>タグ内にコピペしてみました。

書籍名／著者は、メニューバーの「Tools」から「Meta Editer」を選択すると設定できます。
書籍名を入れておかないと、iTunesやiBooksで見たときに何の本だかわかりません。忘れず設定しましょう。

左上の大きなボタンの左から三番目をクリックすると、すぐEPUB形式の文書が書き出されます。
このファイルを音楽ファイルなどと同じ感覚でiTunesライブラリに読み込み（自動でブックとして扱われます）、iPhone／iPadと同期すれば、iBooksのリストに作った書籍が登場して、読めるようになります。

使えないHTMLタグに注意

…と言いたいところですが、私の場合、最初は失敗しました。

何故かルビ部分で改行されとる |||orz

どうも、<ruby>タグが入っているとiBooksでは不具合が出るようです。
余分なタグやインラインスタイルが入っているものをそのまま使うと、読み込み速度が遅くなるという話もあるので、一旦テキストエディタに貼り付けてスタイルをリセットした方が無難だと思います。

章ごとに分割してみる

「山月記」は章立てでないので文章を貼り付けただけでもいいのですが、途中で強制的にページを分割することもできます。

左のツリーの「text」フォルダを右クリック→「Add New Item」を選択でXHTML文書がひとつ増えます。文書と文書の間は、ビューワー内で強制的にページ送りとなります。
右上の大きなボタンの中に「自動でセクションを分ける」ボタンもありますが、意図しないところで分かれてしまうことが多いので手動でやった方がいいと思います。

また、文中に<h2>以下の見出し要素があると、要素の内容がiBooksの目次に反映されます。
見出しは、ソースコード画面で直接マークアップするか、テキストをドラッグ→左上のプルダウンリストから任意の見出しを選択で指定できます。

画像を貼る

文書内に画像を貼ることも自由にできます。
私は外字の部分に使用してみました。
高解像度の画像を貼るとiPadでもきれいに見られますが、書籍の総ファイルサイズに影響するので、コミックなどの場合はサイズダウンなどの工夫が必要そうです。

CSSを指定する

EPUB形式の電子書籍の実態は、XHTML文書です…
ということは、CSSの定義も可能です。

左のツリーの「Styles」フォルダを右クリック→「Add New Item」でCSSが新規追加されます。

これだと自動的にHTMLにリンクしてくれないようなので、私はコード画面を開いて、いつものWeb制作と同じ感覚でhead要素内に<link>を追加しました。

iBooksの場合、既存の枠にインラインフレーム風にHTMLが埋め込まれる形になります。
そのため、文字色と背景色は全く意味がありませんが、本文の基本文字サイズ・行間・見出しの体裁を調整したり、1ページ目だけ体裁を変えたりといった「sigil」の内部機能だけではできない細かな調整ができます。
コーディングのスキルがある人にはおすすめです。

そんなこんなで、自分で本まで作れる時代になってしまいました。
まだ表紙を作る方法がわからないので、その辺りも時間があるときに試してみようと思います。

「iBooks」がリリースされたものの、今のところストアでは日本語の本をほとんどリリースしていません。
ですが、既存の本のリリースを待つよりは、自分がいつでも読めるようにしたいテキストを自炊したり、自作の小説やテキストを電子化してセルフリリースするのが電子書籍の醍醐味であり、本当の楽しみ方なのではと思います。
2chの長編読み物やコラムサイト、CMSのオンラインマニュアルなど自炊したいところです。

ただし、著作物を扱うときは慎重に。
iTunesのときと同じように、あくまで個人の範囲内で楽しみましょう。

著作権がなくなってない作品を不特定多数に配布とか、もってのほかですよ！
っていうか私が納品したサイトのコーディング丸パクして別のサイト作ったやつ出てこい（微笑）


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2010/07/iphone_ipad_sigil.html/feed 0 MovableType投稿画面の入力項目を全ユーザーで統一するプラグイン「EntryPrefsFixer」 http://blog.webbingstudio.com/2010/05/mt_entryprefsfixer_plugin.html http://blog.webbingstudio.com/2010/05/mt_entryprefsfixer_plugin.html#comments Sun, 23 May 2010 19:10:21 +0000 WebbingStudio http://blog.webbingstudio.com/?p=1364 「EntryPrefsFixer」は、システム内の全ユーザーの入力項目を、強制的に同じにするMovableType用のプラグインです。

ダウンロードはこちら。
Movable Typeでエントリの表示オプションを全ユーザーで同一にする。 – Junnama Online

特に設定はありません。有効にしている間、MTの動作が以下のように変わります。

  • システムまたはブログ管理者が「表示オプション」を変更したタイミングで、その内容が全ユーザーに反映される
  • 管理者権限のないユーザーの投稿画面には、表示オプションが出なくなる
  • プラグイン有効化前に各ユーザーが個別に表示オプションを変更していても、管理者が変更をした時点で強制的に上書きされる
  1. MovableType4・5・Power CMS for MTで動作を確認しています。
  2. 新規アカウントを追加したタイミングでも同期される機能があったようですが、動作しないようです。現状では「表示オプションを変更したとき」のみ行われます。

かなり実務向けのプラグインなので、機能をざっと書いてもピンと来ない人も多いかもしれません。
必要な場面や技術的な捕足は、追記以降をご覧くださいませ。

MovableTypeの表示オプションの仕様について

MT4以降では、投稿画面の入力項目の表示・並び順を細かく設定することができます。
カスタムフィールドを多用するCMS的な構築には必須の機能ですが、ひとつ面倒なところがあります。

新規で記事を書くときの大まかな「項目の表示」については、各ブログの「設定」→「投稿」で前もって指定できるのですが、
投稿画面右上の「表示オプション」で指定できる「項目の並び順」に関しては各ユーザー個別となります。

つまり、MovableTypeの管理者が
入力しやすいようにカスタムフィールドの項目を整頓していても

更新担当者のアカウントでログインすると、
初期状態に戻ってしまうのです。

ブログやアカウントの数がほとんどないのであれば大した問題ではないのですが、大規模案件などでブログ10個・アカウント10個となってくると、10×10で100回分の表示オプションの設定を行わなければならないのです。

ぶっちゃけやってられま(ry

そんなときに「EntryPrefsFixer」を使うことで、下位ユーザーの環境を管理者側で簡単に整えることができます。
後々アカウントが増えたときの表示オプションの変更回数も、ブログの数だけで済みます。

技術的な捕足

このプラグインは、@Nick_smallworldさんと私(@webbingstudio)のTwitterでの会話を、@junnamaさんが見て作成してくれたものです。

@Nick_smallworldさんに許可をいただいたので、ログを技術情報として追記します。
DBを直接編集することで対応したい人や、同様のプラグインを作ってみたい人は参考にしてください。

【緩募】MovableTypeで、Aさん（もしくはシステム管理者）がカスタムフィールドの並び替えをしたときに、他ユーザー（Bさん、Cさん）も強制的にAさんの並び順にさせる方法をご存じの方、いらっしゃいますでしょうか。 11:56 PM Apr 29th

@Nick_smallworld MTの項目並び替えの件、遅レスですが私も調べたことがあるので、情報流しておきますね。この先しばらく連投になりますが失礼。 10:22 AM Apr 30th

管理画面項目の表示／非表示、並び替えは「mt_permission」テーブルの[permission_entry_prefs]がブログID、ユーザーIDをキーに管理しているらしいです。 #movabletype 10:24 AM Apr 30th

.@Nick_smallworld すいません、これの一個前Replyにしませんでした。…なのでメインユーザーのpermission_entry_prefsを他ユーザーに複製すると並び順は同じになるのではないかと考えられます。 #movabletype 10:25 AM Apr 30th

.@Nick_smallworld このことをサーバー担当の方に伝えたところそれでうまくいったぽいのですが、残念ながら私自身はまだ検証できていません。 #movabletype 10:27 AM Apr 30th

.@Nick_smallworld にっくさんのように「強制的に」と考えている場合、編集のタイミングでプラグインを起動させる／cronか別途プログラム起動で、該当DBを修正させる／という手がある気がします。 #movabletype 10:29 AM Apr 30th

@Nick_smallworld カスタムフィールドの並び順に関して私の方でわかってるのはこのくらいですが、少しでも参考になれば。てゆか誰かプラグイン作ってくれないかなあ。 #movabletype 10:30 AM Apr 30th

@webbingstudio ありがとうございました！ばっちりできました。permissionのほうに定義されていたとは気がつかず「blog_かauthor_の方だろうなー、でも項目が無いなー」と思って探していましたｗ　6:01 PM Apr 30th

@Nick_smallworld あれでできましたかー。結局、項目の表示順は全ユーザーで統一することが多いですよね。今後の案件にも役立ちそうなので、私も試してみます！ 8:52 PM Apr 30th

あと名前出せないのですが、私の検証を元に実際にDBを書き換えて動作確認してくれた当時の某社サーバー担当者様、ありがとうございましたー＞＜。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2010/05/mt_entryprefsfixer_plugin.html/feed 0 「XHTML&CSS超高速コーディング術」の出版記念セミナーに行ってきた http://blog.webbingstudio.com/2009/12/xhtml_css_coding.html http://blog.webbingstudio.com/2009/12/xhtml_css_coding.html#comments Sat, 05 Dec 2009 05:33:48 +0000 WebbingStudio http://blog.webbingstudio.com/?p=1231 oofuji_oosugi

新しい技術を得ることも大切ですが、今の作業、ブラッシュアップできてますか？

book091205

iPhoneアプリ「HTML/XHTMLタグ辞典」が人気の、大藤幹先生の新刊「XHTML&CSS超高速コーディング術」の出版記念セミナーが、アップルストア札幌で開かれました。

今回は「コーディング＝カンプを元にHTMLとCSSを作成する業務」を専門に扱う制作会社「牧野工房」の協力を受け、短時間で正確、かつ美しいコーディングを行うための、牧野工房の実践的なノウハウが紹介されています。

makinokobo

コーディング専門の牧野工房
スキルパートナーズ株式会社

本のPRになると思うのでNDAに反しない範囲で書きますと、私はこの牧野工房さんとお仕事をさせていただいたことがあります。

その際にワークフローの一部を拝見することになったのですが、とにかく驚いたのが、書籍の協力者である、大杉さんのコーディング技術と、徹底した作業工程の管理体制でした。
ルールが厳しいのはもちろんですが、それら全てに理由付があり、しかもコーディングスキルの向上につながります。
セミナー内で大杉さん自身が
「牧野工房のルールに従っていれば、IE6でも問題は発生しない」
と断言されていますが、大げさな話ではありませんでした。

そのような経緯で、私自身も牧野工房のコーディングルールの影響を大きく受けています。
今回の書籍が出版となったのも、大藤先生がハンズオンセミナーを通して大杉さんのスキルに感心したからなのだそうです。

セミナーでの紹介によると、テーマは「手戻りをなくすこと」。

  1. 基本をしっかり守る
  2. 手順に沿って進める
  3. 情報をしっかり管理する

という、当たり前のように見えてずさんになりがちな、牧野工房の実践テクニックが公開されています。

牧野工房が使用している工程管理表・テンプレートが同梱されていたり、大杉さん考案の「シャドーコーディング」(いきなり書くのではなく事前に構造をイメージする)についても触れられていますので、WEBデザイナー・コーダーの方は是非ご一読を。

何故私がこんなに薦めているのかというと、良いコーディングルールの普及・共通化は業界全体のワークフローの改善につながっていくからです。

私のようにフリーランスでやっていると、様々な会社のコーディングをお手伝いすることになります。既にコーディングを終えた静的コンテンツのCMS埋め込みなどもすることがあります。
私が全て作業する案件ならいいのですが、普段行っているものと違う（場合によっては効率の悪い）ソースコードに合わせるのはなかなか厳しいものがありますし、工程にもムダが出てしまいます。

HTML5の仕様が発表され、つい新しい技術に目が行ってしまいがちですが、基本をしっかり守り、ブラッシュアップすることを忘れないようにしたいものです。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2009/12/xhtml_css_coding.html/feed 3 a-blog cmsは「成長させるCMS」だと思う http://blog.webbingstudio.com/2009/12/ablogcms_120.html http://blog.webbingstudio.com/2009/12/ablogcms_120.html#comments Thu, 03 Dec 2009 14:47:35 +0000 WebbingStudio http://blog.webbingstudio.com/?p=1225 acms_120

「a-blog cms」の新バージョン、1.2.0がリリースされました。
主な追加機能は以下の通りです。

  1. WYSIWYGエディタの追加
  2. 絵文字の入出力に対応
  3. ショッピングサイト機能(メール通知のみのシンプルなカートが標準搭載)
  4. ルール(使用するテーマの条件分岐)に「正規表現」が追加
  5. 出力ソースのクリーンアップ
  6. モジュールの追加

入力形式にWYSIWYGが加わったことで、一般のブログやWordに慣れている更新担当者がいる案件にも対応しやすくなったと思います。
制作する立場としては、やはりルールの正規表現対応や、モジュール追加が興味深いところです。
導入事例紹介のページもどんどん厚みを増しているので、今後が楽しみです。

前の記事にもある通り、私＝WebbingStudioは、a-blog cmsのビジネスパートナーになりました。

制作会社ではなく、しかも自分からCMSを選択する機会が少ない個人事業主の私がどうしてa-blog cmsを支援することにしたのかというと、
「制作会社・クライアント双方の意識を変え、成長させる」
可能性に強い興味を持ったからです。

制作会社側の意識

MovableType・WordPress（特にWP）での小規模な構築案件を重ねると、制作者はこんな考え方に慣れてきてしまいます。

  • テンプレート化すると、もうDreamweaverなどのオーサリングソフトで編集できない
  • HTML・CSSを完全に完成させてからでないと動的部分に手をつけられない
  • コンテンツは全てCMSの管理下に置くものだ
  • 管理画面・投稿画面は配置が決まっているものだ

大規模な案件を経験するとわかってくることですが、デザイン性が高く、かつクライアントが更新する可能性がほぼないコンテンツを無理にCMSの管理下に置く必要はありません。
ぶっちゃけ、ウェブページテンプレートなんぞなくてもいいのです。
むしろ今後更新依頼をもらえる余地を残しといた方が(ry

一般のブログ的なCMSは、これら静的コンテンツを動的コンテンツと切り分けるのが難しくなっていますが、a-blog cmsは特に意識しなくても、同時にオーサリングソフトで一括管理することが可能です。
（実際、私の本サイトのうち「About」と「Work」は普通の静的コンテンツです）

また、a-blog cmsは投稿画面も制作できるため、いかに更新担当者が作業しやすくするかを考えることで、「インフォメーションアーキテクト」や「アクセシビリティ」に対する意識も持つことができます。
これらは、今後のWEBデザイナー・コーダーに必須のスキルになっていくと思います。

プログラマはCMSに対する考え方が異なるので、彼らが加わるとまた事情が変わってきますが、少なくともプログラマがいない制作会社／プログラマが必要ない案件のワークフローを激変させる可能性を、a-blog cmsは持っているのです。

クライアント側の意識

私のように制作会社から協業依頼を請ける場合、はじめからMovableTypeに決まっている案件がひじょうに多いです。
クライアントが以下のような固定意識を持ってしまっているパターンも散見されます。

  • MovableType以外のCMSを知らない
  • 管理画面の配置が公開サイトと違う＝CMSとはそういうものだ
  • MovableTypeとかいうのが有名だし実績も多いからとりあえずこれを採用すれば無難だ

もちろんMovableTypeは拡張性が高く安定した、良いシステムです。
管理画面の編集も可能です（a-blog cmsほど直感的でないですが）。
ですが、提案する側が「MTを前提としたディレクション」を行ってしまうのは、カスタマイズを扱う私としては、あまり良い傾向とは思えません。
更新手順が複雑になってしまっては意味がないです。

MTと同様に拡張性が高く、かつ設計思想が異なるa-blog cmsを選択肢に挙げることは、クライアントの意識を変えられる可能性もあるのです。

CSS Nite LP6に参加する前から、何らかの国産CMSをMovableType・WordPressと同様にサポートしようと検討してきましたが、私のお仕事の傾向もあって、最終的に、a-blog cmsがメインとなりました。

a-blog cmsは、制作会社とクライアントを「成長させる」CMSです。

a-blog cmsを触ってみてください。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2009/12/ablogcms_120.html/feed 2 個人利用フリーになったa-blog cmsは、現場にじわじわ効いてくる http://blog.webbingstudio.com/2009/10/ablogcms_free.html http://blog.webbingstudio.com/2009/10/ablogcms_free.html#comments Sun, 11 Oct 2009 11:08:04 +0000 WebbingStudio http://blog.webbingstudio.com/?p=1129 ablogcms_one

個人の非商用に限り、a-blog cms は無料でご利用頂ける事になりました | a-blog cms

これまで30日間限定の試用までしかできなかったa-blog cmsが、個人非商用であれば自由にダウンロード・利用できるようになりました。
評判がいいらしいけど、忙しくて30日じゃ検証しきれない…と思っていた方、とりあえず趣味で使ってみたいんですが、という方は是非お試しを。

ちなみに私は、30日間の試用期間ではほとんどいじれなくて結局ライセンス取っちゃいましたwちきしょうめwww

今回のアップルップルさんの英断を、私は金銭面とは違うところでとても期待しています。
私が把握している範囲では、a-blog cmsというのは「じわじわ良さがわかってくる」CMSであるからです。

a-blog cmsは「Web制作者のためのCMS」と銘打たれています。
特にアピールされているテンプレート仕様や、投稿画面もカスタマイズできる点などを見ると、なるほどと思います。

ですが、スキルがあればなんでもありになりつつあるMovableTypeやWordPress、やたら構築方法がわかりやすいSOY CMSと比べると、「何がどういいのか」をなかなか一言で説明できない面があります。

その「じわじわくる良さ」の例をひとつ。

二人以上のチームを組んでお仕事をしている制作会社は多いと思います。
大規模なCMS構築の場合、制作を始める段階でテンプレートの構成等をきちんと書類化して、擦り合わせをしてから始めるのですが、諸々の事情で、かなりの確率で途中変更が入ります。

そのひとつ、
「特定のカテゴリーの記事を書いたときだけHTMLの構造を変えたい」
という話になり、その構造を変える範囲が広い場合。

CMSがMovable Typeの場合で、ディレクターがコーダーにどう指示を出すかを考えてみました。

個別エントリーのテンプレートに条件分岐追加して、○○のカテゴリーのとき、構成が変わるようにして。ソースが長くなりそうだったらモジュール化して。できたら再構築かけて、画像とか、ちゃんとつながってるかチェックしてね。

意味がわかんねえよという人すみません…
MovableTypeは専門用語多いんで…＠＠；

これが、a-blog cmsだった場合、たぶんこうなります。

「aaa.html」を元にして、同じ階層に構成の違う「bbb.html」を作って。独自タグはaaa.htmlに書いてあるの参考にしてね。putしたら教えてくれる？

どこが違っているかわかるでしょうか。

まず「条件分岐」について全く触れていません。
a-blog cmsには「ルール」という機能があり、特定の条件下で表示するテンプレートを、管理画面側でごっそり変えてしまえるのです。
（もちろん、変わる箇所が少ない場合は他のCMSと同様のテンプレート内条件分岐が使えます）
なので、コーダーにテンプレートさえアップしてもらえば、あとはディレクターが管理画面に入って
「カテゴリーが○○のとき」「bbb.htmlをテンプレートに使用する」
という設定を追加するだけなのです。

もう一点が
「画像のリンク切れについて触れていない」のと
「putしてと指示している」ことです。

Dreamweaverでは、FTP等を使ってサーバーにファイルをアップすることを「PUT」と呼びます（コマンドラインと同じですね）。

「PUT」は、SOY CMSのカスタマイズ解説のときにも触れましたが、サーバーとローカルの構造を同じに保ったままファイルをアップします。
なので、実際のサイトルートとは違う箇所にテンプレートをアップしなければならない一般のCMSでは「PUT」を使うことができません。
テンプレートができたらドラッグか他のFTPソフトでアップして画像やリンクが切れてないかチェック…となるわけです。

ですが、a-blog cmsはいろいろなところで紹介されている通り、画像やJavaScriptも含め、全てのサイト構造を崩さないままテンプレート化できます。
なので、Dreamweaverのサイト設定時に
「サイトのルート＝a-blog cmsのテンプレートを置くディレクトリ」
とすれば、あとは画像のチェックもほとんど必要なく、更新しては保存→PUT（自動化してもいいかもしれないです）でサクサク進められるのです。

私のようにひとりで作業するのであれば、自分の中でワークフローが確定していればいい訳ですが、多人数の場合は意思の疎通が大変です。
それを大幅に軽減できる可能性があるというのが、a-blog cmsのすごいところであり、なかなか他の人に説明しようとしたとき、わかってもらえないところです。

とにかく皆さん、なんか作ってみてください。
放置サイトがあるなら、それを動的化してみるだけでもいいと思います。

「もう、MTでいいじゃん」というjunnamaさんの名言があります。
まあそれも確かに正論ですが、
「これでいいのか？」
「もっと良い作業の進め方があるのでは？」
「この案件には別のCMSの方が良くね？」
と考える機会を持つことが、この流れの速い業界では必要なことと思います。
いいじゃんなどと言っていいのは、junnamaさんのようにそのCMSにどっぷり浸かる覚悟がある人だけです。

ablog_manual

a-blog cmsは、「用語の統一」が徹底している点も評価できると思います。
マニュアルインデックスを見ると、ほとんどの主要な独自タグにタグ名と口語名が併記されています。

CMSの細かいところについて、人にメールや口頭で説明するのはなかなか難しいものです。
こういった地味でも重要なポイントが、今回のoneライセンス自由化でもっと評価されてほしいと思います。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2009/10/ablogcms_free.html/feed 3 UNIQLO CALENDAR http://blog.webbingstudio.com/2009/06/uniqlo-calendar.html http://blog.webbingstudio.com/2009/06/uniqlo-calendar.html#comments Wed, 10 Jun 2009 07:47:08 +0000 WebbingStudio http://blog.webbingstudio.com/?p=649

UNIQLO CALENDAR

ユニクロがリリースするFlash作品は、いつもすてき。

デザイン感覚も素晴らしいけど、リアルタイムの概念を持ったものを最小限のパフォーマンスで表現するというのは、Flashではとても難しいこと。
このカレンダーの場合、画質をわざと落とすことで、ジオラマやシミュレーションゲームを見てるようなチープ感を出しつつファイルサイズも抑えてます。楽しさだけ伝えるなら、画質って意外と問題にならないのね。

本サイトをクリックしたときの展開も衝撃過ぎる。これはフルスクリーンで見るべき。

札幌は？札幌は？wktk

はてブではこの人の作品ではないかって言われてますね。
いろいろなところで取り上げられてるそうなので間違いないかも。後でYoutubeの作品もじっくり観よう。

写真家の本城直季氏が写真を連続撮影→動画化というのが有力ぽい。
音楽の制作元はサイト内に書いてあるのに、動画を作った人の名前がない…気になるなー


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2009/06/uniqlo-calendar.html/feed 0 ナナドラ＝セブンスドラゴン公式サイトの良いところ http://blog.webbingstudio.com/2009/04/%e3%83%8a%e3%83%8a%e3%83%89%e3%83%a9%ef%bc%9d%e3%82%bb%e3%83%96%e3%83%b3%e3%82%b9%e3%83%89%e3%83%a9%e3%82%b4%e3%83%b3%e5%85%ac%e5%bc%8f%e3%82%b5%e3%82%a4%e3%83%88.html http://blog.webbingstudio.com/2009/04/%e3%83%8a%e3%83%8a%e3%83%89%e3%83%a9%ef%bc%9d%e3%82%bb%e3%83%96%e3%83%b3%e3%82%b9%e3%83%89%e3%83%a9%e3%82%b4%e3%83%b3%e5%85%ac%e5%bc%8f%e3%82%b5%e3%82%a4%e3%83%88.html#comments Wed, 01 Apr 2009 16:31:18 +0000 WebbingStudio http://blog.webbingstudio.com/?p=472

新納一哉も「世界樹の迷宮」も全然知らんのに、
「セブンスドラゴン」を買いました。

いやー戦闘が早い早い。
Aボタン押しまくり。
フロワロ踏んづけまくり。
キャラもほわほわしてかわいい。

最近は積みゲーが増える一方だったのですが、これはなんとかクリアできそうな気がします。

このゲーム、モタさんのイラストもかわいいですが
公式サイトがかなり興味深いです。

http://dragon.sega.jp/

Flashバリバリか、一枚絵をテーブルに貼りつけただけのゲームサイトも未だ見かける中、細かいところで工夫されていると思いました。
今後の仕事の参考になるかもしれないので挙げてみます。

ロードが早い

最初にアクセスして驚いたのがロードの早さ。トップページの表示には5秒もかからない。
無駄なBGMを流さなかったり、ちびキャラを一度に三人までしか表示させなかったりすることで、トータルサイズをできるだけ切り詰めているようです。

Flashのミニゲーム「ちびキャラTalk」も、cookieでフラグを保存するくらいで、そんなにメモリを食いそうにないですし。

CSSとFlashの共存

サイトの上半分が画像になっていて、一見フルFlashのサイトにも見えるのですが、ちびキャラTalkと動画部分以外はほぼCSSレイアウトです。
↓このページにアクセスして、CSSを切ってみればわかります。

http://dragon.sega.jp/character/princess_02.html

FlashとCSSを有効に使うことで、トップ以外も快適に見ることができます。
ヘビーゲーマーにはWeb慣れしていて、Flash表示を拒否している人もいますからね。

キーワードリンク

link

さっきのキャラ紹介のページ、何箇所かにリンクが貼ってあります。

ここをクリックすると、「世界観＞各キーワード」のページにジャンプします。
専門用語が多いゲームなので、世界観の紹介を読まずにこのページを訪問してしまった人が混乱しないような配慮がされています。

素材の配布

vanessa

ダウンロードページでは、壁紙の他にもキャラの公式イラストを多数配布しています。

これをやってるサイトは最近多いですが、高解像度の透過PNGで配布しているのは太っ腹ですね。二次加工可ですか。

ブログなどを通した、Webの情報拡散を見越しているのでしょうか。

chara

ツンデレヒーラーとヤンデレプリンセスw

べ、別にアンタを助けたつもりじゃないんだからねっ！
アンタが倒れると、アタシが困るんだからっ！

キャラ紹介コンテンツの役割

このサイトは、「ちびキャラTalk」だけでなく、「キャラクター」のコンテンツでも、各キャラクターにまつわるバックグラウンドストーリーがいろいろ仕込まれてます。

実はこれは、本編とは全然関係ありません。
本編はあくまでキャラ達が結成する「ギルド」が織りなす群像劇であって、キャラたちには名前どころか個性もないのです。

こうやってキャラを紹介することで
「自分でキャラに物語を与えて楽しむ」
という、往年のDQ3やWizardlyのようなプレイスタイルを提示しているのですが、
キャラの名前を考えるのが面倒な人や、キャラに個性がないと面白さが感じられない人は、公式サイトのバックグラウンドをそのまま利用することもできるわけです。

つまり、自由度が高いが故の弱点を、公式サイトが補っているのです。
ウェブサイトが、単なるマーケティングの一手法ではなくなっている。
これは素晴らしい。

あ、ちなみに私はキャラ名は全て「ちびキャラTalk」から拝借してます。
公式の名前なら、ゲーム中の固定キャラと名前がかぶってしまう心配がないw

そんなわけで、毎日ちびキャラTalkしに通っているうちに、本体を買ってしまった次第です。

ゲーム的には「世界樹の焼き回し」とか「おつかいゲー」とか酷評する向きもあるみたいですが、私のような
「あんなにRPG大好きだったのに、クリアもできない；；もう歳なのね；；」
というライトユーザーにはちょうどいいゲームです。

しかし、肝心のちびキャラTalk、15日くらい同じキャラに話しかけてるのに、未だに新しいセリフが出続けます…
こっちの方がやりこみ要素高いんじゃないのかw


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2009/04/%e3%83%8a%e3%83%8a%e3%83%89%e3%83%a9%ef%bc%9d%e3%82%bb%e3%83%96%e3%83%b3%e3%82%b9%e3%83%89%e3%83%a9%e3%82%b4%e3%83%b3%e5%85%ac%e5%bc%8f%e3%82%b5%e3%82%a4%e3%83%88.html/feed 3 デザイナーにおすすめのFirefoxテーマ「Full Flat 3.0」 http://blog.webbingstudio.com/2009/02/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e3%81%ab%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%81%aefirefox%e3%83%86%e3%83%bc%e3%83%9e%e3%80%8cfull-flat-30%e3%80%8d.html http://blog.webbingstudio.com/2009/02/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e3%81%ab%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%81%aefirefox%e3%83%86%e3%83%bc%e3%83%9e%e3%80%8cfull-flat-30%e3%80%8d.html#comments Mon, 16 Feb 2009 11:42:13 +0000 WebbingStudio http://blog.webbingstudio.com/?p=267

2009.8.6追記：
Firefox3.5以降では使用できなくなってしまいました…残念です；；

fullflat

「Full Flat 3.0」
というFirefoxテーマを愛用しています。

シンプルなFirefoxテーマは多々ありますが、これはその中でも究極の存在。Windowsクラシックスタイルのベースカラーとグレーの線描だけで、全てのパーツが作られています。

シンプルモダン萌えにはたまらない仕様です。

fullflat2

ベースカラーをアイボリー、メニューカラーをグリーンにカスタマイズして、こんな感じで利用してます。
目が疲れず、コーディングやデザインの邪魔になりません。

特に私の場合、Firebugでブラウザを通してコーディングプレビューをすることも多いので、とても重宝しています。
…最初のうちはシンプルすぎて、ボタンの押し間違いとか多発してましたけどね（笑）

fullflat3

オプション・アドオンのアイコンワークにも、ぬかりがありません。
線描だけでこんなに多彩な表現ができるものなのかと、感動してしまいます。

Windows・Linux向けで、MacOSには非対応です。
（作者様曰く、MacOSにはもっと合うテーマを用意したいからだとか…確かにMacには合わなそうw）
黒背景向けのブラックバージョンもありますが、やはり実用性のあるホワイトバージョンをお勧めします。

できれば、Sageアイコンも作ってほしいなー。
これだけカラーで浮いているので。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2009/02/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e3%81%ab%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%81%aefirefox%e3%83%86%e3%83%bc%e3%83%9e%e3%80%8cfull-flat-30%e3%80%8d.html/feed 0 iPhoneを買って三日 http://blog.webbingstudio.com/2009/02/iphone%e3%82%92%e8%b2%b7%e3%81%a3%e3%81%a6%e4%b8%89%e6%97%a5.html http://blog.webbingstudio.com/2009/02/iphone%e3%82%92%e8%b2%b7%e3%81%a3%e3%81%a6%e4%b8%89%e6%97%a5.html#comments Tue, 03 Feb 2009 19:39:40 +0000 WebbingStudio http://blog.webbingstudio.com/?p=223 photo

そんなわけで、購入しました。
iPhone 3G – 16GBブラックです。

今のところただのiPodと化してますが、音質が良くてたっぷり入るから、とても快適。
手持ち曲にピアノジャズやゲームのサントラなど長い曲が多いので、携帯では全然持ち歩けなかったのです。

さて、予想通りiPhoneに切り替えることでいろいろめんどくさいことになりました。

家族や友人にメアドが変わることを連絡するのは普通の携帯と同じですが、
「ソフトバンク以外の絵文字は読めない」ということをメールに書き添えなきゃなりません。

「iPhoneにしたんで、」

などとメールを打っていると、遠まわしに自慢してるみたいで嫌だし。
リア充＋若いほどiPhoneを持ってないというのはよくわかります。私は友達少ないから安心。アハ★

docomoを抜けたので、ファミ割MAXの対象外で家族にも迷惑がかかっちゃうし、
姉や妹が穏やかなココロのときに使ってくるemoji1も、もう見られません。

携帯サイトなんか見なくてもいいよって思ってたら、美容院のサイトが携帯専用だったのでWeb予約ができなくなっちゃいました。

じゃあなんでiPhone買ったんだｺﾞﾙｱ（ﾟДﾟ#

と、下記の証拠画像を突き付けられて尋問されたら困ってしまいますが、

kyouminee

まぁ、単純にツールとして気に入ったからです…
刑事さん勘弁して下さいよ～。

私は必須でないものを買うときに

  1. その環境がマジョリティであるか
  2. 金銭と便利さのバランス
  3. 発展性
  4. 補償、バージョンアップ
  5. メンテナンスの手間と便利さのバランス

という感じで判断しています。
WordPressをお仕事に導入した時も、この基準でした。
（対象によっては優先順位が違うこともあります）

この半年、twitterでギークの皆さんの使い方を観察して、iPhoneはそれらを満たしたと考えています。
iPhoneにはいろいろな使い道がありますから、生活を便利にするツールとして気長に付き合っていこうと思います。

余談ですが、
上記の判断基準で行くと「服」「バッグ」「化粧品」の優先度がやたら低くなります。
だって、1以外満たしてないもん。

こうして私はますますひきこもりになっていくのでした。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2009/02/iphone%e3%82%92%e8%b2%b7%e3%81%a3%e3%81%a6%e4%b8%89%e6%97%a5.html/feed 0 RPGのボス曲に詳しい人教えて´・ω・） http://blog.webbingstudio.com/2009/01/rpg%e3%81%ae%e3%83%9c%e3%82%b9%e6%9b%b2.html http://blog.webbingstudio.com/2009/01/rpg%e3%81%ae%e3%83%9c%e3%82%b9%e6%9b%b2.html#comments Thu, 29 Jan 2009 21:51:19 +0000 WebbingStudio http://blog.webbingstudio.com/?p=219 集中できるので、お仕事中はスクウェア関係のRPGの曲をよく聴いています。

ノビヨ・イトケン・下村さんのサントラをいろいろと持っていますが、流石に全部は買えないわけで…
耳コピとかのお世話になったりします。すみませんすみません。

で、最近気になって気になってしょうがない曲があります。

テンションを上げたい人の為のボス戦神曲メドレー – にこ☆さうんど＃

↑これの55:40からの曲なんだけど…
「ヤッパーパヤー」みたいな合唱に合わせて、ソウルフルな女性歌手がとイタリア語？の歌を熱唱しているのです。
♪ラー　テースター　ミーヤー♪

「片翼の天使（セフィロス戦）」を初めて聴いた時も笑ってしまって危うく全滅するところだったけど（もう慣れたが）、この迫力はそれ以上。
バトル以前に仕事にならんwww

上の説明で、ファンの人はわかるかもしれないね。FFの9以降かトライエース系かな？
モヤモヤしてしょうがないので、知っている人教えてください。

52:30辺りの曲も、聴いたことがある気がするけど思い出せません。
サガフロ2？じゃないよね…

ちなみに、このメドレーの最初の曲が私のいちばん好きなバトル音楽。

Battle #4：伊藤賢治　　iTunesでも試聴できます

SaGa Frontierの、ブルー編・時の君戦などに使用されてます。
イトケンの「やり過ぎ感」がピークに達した頃の、屈指の名曲であります。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2009/01/rpg%e3%81%ae%e3%83%9c%e3%82%b9%e6%9b%b2.html/feed 0