こんにちは。 Tokyo Otaku ModeのUXデザイナーおよびフロントエンドエンジニアの吉見です。 みなさんCSSは好きですか？ 先日弊社のロゴを眺めているとCSSだけでも表現できそうだなと思い、実装してみた話をしたいと思います。 HTMLの準備描画のためだけのDIVを大量生産して実装していくだけではおもしろくないので、ある程度制約を設けたいと思います。 Tokyo Otaku Modeという1字1字をそれぞれ i タグにし、 T は data-tom="t"、O は data-tom="o" といった具合に独自data-属性を持ったDOMで構成してみます。 出来上がったソースが下記のようなHTMLです。 ※ 一部Safariではデモが動作しない可能性があります。ChromeまたはFirefoxでご覧ください。 index.html <div id="tokyootakumode">

エンジニアのたかです。半年ほど前からTokyo Otaku Mode（以下 TOM）にjoinして働いています。 はじめてのブログ投稿は、CreateJSについて書いていきたいと思います。 CreateJSでTOMのロゴマークをParticleにしてみました。 クリックをすることでParticleが弾けるようになっています。はじけたParticleは指定の場所に戻ってくるようにTweenが実行されます。すべてのParticleが指定の場所に戻ると再度、細かいアメーバっぽい動きを始めます。 ※ブラウザの環境によってはご覧になれない場合があります。ご了承ください。 ■ CreateJSについてCreateJS | A suite of JavaScript libraries and tools designed for working with HTML5 CreateJSはHTML5のモジ

こんにちは、先日Tokyo Otaku Mode（以下TOM）のエンジニアインターン生を卒業した丸山（@alitaso345）です。TOMではおよそ1年間エンジニアのインターン生としてお世話になり、いろいろなことを感じたので、ここに書き留めておこうと思います。 TOMに入ったきっかけ私はもともと漫画が好きだったというのと、ベンチャー企業に「よくわかんないけどなんかカッコいい」というぼんやりとした憧れがあり、Wantedlyを眺めていたときにTOMの存在を知りました。ただし、当時（2013年秋ごろ）はFacebookに投稿する記事を書くライターの募集しかしていなかったため、エンジニア志望の私はそこでは応募しませんでした。 年が明けてダラダラはてブを眺めていたところ、COOの安宅の記事が新着エントリに上がっているのを発見。そこに連絡先が書いてあったので、すぐにメールしました。 私「RubyとV

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚

Здравствуйте! Tokyo Otaku Modeでフロント周りを担当している今吉です。 社内でロシア人という設定を付けられていますが、ロシア語は挨拶くらいしかできません。 Webサイトを作るのに避けて通れないのがCSSだと思います。エンジニアも多かれ少なかれCSSを書く事があるかと思います。 しかし、CSSを書くのはとても面倒くさいです。出来る限り楽をしたいと常々思っています。そこで、CSSプリプロセッサを導入してCSSを作成している方も多いでしょう。CSSプリプロセッサとは、乱暴に言ってしまえばCSSをクールにラクに書く事ができる言語です。(設計が素晴らしく、COOLなCSSというものも、もちろんあるとは思いますが、これは一旦置いておきます。) 恐らく最も知られているものは、LESSとSass/Scssでしょう。 しかし、Tokyo Otaku Modeでは、Stylusとい

こんにちは、ヴォラーレという会社でSEOコンサルタントをやっているじつかわです。 SEOコンサルをする中でさまざまなWebディレクターさんと一緒に仕事をさせていただいてきたのですが、やはりみなさん、SEOの領域まで手を出したくても出せない、というのが実情のようです。SEOをきちんとおさえたサイト構築をできる方には数えるほどしか出会ったことがありません。 しかし、外部リンクによるSEOで成功するのが難しくなっているなか、SEOを成功させるためには内部SEOをどこまでできるか、サイト構築時にいかにSEOを組み込んでいけるか、というのが非常に重要になってきます（※）。 SEOは他の広告手段とは違って、サイトそのものを検索エンジンに評価してもらうという取り組みですから、どのような企画・設計でサイトを構築するか / その際にちゃんとSEOを押さえられているか、によって大きな差がつきます。すなわち、S

昨夜、渋谷ヒカリエで行われた東京Node学園 14時限目で、トップバッターとして発表してきました。 発表内容は、「Synth」というWebアプリケーションフレームワークについてです。 Tokyo Otaku Modeでは、バックエンドとしてNode.jsとMongoDBを使っていてExpressで運用していますが、色んなフレームワークも触っていてSynthもそのうちの一つです。 SynthはInfoQの「APIファーストのWebフレームワークSynthを巡るコミュニティの困惑」という日本語版記事が出て初めて知った人が多いと思います。 記事にもあるとおり、JSONやテンプレートHTMLを返すAPIとそれを使ってクライアント側でアプリケーションを構築するという形に特化したAPIファーストのWebアプリケーションフレームワークです。 ちょうど上記の記事が出た頃、天下一クライアントサイドJS MV

