Id

menu

Id. DEISGN STUDIO BLOG

アイディデザインスタジオの広報、デザイン/マーケティングに関する研究内容を書き留める忘備録、及び実績紹介のブログです。

DESIGN for Innovation 2016

BY Seiji Bessho Date:2016年5月20日 Category:Design, Event report

DESIGN for Innovation 2016

こんにちは。別所です。

先日、btraxが主催した「デザインの力が未来を創り出す」をテーマとしたイベント

「DESIGN for Innovation 2016」に参加してきました。

平日9:30〜21:30とかなりの長丁場だったんですが、それを感じさせない充実した内容でした。

午前中はイノベーションワークショップ。

体験をリデザインする最初の工程をワークショップ形式で説明していただきました。

 

①相手に対する深い共感

②問題をリフレーミング

③テストのための代替案検討

④プロトタイピング

⑤フィードバック

 

と具体的な方法をグループワークで実践したので非常にわかりやすかったです。

各工程も4分〜8分など時間を区切って作業するとテンポ良く進むものですね。

このワークショップは来月の弊社の勉強会でもやってみようと思います。

 

カンファレンス

午後のカンファレンスは主に、今後デザイナーという職種が

どのように変わっていくかという議題で話していました。

レポートがあったので↓こちらを読んでいただいた方が早いかと思います。

btraxが「DESIGN for Innovation 2016」を開催——イノベーションに対するデザインの重要性を徹底討論

http://thebridge.jp/2016/05/design-for-innovation-2016-by-btrax

「デザインテクノロジスト」の登場、デザインファームの買収―世界最先端のデザインの潮流
http://bizzine.jp/article/detail/1583

「ストーリーデザイン」により、消費者の共感を体験につなぎビジネスの差別化を実現する
http://bizzine.jp/article/detail/1582?p=4

これからのデザイナーは机に向かってゴリゴリと美しいビジュアルデザインを作る、

それ以外の人たちには理解ができない、「神秘的」で職人気質な職種ではなく、

与えられた制限の中で最大限の結果を生み出す能力のある人間のことなんだろう認識しています。

これは、単純にセンスがあるデザインができる人と言うよりは

情報設計やここ2〜3年で誰もが口にするようになったUXデザインなどに基づいて、

アウトプットまでの全ての工程に積極的に関わっていく船頭みたいな役割であるべきで

そのために必要な知識や技術は誰でも学ぶことができる物だと思っています。

たとえばマーケティングの知識であったり、心理学であったり、建築の知識であったり、

大学の一般教養で学ぶことであったり、

普段から本を読んだりこういったセミナーに参加していたら十分に習得できるような物ばかりです。

今年に入ってから弊社も新しいスタッフも何人か増やすことができましたので

また定期的に勉強会を行い意識の標準化をしっかりと行っていきたいと思います。

いや、ちょっと堅すぎますね。

社内だけでなく社外の方とも交流を持ちつつ、無駄話もしつつ、積極的に恥も搔きつつ・・・

学んでいきたいと思います。

 

今後ともよろしくお願いします。

 

ちなみに弊社の勉強会は社外の方も参加可能です。

1〜2人と席は少ないですが、ご興味がある方はご連絡ください。

クビが痛い2

BY Seiji Bessho Date:2016年1月26日 Category:Gadget, Others

kanebako

こんにちは。別所です。

今年は暖冬だという話がありましたが、雪が降ったり寒波が来たり結構寒いですよね。

先日、屋形船で新年会したんですが寒くて皆外に出ようとしない。出ても一瞬で帰ってきます。

個人的に船に乗るのが大好きなので嬉々として予約したんですが、

この時期に屋形船は無理がありましたね。反省。次は夏にします。

 

さて、去年の夏にこんなエントリーを書いたんですが、

クビが痛い

ようやく年明けにRoost Laptop Standが届きました。

年末に右足の親指の骨を粉砕骨折してしまい、しばらくスタンディングデスクが使えなかったんですが、

立ってるだけならそろそろ大丈夫そうなので普通の机からスタンディングデスクに移動しました。

このスタンドは高さが調整できるし、スタンディングデスクでもモニターの角度がちょうど良くなります。

