エスカフラーチェ ブログ

エスカフラーチェのスタッフが日々のニュースや技術・デザインの話をお届けします。RSS フィード

解散のお知らせ

皆様、こんにちは。

今回は大事なお知らせがあります。

この度、諸般の事情により、エスカフラーチェLLCを解散することとなりました。
エスカフラーチェに期待をお寄せいただいておりました皆様には誠に申し訳ございません。

お世話になりました皆様には、本当に心から感謝を申し上げます。
また、突然の解散でご迷惑をおかけしますことを深くお詫び申し上げます。

エスカフラーチェは大日田と山田の二人によるとても小さな会社ではありましたが、多くの皆様にお世話になり、3年半の間楽しく会社を運営することができました。

会社組織としては解散となりますが、これまでの経験や培ってきたものを活かし、また新たなことにも挑戦しながら、皆様のお役に立てるよう頑張っていきたいと気持ちを新たにしております。

今後とも山田および大日田をよろしくお願い申し上げます。

とりいそぎ解散のご報告をさせていただきました。
突然のお知らせとなり申し訳ございません。

大日田貴司 山田あかね

--

本件についてご質問などございましたら、こちらのお問い合わせフォームよりお願い申し上げます。

大日田のブログでも今回の解散について個人的な思いを書いております。よろしければあわせてご覧ください。
solvalou.net - エスカフラーチェ解散について

CSS Nite LP9 & 第2回コーディングコンテストレポート

CSS Nite LP, Disk 9「Coder's Higher」

2010年4月17日(土曜日)にCSS Nite LP, Disk 9「Coder's Higher」が開催され、同時開催のピクセルグリッドさん主催「コーディングコンテスト」の審査員として参加してきました。

最優秀賞なしとなってしまったものの、レベルの高い作品が集まったコンテスト

審査員の益子さんも記事を書いていらっしゃいましたが、審査員ごとにどの点を重視するかがちがったためかなり票が割れました。

私が評価させていただいたポイントなど

これから現場で困るだろうHTML5+CSS3の技術を先取りして実装してみることで問題点を洗い出し知識として共有する。

この機会を利用してこれからのスタンダードを業界に示す。

今回のコンテストはこのような目的があったため、HTML5の新しい要素を効果的に使っているか、CSS3のプロパティを活用しているかを最重要視し、そのほかのブラウザへの対策については重要度を下げて審査させていただきました。

ちなみに益子さんは対象外ブラウザ(IE 6、7、8など)への対応を、ひとつの足切り基準としました。とのことです。

まず、コードを見ることなくCSS3へのチャレンジ度をはかるひとつの目安として考えたのが、「画像ディレクトリの中身」です。

課題サイトのデザインは、基本的に画像を利用しなくてもCSSだけで再現できる背景になっていましたので、グラデーションを再現できるプロパティ-moz-linear-gradient-webkit-gradientで)などを積極的に利用することで画像数を必要最小限にすることができます。すなわちCSS3を積極的に利用しているひとつの目安となります。

また、HTML5の新要素へのチャレンジ度・適切な意味の場所に適切な要素が使われているか・アウトライン設計は妥当か、などを中心に拝見しました。

私が選ばせていただいたのは・・・(応募順に)

  • フランクリーさん
  • milkmixさん
  • 小林信次さん
  • 渕上伸吾さん
  • 嶋田保則さん
  • Shoon_Miyamotoさん
    • 上の6名の方々と・・そしてあまりにもマニアックで目に止まった3作品:

      • XMLで書いていらっしゃった原田直貴さん
      • SVGで書いていらっしゃったHitoyamさん
      • 表示高速化(リクエスト数最小化)の究極を実現、画像もCSSもスクリプトも何もかもひとつのHTMLにしていらっしゃった岡部和昌さん

      以上の皆様を推薦させていただきました。

      どの作品も作者さんの考えが伝わってくるものが多く、審査を通してとても勉強になりました。ありがとうございます。

      今回のセミナーでは審査発表のみとなりましたが、再演版の CSS Nite LP Disk9.2(reprise)ではコーディングコンテストの解説もおこなう予定です。前回参加できなかった方は是非お申し込みしてみてください!

