【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
Backbone.js -JavaScriptのMVCフレームワーク- | DevelopersIO
Backbone.jsとは？ Backbone.jsは、JavaScriptによる大規模なアプリケーション開発を行う際に力を発揮するMVCフレームワークです。データバインディングとカスタムイベントを備えたModel、配列情報を表すCollection、イベントをハンドリングするView、サーバーサイドのアプリケーションと連携するためのRESTful JSONなどをフレームワークとして備えています。 大規模な業務アプリケーションのユーザーインタフェースをJavaScriptでゴリゴリと作ろうとした場合、100%に近い確率で失敗するかと思います。これは、Flexのようなビルド時のコンパイラエラーを検出できないこと、存在するフレームワークがインタラクションやビジュアルに特化していること、ブラウザーやOSの組合せでAPIレベルの仕様が異なる事、同じブラウザーでもバージョンの違いにより挙動が異なる事
[Photoshop] iOS アプリの Retina / non-Retina 画像ファイルを一括で作成する | DevelopersIO
はじめに iOS アプリの画像ファイルは Retina 用と non-Retina 用の2パターン用意しなければなりません。しかしながら、1つずつリサイズ、名前をつけて保存…というのはあまりにも非効率です。 そこで Photoshop のバッチ機能を使って Retina / non-Retina それぞれの画像を一気に作成する手順をまとめてみました。 手順 1. フォルダを2つ用意する まずはフォルダを2つ用意します。ひとつがオリジナル画像ファイルを保存するフォルダ、もうひとつが実際に iOS アプリに使う画像ファイルを保存するフォルダになります。それぞれ original と assets というフォルダ名にしました。 2. Retina 用の画像を作る 次に Retina 用の画像を一式作成します。ポイントは「ファイル名に @2x は付けない」ところです。original フォルダに保
【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 ↑の絵が何かわかる人いますか？ マインクラフト(Minecraft)界隈でおなじみの愛されキャラ「匠」こと「クリーパー」さんです。 とっても長い前振りなので時間のない方は本題まですっ飛ばしてください。 マインクラフトとは わかりやすく解説されているニコニコ大百科を引用。 Minecraft（マインクラフト）とは、Notch（Markus Persson氏）と氏の会社であるMojangからリリースされた、サンドボックス型のものづくりゲームである。 レトロゲーを想起させるドットテイストの3Dブロックが溢れる世界で、建物やその他のものを自由に創造することが出来るゲーム。 家を作ったり、川を作ったり、山をつくったり、洞窟を作ったり、トロッコ坑道を作ったり、ゾンビを倒すためのトラップを作ったり、塔を作ったり、農場を作ったり、天空の城を
【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
はじめに みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 前「【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応」はマインクラフトネタでフォントの作成について紹介しました。 今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。 前回作成した匠顔フォントはこちら Creeperフォントをダウンロード 1，Webフォントについて 少し古いですが詳しい解説はこちらの記事「Webフォントについて調べてみた」をどうぞ。 一部抜き出して紹介します。 1.1，Webフォントとは CSS2.1時代、Webサイト上で利用できるフォントはユーザーのローカル環境にインストールされているフォントに限られていました。Mac、Windows PC共通のフォントは無いためデザインにも大きな制約がありました。デザインフォン
[Android アプリの UI デザイン] 9-patch の作りかたのまとめと Tips | DevelopersIO
はじめに こんばんは。アンドロイダー？な諏訪です。 本シリーズ「Android アプリの UI デザイン」では、Android アプリの UI デザインについて広く取り扱っていきます。 UI デザインといっても、時にはデザイナー目線で「このようなレイアウトだったらユーザは迷わないだろう」や「情報はこうまとめたほうが見やすいだろう」といったようなことを述べたり、また時にはデベロッパー目線で「こういう UI デザインはこういう実装方法で実現できるよ」や「Android の性質上、こういうデザインにすべき」といったようなことを述べたりしようと思っています。 賛否両論な意見を述べることもあるかも知れませんが…意見交換の場になって、学びあえればそれはそれで良いかなぁ、なんて思っています (とはいうものの、当面は実装方法の基礎的なところをおさらいしていきたいと思ってます)。どうぞよろしくお願いします。
![[Android アプリの UI デザイン] 9-patch の作りかたのまとめと Tips | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/27c01225a965c5b92731bf7c394c561cb9248d14/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F03%2Fcatch3.png)
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
スマホアプリ開発でデザイン担当と認識合わせしておくポイント(iPhone編) | DevelopersIO
こんにちは！おおはしりきたけです！スマホアプリ開発が盛り上がっていますね。クラスメソッドでもスマホアプリ開発が増えてきております。今日はスマホのデザインで最初に認識合わせしておくべきことを書かせていただきます。 はじめに クラスメソッドでは、昔から社内にデザイナーがおり同じチームとしてプロジェクトにかかわってもらうことが多いのですが、デザインは、お客様のデザインチームでとか、デザインは別会社でということもあります。社内メンバーがデザインを行う場合は、認識ずれなどが出ることは少ないのですが、デザイン担当が別(別チーム、別会社、別の場所)の場合しっかりと認識を合わせておく必要があります。スマホアプリ開発で、デザイン作業は以下に分ける事ができます。 デザインを全て行う場合 デザインは別、パーツの切り出し、デザイン適用は自社 デザインとパーツの切り出しは別、デザイン適用は自社 今回は、3のデザイン
スマートフォンサイトのパフォーマンスチューニング | DevelopersIO
スマートフォンサイトのパフォーマンス測定とチューニングに関して調べたことをまとめます。 パフォーマンス測定のツールはKeynote社のMITEを使用します。MITEのバージョンは2.3で試しています。 MITEは性能テストの他に自動テストなどを行えるテストツールです。 MITEのインストール まずはMITEのインストールからです。 MITEは以下のサイトからインストーラーをダウンロードできます。 http://mite.keynote.com/ 無料でダウンロードできますがアカウントを作成する必要があります。インストール後、起動すると以下のようなダイアログが表示されます。 ここには作成したアカウントのユーザー名とパスワードを入力します。 起動した後ですがスマートフォンの端末情報(Profile)を最新に更新するかどうかを聞かれると思います。 最新に更新する場合は"はい"をクリックします。更
Hamlで開発効率アップ｜Sublime text 2でビルドしてみました。 | DevelopersIO
先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。 人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。 さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。 アジェンダ Hamlとは？ Hamlの書き方 Sublime text 2でビルド(ファイル出力) おまけ Hamlとは？ XHTML Abstraction Markup Languageの略称です。 と言われましてもなんのことだ？？ってなるかと思います。 日本Hamlの会というユーザーグループで以下のように、説明しれくれてます。 HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述
【もうすぐバレンタインデー】デザイナーがCoffeeScprit、TypeScriptの開発環境（Win/Mac）をインストールしてみる | DevelopersIO
山田（デザイナー） 「あのー小室さん。Coffee Scriptを勉強していて・・・コンパイルするところまではできたんですが、記述方法がわからないんです（泣）」 小室（プログラマー） 「あー、山田さんならまずはTypeScriptでJavaScriptを覚えながら使ってみるのが良いんじゃないかな？」 山田（デザイナー） 「小室さん、ありがとうございます！お礼にこのチョコもらってください！手作りなんです♥」 きっときっと、良い関係になれると思います爆発しろ。 本題 現在進めているWebサイト高速化の調査に必要なのでCoffeeScriptとTypeScriptの利用方法（Win/Mac）について調べてみました。 デザイナーがCofeeScriptやTypeScriptを使うの？という疑問もありますが、中途半端に手を出しているような自分にはそのうち必要になることもあるんじゃないかと思い試してい
【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」を開講しました！！ | DevelopersIO
【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」を開講しました！！ クラスメソッドブログ課外授業5日目 今回は今大人気のSublimeText2とSass&Compassの勉強会でした。弊社のブログでも大変人気なこのシリーズですが、今回も募集30名という枠に対して倍近い応募があり人気の高さが分かりました。 1時間目：ちょっと心地よいHTMLコーディング with Sublime Text2 1時間目は、清田 隆志によるsublime text 2 のパッケージ（プラグイン）についての話でした。発表したスライドは以下になります。 スライドのリンクは以下になります。 https://dev.classmethod.jp/slide/html-coding-with-sublime-text2/ ロレム・イプサムについて熱く語る清田先生。サ
[Android アプリの UI デザイン] 画像リソースの種類を知る | DevelopersIO
はじめに Androidアプリでは、デザインアセットいくつかの種類があります。 例えば、アイコンなどのような画像を用意すれば済むものもあれば、 ボタン背景など文字数によってスケールさせる必要があるものもあります。 Androidアプリで使用できるアセットの種類を知ることにより、 そのデザインをどのように実装するとより効率的なのか理解することができ、 開発とデザインとのやりとりがスムーズになります。 ぜひ覚えていきましょう。 アセットの種類 ビットマップ ■ 概要 アイコンなどのアセットが該当します。 PNGやJPEGなどで作成された画像ファイルです。GIFファイルは推奨されていません。 原則的に画面密度ごと(mdpi, hdpi, xhdpi)のファイルを用意する必要があります。 またXMLファイルを使用することによって、リピートするようなアセットも作成できます。 ■ ファイル形式 PNG
![[Android アプリの UI デザイン] 画像リソースの種類を知る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f00c4b971fce2a23ec5af2680fbe592f8e9e7291/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2012%2F07%2Fcatch.png)
Sublime Text の習得に役立つショートカットキーのチートシートを作ってみた (Mac OS X / Windows)【15日目】 | DevelopersIO
“世界的ですもんね 乗るしかない このビッグウェーブに” はじめに そんな訳で、IT業界で話題沸騰中のテキストエディタ、Sublime Text。弊社でも続々と利用者が増えている今日この頃です。 基本的にビッグウェーブに鈍感な僕らしく、先日あたりからようやく使い始めてみました。長い間eclipseを使い続けていたので、色々と戸惑う箇所も多く、まだまだSublime(卓越した)に使いこなせていませんが、徐々に慣れていけたらなと考えています。 ショートカットキーのチートシートを作ってみた 少し前に弊社のとあるスタッフから「ショートカットキーのチートシートでナウいデザインのものがあったら、超捗るぜ。」とあおられ、僕自身まだまだ不慣れなこともあって、操作の習得も兼ねて作ってみました。 Sublime Text | Periodic table of the Keyboard Shortcuts.
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
Sublime Text 2 のショートカット 12 選（Win、Mac両方） ｜ クラスメソッド開発ブログ
1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方） 今、巷で話題になっているエディタ Sublime Text 2 ですが、 最近社内のプロジェクトでも使用する機会が多くなってきました。 Sublime Text 2 http://www.sublimetext.com/ インターフェースがシンプルで高速、 機能を強化するパッケージも豊富で、Gitとの同期も快適です。 このブログでは、1ヶ月プロジェクトで使ってみて、 とても便利だと思ったショートカットを12個紹介します。 自分自身会社ではWindows、自宅ではMacなので、 Windows版とMac版の両方をメモ代わりとして記載することにします。 1. マルチセレクト このショートカットは複数の文字列をインタラクティブに選択し、一度にまとめて編集することができます。 OS X：⌘
Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5特集 の記事一覧 | DevelopersIO
iPhoneアプリ開発する際に知っておきたいiPhone、iPod touch、iPadの違い | DevelopersIO