ちょっとかっこわるいのがやはり気になるところですが、今のところいい感じです。

そしてなんと・・・首、肩、背中の痛みは完全に解消しました!

 

スタンディングデスクのおかげではなく、Dr.ストレッチのおかげでね!

明けましておめでとうございます!

BY Seiji Bessho Date:2016年1月4日 Category:Daily

黒バージョン

赤バージョン

皆さまのご支援をいただきまして、本年も無事に新年を迎えることができました。

誠にありがとうございました。

昨年は様々な状況で反省すべき事柄がありましたので、

本年はその教訓を生かしつつ、精一杯業務に励みたいと思います。

 

本年の目標は年末に後悔が残らないよう、やれることは全てやりきること。

単純なことですが達成できた年は数少ないかと思います。

本年はその数少ない年として我々の記憶にしっかり残るような年にしたいです。

 

弊社、アイディ デザインスタジオは本日1月4日より仕事始めとなります。

 

本年もどうぞよろしくお願い申し上げます。

20xx年

BY Seiji Bessho Date:2015年11月30日 Category:coding

「ヒヤッハー!汚物は消毒だ〜〜〜!」

 

cssちゃん

「汚物はあなたよ!」

「くらえ!ポジション:フィクストっっ!」

 

「んん?なんだあ〜〜?いまの呪文みたいなのは〜〜〜?」

「蚊にさされたかと思ったわぁ〜〜〜〜〜〜そんなものじゃ効かんわぁ〜〜〜〜ぐへへへへ……」

「ぐへへへへ……へ」

「………………へ??」

 

【ピキーーーーーン】

 

「ぎゃあああぁぁああああぁあああああ!体がこの位置から動かないぞぉおおおお!なんだああこれはあああ!」

「おまえぇぇぇ〜!なにをしたあぁぁぁぁああ!!」

 

cssちゃん

「あなたはもう、固定されている!!」

 

「ひぇおお~~~~~」

 

 

 

END

 

ボストンテリアのラボくん はたらく編
ボストンテリアのラボくん はたらく編

こんにちは。ふたたび別所です。みなさん、LINE使ってますか?

新しいLINEスタンプをリリースしました!

個人的にはかなり気に入っています。

仕事のシチュエーションで使えそうなスタンプになっています。

これが評判が良ければ犬種も増やしたいところです!

是非、ダウンロードしてみてください!

六本木アートカレッジ2015

BY Seiji Bessho Date:2015年11月27日 Category:Event report

六本木アートカレッジ2015

こんにちは。別所です。

久しぶりにブログを書く気がします。

あっ。前回はスタンプリリースのお知らせだったから印象が薄いんですね。

そのスタンプもそろそろ新しい物がご紹介できそうなんですが、それは後ほどと言うことで。

今回は今週の月曜日に参加した六本木アートカレッジについて書きたいと思います。

三連休の最終日の朝からという個人的には二日酔い確実の日程ですが、

モーニングゾンビよろしく強行してきました。

六本木アートカレッジはアカデミーヒルズで年に一回開催されるトークセッションです。

各界のトレンドを担っている方々が、

パワーセミナー、コラボトーク、パワフル女子トーク、体感型アクティビティ、アートトーク、と

五つのカテゴリーの各会場に分かれて小学校の時間割のように一時間ずつトークセッションを行います。

参加人数も1000人と大規模で賑わっていました。

タイムテーブル

オープニングはトランジットジェネラルオフィス社長の中村さんとアカデミーヒルズ理事長の竹中さん。

トランジットは朝食ブームの火付け役になった、billsを展開している会社です。

対談ではインプットした物、知識はとにかくアウトプットすること。と言うことをおっしゃっていました。

本を読んだり、イベントに参加したり、またはアイデアが浮かんだら同僚や友人にアウトプットする。

アウトプットすることによってインプットした事が自分の中で確実になるとのこと。

これは以前から言われてきたことなんですが、改めて実践しないといけないなあ。と思いました。

他にもアイデアは必ずしもゼロから作らなければいけない物ではないということ。

ニューヨークやロンドンにあって東京にないものは積極的に取り込むべきだと。

東京はブランドとして世界屈指の先進都市であるべきで、世界の先頭集団から外れるわけにはいかない!