「サイボウズ Live を活用した Web 制作プロジェクト」イベントに出演しました

2010年3月9日、Apple Store, Shibuya にて「サイボウズ Live を活用した Web 制作プロジェクト」イベントに出演しました。当日は東京にも雪が降るくらいの寒い日でしたが、たくさんの方々にお越しいただくことができました。

サイボウズ Live のプロモーションサイトの制作時に、サイボウズ Live を活用してやりとりを行いました。主にその時の具体的な使い方・プロジェクト成功についてのポイントなどについて講演させていただきました。

▲なんか行間がおかしいところがあるようですが気にしないでください><;サイボウズ Live を活用した Web 制作プロジェクト by Slideshare

私が考える「成功するプロジェクト」

  • (Web 制作の場合)受注側と発注側が共にゴールを認識しているプロジェクト
  • 限られた予算とスケジュールでも、相互納得の上でタスクが決められ、実行できるプロジェクト
  • 設定した目標を達成するなど、結果をだせるプロジェクト
  • プロジェクトメンバー同士が「やってよかった!」と思えるプロジェクト(→その時の嬉しい気持ちが次の行動をおこす原動力となり、良い循環が生まれるきっかけにもなる)

Web 制作プロジェクトにおいて、Web に直接触るエンドユーザーさんの喜びをイメージして制作するのはもちろんだと思いますが、何よりも制作過程においてメンバーそれぞれがゴールへ向かう意識、それぞれのポジションの役割を果たすことが大切と考えています。

やってよかった!と思えるプロジェクトは、関わる人達にとって心の栄養になりますし、メンバーが常に心地よい状態を保てていると、次にもっと良いアイデアを出そうという気持ちにもなっていきます(行動に結びつきます)。

これはクライアントワークに限らず、社内や何らかの目的を持ったサークルでも同じではないでしょうか。

サイボウズ Live などのツールは、プロジェクトメンバー同士が単に情報交換をしやすくするというだけでなく、コミュニケーションロスを最小限にして、お互いに理解しあうことを促進できるツールだと思います。

規模にあわせて上手に活用していくことでプロジェクト成功に結びつけることができるようになると思います。

サイボウズ Live の担当者さんはサービス愛たっぷりでエネルギッシュ!

今回出演させていただいて嬉しかったのは、サイボウズ Live の担当者さんはとってもエネルギッシュで、サイボウズ Live への愛情をたっぷり感じ取ることができたところです。

成功するサービス(ビジネス)に共通しているところは、何よりも作り手、売り手の人が心からサービス(商品)を愛して楽しく使っている姿が伝わってくるサービスだと思っています(私はそういうところをすごく大切にしてしまうのですが)。

真摯に機能追加などの要望に対応していらっしゃったりして、今後どうなっていくか楽しみなサービスのひとつになりました。

CSS Nite LP9 連動 第2回コーディングコンテストの審査員をつとめます

CSS Nite LP, Disk 9「Coder's Higher」

きたる2010年4月17日(土曜日)にCSS Nite LP, Disk 9「Coder's Higher」が開催されます。

そして同時に、ピクセルグリッドさん主催「コーディングコンテスト」が開催されることになりました。

今回私は審査員として参加させていただくことになりましたのでお知らせします。

HTML5+CSS3の技術を先取り実装してみる楽しいコーディング

今回のコンテストはHTML5+CSS3にチャレンジできる、とっても楽しい内容になっています。対応ブラウザはFirefox3.6, Safari4。これなら普段の制作で強いられるような表示の違いについて悩む時間をかけることなく、思う存分美しく素敵な要素やプロパティを華麗に使うことができますよね!日頃HTMLとかCSSを愛でている人にとっては興奮する内容ではないでしょうか!!

