【番外編】Androidの爆速エミュレータ環境を構築する ｜ クラスメソッド開発ブログ

2012/10/11 1044 users Android エミュレータ 番外編 一念 使い物

Android爆速エミュレータ環境の作り方 Android開発者界隈のTwitter TLで、「Androidのエミュレータが低速で使い物にならないとか言って許されるのは小学生までだよねー。きゃははー」的な会話が繰り広げられていたので、これは知らないのはマズイのでは、という危機感から、一念発起し、爆速Androidエミュレータ環境の構築を試みました Androidのエミュレータが低速で使い物になら... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 ｜ クラスメソッド開発ブログ

2012/10/16 761 users パララックスエフェクト パララックス parallax ディ

そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに – パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ... 続きを読む

【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【Vim風】 ｜ クラスメソッド開発ブログ

2012/12/03 647 users sublime text カスタマイズ vim ナウ エディタ

こんにちは、僕はVimユーザーです（ちなみにVimを完璧に使いこなしているわけではありません）。 今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基本設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。 細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださ... 続きを読む

身につけておきたいWebサイト高速化テクニック｜検証ツールとそもそもHTTPって何だ編 ｜ クラスメソッド開発ブログ

2013/01/24 640 users http 検証ツール Webサイト高速化テクニック

参考にトップ1,000もどうぞ。 2.2 その他のツール 「GTmetrix」以外にも以下のようなサービスがあります。 PageSpeed Insights PageSpeed Insights GTmetrixと見ているものは基本同じですが個別に計測できます。 YSlow YSlow Google ChromeやFirefox、Opera、Safariにインストールして利用することができます。こ... 続きを読む

楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 ｜ クラスメソッド開発ブログ

2012/11/05 528 users スマホアプリ ワイヤーフレーム ユーザーエクスペリエンス

ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fl... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強してみる – #12 Pinterest風グリッドレイアウトを作ってみた ｜ クラスメソッド開発ブログ

2013/01/15 502 users Pinterest HTML グリッド 従来 画面

HTML5 × CSS3 × jQueryを真面目に勉強してみる HTML5 × CSS3 × jQueryを真面目に勉強してみる – #12 Pinterest風グリッドレイアウトを作ってみた そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰め... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく ｜ クラスメソッド開発ブログ

2012/10/31 477 users jQueryプラグイン HTML 手順 プラグイン コレ

僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに – jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿... 続きを読む

【営業さん必見！】iOS/Androidアプリ開発で事前に合意しておくべき7つのポイント ｜ クラスメソッド開発ブログ

2012/10/11 465 users Androidアプリ開発 事前 ポイント 7つ

※1.X系は開発対象になることがほとんどないため、表から除外しています。 3.ネットワーク オフライン、3G、wi-fi、LTEとスマートフォンではネットワークの種類がいくつかあります。何もここまでと思う方もいらっしゃると思いますが、3Gとwi-fiで動きが異なるということも実際あったので、開発対象のアプリがどのネットワークを対象としているのかは明確にしておく必要があります。 4．テスト範囲 端末... 続きを読む

BootstrapのCSSを簡単にいい感じにカスタマイズできる厳選サービス２＋１つ紹介 ｜ クラスメソッド開発ブログ

2012/12/05 418 users デフォルト 欲求 エンジニア Bootstrap コード

Bootstrapいいよね Bootstrapです。大人気の見た目系フレームですね。いろんなサイトで見かけます。 自分もそうなのですが、エンジニアでコードは書くけどデザインの事はよく知らない。だけど「使いやすくて、いい感じにしたい」という欲求を満たしてくれてます。ただ、デフォルトは見やすいんだけど、ちょっとカスタマイズしたいなとか、色指定があった場合など困りますね。例えばありそうなのが「コンテンツ... 続きを読む

身につけておきたいWebサイト高速化テクニック｜アジェンダ編 ｜ クラスメソッド開発ブログ

2013/01/11 410 users Webサイト高速化テクニック

はじめに Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライ... 続きを読む

1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方） ｜ クラスメソッド開発ブログ

2012/10/15 410 users WIn インターフェース sublime text http

1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方） 今、巷で話題になっているエディタ Sublime Text 2 ですが、 最近社内のプロジェクトでも使用する機会が多くなってきました。 Sublime Text 2 http://www.sublimetext.com/ インターフェースがシンプルで高速、 機能を強化するパッケージも豊富で、... 続きを読む

ローカルで GitHub を構築！ Git リポジトリ管理ツール「GitLab」を Mac OS X にインストールしてみた ｜ クラスメソッド開発ブログ

2013/02/07 361 users GitHub GitLab Ruby git リポジトリ 構築

ローカルで GitHub を構築！ Git リポジトリ管理ツール「GitLab」を Mac OS X にインストールしてみた GitLab とは GitLab は Git リポジトリを簡単に管理できるツール Gitolite をブラウザから管理できるようにする Ruby アプリケーションです。 GitHub のオープンソースクローンと呼ばれることから分かるように、UI が GitHub とめっちゃ... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS ｜ クラスメソッド開発ブログ