東京が元気になれば地方も元気になる。と仰っていました。なるほど。

 

2番目に参加したのはパワーセミナーの編集者、軍地彩弓さんのセッションでした。

軍地さんは雑誌、GLAMOROUSを始めとする様々なファッション雑誌の編集をされていた方で、

ドラマ「ファーストクラス」の監修もされていたそうです。

共感する企画の作り方のお話でした。

1. 観察
2. 情報を収集する
3. 人の心の声を聞く
4. 心理導線を考える
5. 論理を飛躍する
6. 集約する

と言う過程を踏んで企画を作るそうなのですが、5の論理を飛躍すると言うところが興味深かったです。

話を飛ばしてほかの業界との話題に紐づけるなど企画の過程では無意識に行っていることもあるのですが、

工程に組み込むことはなかったので、これからは参考にさせて頂きたいと思います。

 

3番目に参加したのは清水寺の住職、森清顕さんの「清水寺のマネージメント 3つの極意」です。

もうタイトルだけでグイグイ引っ張られますよね。

清水寺の年間の来訪数は500万人もいるそうです。ちなみに京都全体では5000万人。すごい市場ですね。

清水寺の概要や三つの極意、現在を知り、過去に学び、未来につなぐ、と言う高尚なお話を頂きました。

とにかくお坊さんは話すのが上手、抑揚の付け方も、たまに笑いを誘うところもあり、楽しかったです。

清水寺参拝曼荼羅のコピーも見ることができて1200年の歴史の一部を垣間見ることができました。

 

4番目に参加したのはモデルの鎌田安里沙さんのセルフブランディングのセッションです。

鎌田さんが取り組んできた事を紹介して頂きながら、セルフブランディングについて話されていました。

鎌田さんが発信することによって生まれたメディアを通じてコミュニケーションを展開しているそうです。

規模の小さいオウンドメディアって事ですね。

鎌田さんは個人で様々な取り組みを行っており、

個人的にはスケジュールのマネジメント方法なんかもお聞きしたかったです。

 

5番目に参加したのはU20ラグビー日本代表監督の竹中竜二さんと

面白法人カヤック代表柳澤大輔さんのセッションでした。

このセッションでは、チームの中野中心人物はどのようにあるべきかと言うことがテーマでした。

人を引っ張っていくリーダーシップとは逆の・・・ゆるいというと語弊がありますが・・・

周りの人間を尊重するリーダーのあり方をお話ししていました。この話は大賛成。

弊社でも実践しようと思います。

アイデアが生まれるとき 〜考え抜く力〜

最後にエンディングトークなんですが、映画プロデューサー/作家の川村元気さん、

ジャーナリストの津田大介さんの対談で、川村さんのアイデアの原動力をお話ししていました。

川村さんは「バクマン」や「告白」「モテキ」「電車男」等の映画をプロデュースしつつも

「世界から猫が消えたなら」と「億男」などの小説作家としても有名な方です。