コーディング課題は、Movable Type 5 の紹介ページとなっています。デザインカンプをみるだけで「ああ〜ここのシャドウ♪」「きゃぁ〜このグラデーション☆」などと頭の中がプロパティでいっぱいになりますので(?)コーディング大好きな方は是非応募してみてはいかがでしょうか。

▼この機会ですし、画像を使わずに、大げさにコーディング愛を伝えておきます。
※ただしイケメンFirefox3.6以上、Safari4とかChromeに限る

サイボウズLiveのイベントにゲスト出演します(2010/3/9 19:00〜20:00 Apple Store Shibuya )

2010年3月9日(火曜日)19:00〜 Apple Storeで 「サイボウズLive」を使ったWeb制作プロジェクトの進め方 イベントにゲスト出演します。

cybozulive.png

今回、サイボウズLiveのプロモーションサイトのデザインを担当させていただき、実際にサイボウズLiveを活用して制作にとりかかりました。

※制作段階のやりとりではメールを一切使わず、サイボウズLiveのみを利用してやりとりを行っています。

企業内でサイボウズを導入されている方はなじみやすいと思います。

また、納品データのアップロードや、デザインデータの途中段階の確認などもサービス内で完結してしまいます。

ほかにも、トピックを分けて議論ができるため、制作に関わらずサークルや勉強会などでもじゅうぶん活用しやすいサービスだと思います。

このような事例のご紹介をさせていただくため、Apple Store Shibuya のイベントにてゲスト出演することになりました。

興味のある方は是非お越しください。

2010年3月9日(火) 19:0020:00
「サイボウズLive」を使ったWeb制作プロジェクトの進め方
at Apple Store, Shibuya

複数のグループで情報共有できる無料コラボレーションツール「サイボウズLive」を使った、Web制作プロジェクトの進め方をご提案します。制作会社エスカフラーチェの山田あかね氏をゲストに迎え、Web制作現場での実際の活用事例を中心にご紹介。ご参加の方には、サイボウズLiveの招待状をプレゼントします

POINT OF VIEW #1 コンセプトからのビジュアルデザイン開発勉強会 開催します

POINT OF VIEW #1

告知が遅くなりましたが、きたる12/7(月)19:00から、POINT OF VIEW #1 コンセプトからのビジュアルデザイン開発勉強会 を開催します。

参加費は無料です。興味のある方は是非ご参加ください!

※勉強会終了後、懇親会(3,500円程度実費)を開催予定です。

POINT OF VIEW #0 デザインプロセス勉強会レポート

去る10/30(金)、POINT OF VIEW #0 デザインプロセス勉強会を開催し、30名の皆様にご参加いただき、以下のようなトピックで進めてまいりました。

概要

デザインの構想から完成まで。
デザイナーがどのような工程を経ているのか?何を大切にしているのか? というようなことを、経験をもとに共有しあい、理解を深めていきます。

勉強会の内容

主に以下のような内容で進行しました。

  1. nanapi のデザインプロセスブログ記事(その1その2)をとりあげ、軽く振り返る
  2. 事前アンケートより、関心が高いトピックについて意見を出し合う

関心の高かったトピック

  • クライアントとのコミュニケーション
  • コンセプトの決め方
  • ユーザー調査・分析・ペルソナシナリオ手法
  • サイト構造の設計
  • ワイヤーフレームの意義と使い方
  • レイアウト設計
  • ビジュアルの起こし方

ディスカッションを振り返って・・・

関心の高かったトピックのうち、「クライアントとのコミュニケーション」「コンセプトの決め方」「ユーザ調査・分析・ペルソナシナリオ手法」の部分について、制作の現場ではどのようにやっているのかということを中心に意見を出し合いました。

クライアントに提案を行う際に「(サイトができたとして)5年後に何をしたいですか?という質問で、本当の目的が見える」(5年後のビジョンの共有)という意見など、自分のやり方以外のお話をいろいろ知ることができて参考になりました。

反省点など