ソフトウェアを正しく理解する唯一の方法はコードを読むことです。 ドキュメントを読めばそのソフトウェアが何を実装しているか分かりますが、どのように実装されているかまでは分かりません。 開発中に何らかのトラブルに悩まされたときや、効率的なコーディングをしたいと思ったとき、下位レイヤのソフトウェアを理解しておけば素早く対処できるシーンが多くあります。 ただ、コードを読むことは簡単なタスクではありません。 現代的なソフトウェアはそれなりの規模のコードを含んでいることがほとんどです。アーキテクチャ間の差異を吸収するためのコードなど、本質的な機能を理解する上ではあまり重要ではないコードも含まれています。 何らかの問題が発生してからコードを読もうと思っても、準備なしでは関連する箇所を探すだけでかなりの労力が必要な作業となります。 従って、普段からコードを読んでおくことが重要です。 また、コードを読むにあ

ニコニコ超会議で開催された「超チューニング祭り」に恋人である武藤スナイパーカスタムからお誘いされて参加しました。 投票してくださった方々のおかげで最優秀賞！ ありがとうございます！ ニコ動モバイル版のトップページのhtml,css,jsを軽量化するお祭りでして、にぎやかな会場、狭いブースの中で詰め込まれておもしろかったです。 チーム：ウルフギャングの紹介 エンジニア、デザイナーのバランスチーム。 武藤さんが狼が好きなのでそれっぽい名前にしました。ギャングらしくふたりとも革ジャン装備。 武藤スナイパーカスタム Twitter : tai2 コンピューターグラフィックスとPythonをこよなく愛すマッチ棒エンジニア。 イシジマミキ Twitter : woopsdez 写真をアップするたびにおおつねさんに「太った？」と言われる番付上昇中のデザイナー 他はエンジニアふたり、個人での参加などが

2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。

カトリデザイン事務所 / 制作会社クリムゾン / ディライトテクノロジー他...全24件

単刀直入に言ってしまうと、CSS3は記述するのが面倒です！時間短縮のためにも、できるだけコピペで使いまわしましょう！ HTML5とCSS3は、開発者の間では話題になりつつも、ブラウザの実装状況の様子を見ながら探り探り実装している状態です。このような環境は、言語のバージョンが上がるごとに恒例となっています。どんなに凄い仕様が公開されても、「実装」されなければ意味がない訳でして… 今のところCSS3の実務レベルで活躍しているのは“角丸”とグラデーションくらいでしょうか。どうしても凝ったことをしようとするとデバイス限定になってしまうので、開発者は各自担っている仕事に直接関係のあるものから覚えていくしかないのです。 今回は、CSS3でよく使うボタンやグラデーションのサンプルを共有します。ダウンロードは以下。 CSS3は手打ちに向かない CSS3は、記述が複雑であったり、ブラウザによって記述が違うも

Facebookについて色々調べていたところ、「いいね！」ボタンのサムアップ（親指を立てているマーク）が妙に完成されたデザインだなということに気が付きまして、一体何に使うのか全く分かりませんが、超でかい「いいね！」を作りました。 Photoshopのベクター画像で作ったのでいくらでも巨大化できます。誰か上手い使い方を考えて下さい。 使い方はあなた次第の「いいね！」ボタン 「いいね！」ボタンと言っても、今回気になったのは、サムアップマークの方なので、ボタンはあくまで付属品です。このディティールが何とも言えません。

多くの会員を抱えるWebサービス（主にSNS）がオープンプラットフォームとして機能するようになり、様々なデベロッパーがソーシャルゲームの世界へ参入しました。 日常的にインターネットを利用する人たちにとって、ソーシャルゲームはごく普通の存在となり、今では「ネットでゲームをする」という行為が一般的になったと言えます。 既に世の中には多くのソーシャルゲームが登場しています。中には、何百万人もの会員を獲得したものや、月間数億円を稼ぎ出すものなど、後発のデバロッパーにとって目標となるタイトルも存在しています。 世界各国で文化の違いやユーザーの好みの違いがあるため、一概にどんなゲームがヒットするかは分かりません。しかし、ソーシャルゲームをヒットさせるために絶対に外せない要因を特定することはできます。 今回は、ソーシャルゲームで成功を収めるために絶対に外してはならないことを書きました。概念としてはWeb