金曜日の終電に乗っていると必ず一人はいる、号泣している女性を観察したり(笑、

日常の生活でたまに目の当たりにする非日常な経験を

頭の中にある「違和感ボックス」に貯めていくそうです。

アイデアを出すときは普遍性X時代性、発見X発明と相反する事柄で考え抜きつつ、

時折その「違和感ボックス」の経験をつなぎ合わせてアイデアを出すそうです。

トークもかなり面白かったので、「世界から猫が消えたなら」と「億男」も読んでみようと思います。

楽しみです。

 

10:30から18:10(交流会まで入れると20:00)までの長丁場のイベントも終わり、

交流会でも何人かの異業種の方とお話しする機会もあり、また興味深いお話を聞いたり、

正直なところ、情報量オーバーフロー気味でしたがとても有意義な一日になりました!

と、かなり個人的な長文のアウトプットの場となってしまいましたが、

最後まで読んで頂いた方、ありがとうございました。

これからもアウトプットしていきたいと思います。

おつかれさまです。金箱です。

今回は、おすすめ本ならぬ、おすすめ資料のご紹介です。

この国には「景観法」というものがありまして、平成17年から全面施行されて依頼、

全国に拡大していきました。

良好な都市景観を形成することを目的としている、ただそれだけなのですが、

そのために作成されたガイドラインを見るのがマイブームなのです。

どこか旅行に行く事になったら、パンフレットよりも先に見ることでしょう。

 

※以下でお話させていただく主な対象は、「屋外広告物(看板、ポスター、サイン等)」です。

 

まずわたくしの地元、

観光名所である長野県軽井沢町の例をひとつ、、

 

まず、軽井沢の街には赤色が無いんですね。

コカコーラのロゴが入った赤い自販機も黒に塗り替えられ、コカコーラ・ゼロになってるわけです。

緑豊かな美しい景観を保持する為、彩度の高い色の使用を禁止しているんですね。

コーポレートカラーも変更されてます。

 

karuizawa引用元:http://www.town.karuizawa.lg.jp/www/contents/1001000000571/simple/kanban.pdf

 

こういった景観条例は、軽井沢だけでなく全国各地で実施されています。

こちらは規制が厳しそうな京都。↓ ↓ ↓

URL: http://www.pref.kyoto.jp/reiki/reiki_honbun/aa30007261.html

ちょっと全部読むには気が遠くなりそうです。

 

弊社のある新宿についてはどうなっているでしょう?

URL: http://www.city.shinjuku.lg.jp/content/000172494.pdf

なんということでしょう。お役所感が抑えられた資料になっていて見やすいです!

良好な景観を形成するために、建築物の形態意匠と合わせ、屋外広告物をデザインすることを重要としています。

住居エリア、商業エリア、オフィスエリアでそれぞれ目指している景観イメージがあり、

それが明確に記載されています。さすが、いろいろな街の表情を持ち合わせている新宿。

読み応えがあって楽しいです。

景観と屋外広告物の関係性についてや、色彩の考え方についてなんかも書かれています、、

 

 

このように、普段何気なく見ている街中の広告や歩道の形、案内表示のピクトグラムは

すべてその地域の景観を考慮し作られているんですね。

当たり前といえばそうかもしれませんが、

「景観形成」は、「街全体をデザインしている」という事なのかもしれません。

皆さんも気になる地域があったら「景観形成ガイドライン」をぜひ読んでみてください。

 

LINEスタンプリリースしました

BY Seiji Bessho Date:2015年10月23日 Category:LINE Stamp

地蔵は聞いてるZOU!
地蔵は聞いてるZOU!

ばか殿と家来たち
ばか殿と家来たち

こんにちは。別所です。みなさん、LINE使ってますか?

かなり遅れ馳せなんですが、弊社のオリジナルスタンプがリリースされました。

LINEのクリエイターズスタンプはサービスがリリースされてから

その手軽さからイラストレーターだけで無く、

たくさんの方々がオリジナルのスタンプをリリースしています。

弊社もApple Watchが発売されて以来、スタンプだけで会話をすることが多くなるのではないかと思い、

会話が成立するようなシチュエーションを絵にしてみました。

と言うか自分たちで使いたかっただけなんですが・・・(笑

今後もスタンプは増やしていくつもりですので使ってみて頂ければ幸いです!

こんにちは。ディレクターの大木です。

最近すっかり秋らしくなってきましたね。昼と夜の寒暖差が激しいので、洋服選びが難しいです。僕はよく上着を忘れて、震えながら自転車で帰ったりしています。みなさんも風邪などには十分気をつけてください。

さて、今回はCSSのみでレスポンシブ対応のタブを実装する方法をご紹介したいと思います。

JavaScriptを使うのが一般的ですが、どーしてもJavaScriptを使えない(使いたくない)時ってありあすよね。僕はありました。そんな時、CSS3を使えば簡単に?タブを実装出来てしまうのです。

デモページはこちら

さっそくコードを見ていきましょう。

今回、タブはlabelタグで実装し、ラジオボタンで制御しています。labelとラジオボタンをfor値で関連付けることで、タブの切替を実現しています。

また、アコーディオンメニューの開閉はチェックボックスで制御しています。チェックがついているときは開いて、そうじゃない時はたたんで、という感じです。

<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios">
<input id="nav-ctrl" class="panel-radios" type="checkbox" name="nav-checkbox">

<label class="panel-label" for="panel-1-ctrl">Tab1</label>
<label class="panel-label" for="panel-2-ctrl">Tab2</label>

あとはsectionの中に表示させたいコンテンツを書けばおっけーです。簡単ですね。

<section id="panel-1">
<main>
<h1>CONTENT1</h1>
<p>内容</p>
</main>
</section>

最後にチェックがついてないsectionのmain要素は表示させないようにCSSで書いてあげます。

#panels section main {
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    -webkit-transition: opacity 600ms;
    transition: opacity 600ms;
    overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
    max-height: initial;
    opacity: 1;
    padding: 48px 24px;
}

サンプルのCSSはタブの動きなんかも書いているので長くなっていますが、それを除けばけっこう短いです。

サンプルコード

HTML

<!-- TAB CONTROLLERS -->
<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios">
<input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios">
<input id="nav-ctrl" class="panel-radios" type="checkbox" name="nav-checkbox">
<!-- TABS LIST -->
<ul id="tabs-list">
    <!-- MENU TOGGLE -->
    <label id="open-nav-label" for="nav-ctrl"></label>
    <li id="li-for-panel-1">
        <label class="panel-label" for="panel-1-ctrl">タブ 1</label>
    </li>
    <!--INLINE-BLOCK FIX-->
    <li id="li-for-panel-2">
        <label class="panel-label" for="panel-2-ctrl">タブ 2</label>
    </li>
    <!--INLINE-BLOCK FIX-->
    <li id="li-for-panel-3">
        <label class="panel-label" for="panel-3-ctrl">タブ 3</label>
    </li>
    <!--INLINE-BLOCK FIX-->
    <li id="li-for-panel-4">
        <label class="panel-label" for="panel-4-ctrl">タブ 4</label>
    </li>
    <!--INLINE-BLOCK FIX-->
    <li id="li-for-panel-5">
        <label class="panel-label" for="panel-5-ctrl">タブ 5</label>
    </li>
    <label id="close-nav-label" for="nav-ctrl">Close</label>
</ul>
<!-- THE PANELS -->
<article id="panels">
    <div class="container">
        <section id="panel-1">
            <main>
                <p>コンテンツ 1</p>
            </main>
        </section>
        <section id="panel-2">
            <main>
                <p>コンテンツ 2</p>
            </main>
        </section>
        <section id="panel-3">
            <main>
                <p>コンテンツ 3</p>
            </main>
        </section>
    </div>
</article>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);
ul#tabs-list {
  list-style: none;
  text-align: center;
  border-bottom: 1px solid #dfdfdf;
  margin: 0;
  padding: 0;
}
label.panel-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  width: 100%;
  color: #bdc3c7;
  cursor: pointer;
  background-color: #ecf0f1;
  -webkit-transition-property: border-top, background-color, color;
  transition-property: border-top, background-color, color;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}