第0回ということで試験的に、手探りにはじめてみましたが、とくに勉強会の進行についてとても学びが多いものでした。当日の進行においては不慣れなためにあまり上手にできず申し訳なく思います。また、メールやTwitterなどでご意見をいただいた方、ありがとうございます。この場を借りてお礼申し上げます!

  • デザイナー・ディレクター・プログラマーといった役割が見えにくいまま幅の広い(どちらかというとディレクション寄り)話題を中心に進めてしまい、結果的にデザイナー視点がぼやけてしまった
  • デザインプロセスの前段階・前提となるコミュニケーションについての話が大きくなってしまい、デザインプロセスになかなか踏み込むことができなかった
  • 30人で座談会のような形式にしたため、人によっては発言をしづらい状況をつくってしまった

次回以降の課題

  • 人数を減らして発言しやすくするか、あらかじめ決めたテーマについてグループワークの上で発表してもらうスタイルにする
  • 発言時に普段の役割が見えやすいように名札もしくはその場で見えるポジションペーパーなどを作成する
  • テーマを広げすぎない ... 次回はもっと狭いテーマで、「ビジュアルデザインの起こし方」にフォーカスする予定です。

ブログ・Twitter でのレポート

当日、ハッシュタグについて何も触れないままホワイトボードに書いていただけなのに活用いただき、ありがとうございます。今後発信の際には活用していきたいと思います!

※レポートの際に、トラックバックでお知らせいただけると嬉しいです。

Twitter APIの417 Expectation Failed対策

オオヒダです。最近Twitterのおもしろさがわかってきました。おそい。
というわけで、今回はTwitter APIを使っていてちょっと気づいたことについて書いてみたいと思います。

TwitterAPIを利用してつぶやきを投稿するとき、"417 Expectation Failed"というレスポンスが返ってきてしまい、投稿を行えないということがたまにありました。
うーんこれは困る・・・ということで、調査してみました。

そもそも417 Expectation Failedとは何か?ということですが、これを理解するには100 Continueというレスポンスについてあわせて知っておく必要があります。

クライアントからサーバに対して大きなリクエストを送る場合、HTTP1.1ではまずそのリクエストが受け入れ可能かどうかをサーバに問い合わせることができます。この際、受け入れ可能であることを示す一時的なレスポンスというのが100 Continueとなります。

ただしサーバによっては100に対応していない場合があり、そのためにクライアントはExcept: 100-continueというヘッダをリクエストに含める必要があります。
そしてサーバが100に対応していないことを示すレスポンスというのが、417 Exceptation Failedとなります。

つまり、Twitterのサーバに対して100を要求しているけど、Twitterのサーバがそれに対応していないため、417が返ってきているのだ!ということが、なんとなくわかりました。

そこで解決策としては、リクエストから該当のヘッダ(Except: 100-continue)を消してみればいいのでは、ということになります。
通信の実装方法によって制御の方法も様々かと思いますが、ここではtubuclipで利用しているtwitteroauthというPHP用のライブラリの場合で考えてみます。

twitteroauthでは、実際の通信部分にはcurl(cURLモジュール)が用いられていす。
curlでは、リクエストボディの長さが1024バイトを超える場合、自動的に100-continueが送信されるようです。100-continueを送信しないようにするには、curl_setopt()関数でExpectヘッダを抑制します。
→ curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:'));

今回は以下のようにソースコードに1行追加しました。

twitteroauth/twitterOAuth.php