2012/10/02 357 users less 毛色 CSS ハードル 拡張メタ言語

そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 – LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておき... 続きを読む

【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 ｜ クラスメソッド開発ブログ

2012/10/09 336 users SCSS入門 コンソール Webデザイナ 呪文 コーダー向け

はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけで... 続きを読む

iOS6 Mobile SafariがAjax POSTでキャッシュする問題を回避する方法 ｜ クラスメソッド開発ブログ

2012/09/23 331 users 問題 方法

iOS6出た！ iOS6が出来ましたね。社内ではiPhone5を入手した社員がLTEの速度に驚いていました。私はまだiPhone4Sですが、iOS6にして新しい機能を楽しんでいるところです。さて、iOS6にしてSafariの仕様が変わって困ったと言った投稿が海外のフォーラムで挙っています。それも、基本的なPOST通信についてです。これは困ったということで、動作を確認して対策方法についてシェアしたい... 続きを読む

Node.jsアプリ開発で参考になる記事 まとめ ｜ クラスメソッド開発ブログ

2013/02/20 306 users 参考 まとめ 毎回 弊社 ジャンルごと

最近は弊社のブログにもNode.js関連の記事が増えてきました。私も勉強中なのですが、社内ブログを参考にさせてもらうことがよくあります。 毎回探すのもちょっと面倒なのでClassmethid.dev()内のNode.js関連の記事をジャンルごとにまとめてみました。 1年以上前の記事もあり、情報が古い可能性があるので注意して下さい。今後も新しい記事が追加されたら更新していこうと思います。 メール送信... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） ｜ クラスメソッド開発ブログ

2012/11/15 296 users Ｔｒａｎｓｉｔｉｏｎ HTML CSS3アニメーション 勉強

この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3... 続きを読む

iOS6のSafariでサポートされるHTML5の機能 ｜ クラスメソッド開発ブログ

2012/09/30 292 users iOS6のSafari HTML5 機能 iPhone GPS

以前、HTML5でカメラやGPSなどスマートフォンならではの機能がどこまで使えるのか調べました。 最近、iPhone5を買ったので今度はiOS6のSafariでサポートされたHTML5の機能を試して見ようと思います。 試したのは以下の5つです。iPhoneで確認できるようにサンプルを作ったので試してみて下さい。 ファイルアクセス(File API)とカメラ(HTML Media Capture) ... 続きを読む

ちょっと高度にJavaScript／クロージャの基礎 ｜ クラスメソッド開発ブログ

2012/10/04 291 users クロージャ function スコープ 変数 別物

JavaScriptのクロージャを一言で言うと、「自身が定義されたスコープで変数を解決する関数」となります。 少し複雑ですが、マスターすれば何かと便利な概念なので、解説したいと思います。 ちなみに、JavaScript未経験なFlex開発者にオススメしたいClosure ToolsのClosure Toolsとは別物です。まぎらわしくてすみません。 例 var f = function() { v... 続きを読む

コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ

2013/01/20 283 users コーダー必見 SCSS・Compass Scout Mac

はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロ... 続きを読む

【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 ｜ クラスメソッド開発ブログ

2012/10/23 266 users Webデザイナ コーダー向け Mixins SCSS GUI

はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回は... 続きを読む

Amazon VPCを使ったミニマム構成のサーバ環境を構築する ｜ クラスメソッド開発ブログ

2013/02/01 253 users Amazon VPC サーバ環境

AWSにおいては、ネットワーク環境をあまり気にせず、数クリックで簡単にサーバを構築できるのは一つのメリットだと言えます。しかし、本格的に運用するシステムに関しては、ネットワーク環境をコントロールする需要も出てきます。AWS Virtual Private Cloud (VPC)を使えば、AWS上に仮想ネットワークを定義し、その上に各種サーバを配置することができます。 ただ、非VPC環境に構築してし... 続きを読む

iOSアプリからnode.js+Socket.IOと双方向通信する ｜ クラスメソッド開発ブログ

2013/01/24 227 users 双方向 node.js+socket.io iOSアプリ

iOSアプリからUIWebViewなどを介さずにnode.js+Socket.IOと双方向通信するための簡単なサンプルを紹介します。 サーバ側の実装 iOSアプリからnode.js+Socket.IO間で双方向通信するには、socket.IO-objcというライブラリを使用します。 今回はサーバ側には弊社うえじゅん氏が公開している記事で作ったチャットアプリを使用しますので、まずは以下の記事を参考に... 続きを読む

【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 ｜ クラスメソッド開発ブログ

2012/12/25 203 users クリスマスだし Internet Explorer 方法

IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春です... 続きを読む

【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 ｜ クラスメソッド開発ブログ

2013/01/31 194 users Emmet 下巻 sublime text 便利ツール

ダミーテキストの挿入 loremを記載して、展開するとダミーのテキストを挿入してくれます。 //展開前 p*3>lorem //展開後 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil labo... 続きを読む