label.panel-label:hover {
  color: #c0392b;
}
#panels {
  background-color: white;
}
#panels .container {
  margin: 0 auto;
  width: 90%;
}
#panels section header label.panel-label {
  padding: 12px 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#panels section main {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  -webkit-transition: opacity 600ms;
  transition: opacity 600ms;
  overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}
@media all and (max-width: 767px) {
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {
    max-height: 46px;
    opacity: 1;
  }
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {
    max-height: 46px;
    opacity: 1;
  }
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {
    max-height: 46px;
    opacity: 1;
  }
  #open-nav-label {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
  }
  #nav-ctrl:checked ~ #tabs-list #open-nav-label {
    display: none;
  }
  #close-nav-label {
    display: block;
    max-height: 0;
    overflow-y: hidden;
    background-color: #444444;
    color: #ecf0f1;
    padding: 0px;
    -webkit-transition: max-height 200ms;
    transition: max-height 200ms;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 1px;
  }
  #nav-ctrl:checked ~ #tabs-list #close-nav-label {
    max-height: 36px;
    opacity: 1;
    padding: 12px 24px;
  }
  #tabs-list {
    position: relative;
  }
  #tabs-list label.panel-label {
    padding: 12px 0;
  }
  #tabs-list #li-for-panel-1 {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 200ms;
    transition: max-height 200ms;
  }
  #tabs-list #li-for-panel-2 {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 200ms;
    transition: max-height 200ms;
  }
  #tabs-list #li-for-panel-3 {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 200ms;
    transition: max-height 200ms;
  }
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
    max-height: 46px;
    opacity: 1;
  }
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
    background-color: white;
    color: #c0392b;
    background-color: #c0392b;
    color: white;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
    max-height: 46px;
    opacity: 1;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
    background-color: white;
    color: #c0392b;
    background-color: #c0392b;
    color: white;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
    max-height: 46px;
    opacity: 1;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
    background-color: white;
    color: #c0392b;
    background-color: #c0392b;
    color: white;
  }
  #panels .container {
    width: 100%;
  }
  #panels section header {
    display: block;
  }
}
@media all and (min-width: 768px) {
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate(0, 1px);
    -ms-transform: translate(0, 1px);
    transform: translate(0, 1px);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-top: none;
    border-right: none;
  }
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1:last-child {
    border-right: 1px solid #dfdfdf;
  }
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
    border-left: 1px solid #dfdfdf;
  }
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
    background-color: white;
    color: #c0392b;
    border-top: 6px solid #c0392b;
    padding-top: 26px;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate(0, 1px);
    -ms-transform: translate(0, 1px);
    transform: translate(0, 1px);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-top: none;
    border-right: none;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2:last-child {
    border-right: 1px solid #dfdfdf;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
    border-left: 1px solid #dfdfdf;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
    background-color: white;
    color: #c0392b;
    border-top: 6px solid #c0392b;
    padding-top: 26px;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate(0, 1px);
    -ms-transform: translate(0, 1px);
    transform: translate(0, 1px);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-top: none;
    border-right: none;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3:last-child {
    border-right: 1px solid #dfdfdf;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
    border-left: 1px solid #dfdfdf;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
    background-color: white;
    color: #c0392b;
    border-top: 6px solid #c0392b;
    padding-top: 26px;
  }
  ul#tabs-list {
    text-align: center;
    border-bottom: 1px solid #dfdfdf;
  }
  ul#tabs-list li {
    display: inline-block;
    text-align: center;
    font-size: 0.875em;
    width: 18%;
    -webkit-box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
    border-top: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    -webkit-transition-property: border-top;
    transition-property: border-top;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
  }
  ul#tabs-list li:hover {
    border-top: none;
    border-right: none;
  }
  ul#tabs-list li:hover:last-of-type {
    border-right: 1px solid #dfdfdf;
  }
  ul#tabs-list li:hover + li {
    border-left: 1px solid #dfdfdf;
  }
  ul#tabs-list li label.panel-label {
    border-top: 0px solid #c0392b;
    padding: 24px 0;
  }
  ul#tabs-list li label.panel-label:hover {
    border-top-width: 6px;
    padding-top: 25px;
  }
  #open-nav-label,
  #close-nav-label {
    display: none;
  }
  #nav-ctrl {
    display: none;
  }
}
@media all and (min-width: 900px) {
  main {
    width: 70%;
    margin: 0 auto;
  }
}
.panel-radios {
  position: fixed;
  left: 50%;
  top: 10px;
  width: 20px;
  opacity: 0.5;
  z-index: 99;
}
.panel-radios:nth-child(1) {
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
}
.panel-radios:nth-child(2) {
  -webkit-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  transform: translateX(-30px);
}
.panel-radios:nth-child(3) {
  -webkit-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  transform: translateX(-10px);
}
.panel-radios:nth-child(4) {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}
.panel-radios:nth-child(5) {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}
.panel-radios:nth-child(6) {
  top: 30px;
  -webkit-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  transform: translateX(-10px);
  display: block;
}
body {
  background: #e74c3c;
  color: #444444;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}

どうですか?意外と簡単に実装できてますよね。CSS3はできることが格段に増えているので、もっと勉強していかなきゃと思う今日このごろです。

HubotをSlackで使う方法(2015年7月版)

BY OKI Date:2015年7月29日 Category:Gadget

みなさんこんにちは。ディレクター兼エンジニア(仮)の大木です。

最近弊社では、Slackというチャットツールを導入しました。
Slackを導入したら、あれをするしかありません。
あれっていうのはもちろん、BOTの導入です。

Slackには、slackbotというbotがはじめからついていて、簡単な受け答えならそいつでできます。

今回はもっといろいろな機能を追加したいので、GitHub社が提供しているHubotというbotのフレームワークを使ってBOTを作ります。
https://hubot.github.com/

似たような記事はたくさんありますが、古いとできないこととかもあったので最新版をまとめてみました。

1. Hubotインストール

Hubotのインストールにはnode.jsとredisが必要です。なんかかっこいい名前ですね。これらをちゃちゃっとインストールしちゃいましょう。

$ brew install node
$ brew install redis

npmでYeomanをインストールします。(nmpって何?と思った方はこちら)YeomanはWebプロジェクトの雛形を簡単に作ってくれる便利なサービスです。

http://yeoman.io/

Yeomanを使わなくてもインストールできますが、使ったほうが簡単です。

$ npm install -g yo grunt-cli bower

続いてHubotジェネレーターをインストールします。

$ npm install -g generator-hubot

ここまでで準備完了です。あっという間でしたね。

それではプロジェクトを作りましょう。
今回の例ではBOTの名前をaliceとしています。(人工知能といえばガンダム・センチネルのALICEですよね)

$ mkdir alice
$ cd alice
$ yo hubot

いくつかの質問に答えていくとプロジェクトが自動的に生成されます。
途中で「Bot adapter?」と聞かれるので、Slackと答えましょう。

スクリーンショット 2015-07-29 19.57.58

こんな画面になります。
とりあえず一度動作確認をしましょう

$ bin/hubot

いろんな警告はひとまず無視して、リターンキーを押すとプロンプト(>alice)が出ると思います。pingしてみましょう。


alice> aice ping
alice> PONG

ちゃんと動いてますね。

ちなみにBOTの機能一覧はalice helpと話しかけると答えてくれます。


alice> alice help
alice adapter - Reply with the adapter
alice animate me - The same thing as `image me`, except adds a few parameters to try to return an animated GIF instead.
alice echo - Reply back with
alice help - Displays all of the help commands that alice knows about.
alice help - Displays all help commands that match .
alice image me - The Original. Queries Google Images for and returns a random top result.
alice map me - Returns a map view of the area returned by `query`.
alice mustache me - Searches Google Images for the specified query and mustaches it.
alice mustache me - Adds a mustache to the specified URL.
alice ping - Reply with pong
alice pug bomb N - get N pugs
alice pug me - Receive a pug
alice the rules - Make sure alice still knows the rules.
alice time - Reply with current time
alice translate me - Searches for a translation for the and then prints that bad boy out.
alice translate me from into - Translates from into . Both and are optional
ship it - Disply a motivation squirrel

けっこういっぱいあります。

2.Herokuへデプロイ

つづいて、BOTをサーバーに上げます。今回はHerokuを使います。(最近、Herokuの料金体系が変わってfreeだと1日18時間しか動かせないとか不便な点はありますが、そこまで大規模に運用するわけでもないので、気にしないことにします。)

まずHeroku Toolbeltをインストールしておきましょう。
https://toolbelt.heroku.com/


$ git add .
$ git commit -am "make it better"
$ git push heroku master

$ heroku login
$ heroku create alice
$ heroku addons:add redistogo:nano
$ git push heroku master

ここで、エラーが出ました。どうやらクレカを登録しないとアドオンを使えないようです。(redistogoは無料なので安心してください。)

ここまででHerokuの設定は完了です。次にSlackの設定をしましょう。
ここhttp://my.slack.com/services/new/hubot へいきます。するとTOKENがあるのでコピーして、コンソールに貼り付けます。


$ heroku config:set HUBOT_SLACK_TOKEN=[your token]

そしたらHerokuアプリのURLを調べます。


$ heroku apps:info
(略)
Web URL: https://alice.herokuapp.com/
(略)

このURLをSlackのHubot URLのところに貼ります。

ついでにHerokuのHUBOT_HEROKU_KEEPALIVE_URLも設定しちゃいましょう。

$ heroku config:set HUBOT_HEROKU_KEEPALIVE_URL=[your bot app url]

これでSlack上でBOTが使えるようになったはずです。
pingしてみましょう。

今回はここまで!
次回は具体的なスクリプトを書いていきたいと思います。