function http($url, $post_data = null) {/*{{{*/
  $ch = curl_init();
  if (defined("CURL_CA_BUNDLE_PATH")) curl_setopt($ch, CURLOPT_CAINFO, CURL_CA_BUNDLE_PATH);
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
  curl_setopt($ch, CURLOPT_TIMEOUT, 30);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+ curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:'));

とりあえずこのようにしてから、問題の現象が生じることがなくなりました。めでたしめでたし。

※今回はTwitter用ライブラリに対しての修正なので問題ありませんが、curl設定の影響範囲については注意が必要です。

ちなみに、なぜ現象が毎回でなくたまに生じていたのかということですが、これは文字列の長さが原因だと思われます。
上述の通り、curlでPOSTを行う際、ポスト内容が1,024文字を超えると100-continueを利用しようとします。ですので、つぶやきの文字数が長い場合に、curlが100をつけて送信、結果として417が返ってくる という流れになっていたものと考えられます。
(つぶやき自体は140文字までと短いですが、APIを扱うための情報やエンコードされたつぶやきの文字数を合わせると実際のポスト内容はけっこう長くなります)

というわけでTwitter APIで417レスポンスが返ってきてしまう場合の対応方法についてのメモでした。なお、この問題は2008年12月のTwitterサーバ仕様変更時から発生している可能性がありますので、いまさらなネタかも知れません。
以前書くと言っていたtubuclipにまつわる話についてはまた次回書きたいと思います。

参考:
[Studying HTTP] HTTP Status Code - 100 Continue
http://www.studyinghttp.net/status_code#Code100

デザインプロセスについての勉強会を開催します!

povcc_banner.png

少し前にnanapiのデザインプロセス その1その2と書いた際に勉強会をやってみたいと募ったところ反響をいただき、少しずつ準備をすすめていましたがようやく告知できるようになりました。
すでに参加したいとおっしゃっていただいた方、お待たせしてすみません!

せっかくなので単発の勉強会という感じではなく、これをきっかけに月1回くらいのペースで開催できたらいいなと考えていました。

そこで今回、POINT OF VIEWという企画を立ち上げることにしました。Web制作やサービス開発などについて、デザイナーの視点から考え、 学んでいくことを目的として、勉強会やイベントなどを開催したいと考えています。

というわけで「POINT OF VIEW #0 デザインプロセス」としてデザインプロセスについての勉強会を行いたいと思います。デザイン制作のプロセスをテーマとし、考え方や仕事の進め方などの情報交換をする勉強会になります。楽しくて役に立つ勉強会にできたらと思っています。

もしご興味がありましたら、POINT OF VIEWのサイトから参加お申し込みしていただけますので是非どうぞ!詳細もこちらに記載しています。

今まで個人的に、デザインプロセスについて話をしたり聞いたりする機会があまりなかったので、とても楽しみにしています!よろしければ、ぜひご一緒に勉強しましょう。

勉強会のお申し込み・お問い合わせはお気軽にどうぞ!

「つぶくりっぷ」をリリースしました

オオヒダです。

本日「つぶくりっぷ」というTwitter関連のアプリケーションをリリースしました。
http://tubuclip.com/
tubuclip_ss.png

個人でリリースしたものなのですが、僕のブログが今ちょっとみれないのと、会社で開発しているサービスの実験をかねてつくったものということもあり、こちらで書かせてもらっています。

サービスの概要としてはとてもシンプルで、TwitterのつぶやきからURLが含まれているものを抽出して表示するというものになっています。

企画的にはシンプルというかワンアイデアものなのですが、今回は開発に際して次のようなことを試しています。

  1. RackSpace Cloudという海外のクラウドサーバを使ってみる
    →使用中
    1. Twitter Streaming APIを使ってみる
      →実装済み
    2. PHPでデーモンをつくってみる
      →実装済み (/etc/init.d/tubustream start)
    3. リアルタイムっぽいUIをつくってみる
      →実装済み
      →できたもの ストリーム
  2. pound x lighttpd x memcached な構成にしてみる
    →稼働中
  3. TwitterのOAuth認証をつかってみる
    →実装済み
  4. PHPのcurl_multi_*関数というのをためしてみる
    →実装済み
  5. Ajaxのインジケータをかわいくしたい(ぐるぐるはあきたから)
    →実装済み(各所ででてくるとり)
  6. CSS Spritesをやってみる
    →実装済み

今回はいろいろ自分としてははじめてなことをやってみたので、大変な部分もありましたが勉強になりました。
やっぱり新しいことをやってる時がプログラムをかいてて一番楽しい気がします。長時間やってうまくいかないとムカーッとなりますけど・・・

とまぁ、これだけ書いても仕方ないので、それぞれの項目について、またくわしく書いてみたいと思います。
あ、あとよかったら使ってみてください。