タグ

ブックマーク / dev.classmethod.jp (71)

  • Spine.js をはじめよう [環境構築編] | DevelopersIO

    Spine.js て何だ? RIA界でもHTML5/CSS3/JavaScript でよりリッチなUIを比較的大きなプロジェクトでも実現しようとする動きが前にも増して強くなっているようです。またPhoneGap等のスマートフォン向けネイティブ(風)アプリにおいてもより複雑な実装が求められると思います。その結果、複雑化しがちなJavaScript界にMVCフレームワークが乱立してきています。 その中でもRails3.1でも採用されたCofeeScriptと親和性の高い(Spine.js自体もCoffeeScriptで書かれていますし、公式ドキュメントもCoffeeScript/JavaScript両方で書かれています)、今後注目されるであろうフレームワークがSpine.jsという訳です。人気のフレームワークであるBackBone.jsを尻目に作られたかは知りませんが、似ているところがあるよう

  • はじめるCoffeeScript その1 | DevelopersIO

    こんにちは、うえじゅんです。 今回はCoffeeScriptについてです。 CoffeeScriptはRuby on Rails 3.1からデフォルトで使われていたり、SpineというJavaScriptのMVCフレームワークに使われていたりもします。 (Spineについては「Spine.js をはじめよう」を参照してみてください) CoffeeScriptとは 公式Webサイトには以下のようにあります。 CoffeeScript is a little language that compiles into JavaScript.(JavaScriptにコンパイルする小さな言語です) RubyPythonと似ていると言われており、複雑になりがちのJavaScriptをシンプルに書くことができる言語です。 <script type="text/coffeescript">と指定することで

    はじめるCoffeeScript その1 | DevelopersIO
  • 【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|Mixinsを作ってみよう編 | DevelopersIO

    はじめに。 基礎編、compass編、知らないと損する機能編と今回の「Mixinsを作ってみよう編」で第4回目になります。 全部読んで理解すれば、もうSCSSをがっつり使えるようになっているんじゃないでしょうか!僕もこのシリーズ記事を書きながらドキュメントを読んで色々知ることができました。 今回はプログラムを書いたことのない方にはほんの少し難しいかもしれません・・・でも、投げ出さずに使ってみてください。理解できたときには少しプログラミングが好きになると思います。 それでは、第4回目「Mixinsを作ってみよう編」いってみよー。 SCSS(Sass) Mixinsとは SCSS(Sass) Mixinsとは簡単に言うとSCSS全体で再使用することができ、多種多様なスタイルを生成できる機能です。 引数を使い生成するスタイルを制御することもできます。 Mixinsの基 Mixinsを使うには2

    site159
    site159 2012/11/01
  • 【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|基礎編 | DevelopersIO

    はじめに 早速ですがみなさん、黒い画面(コンソールやターミナル)はお好きですか? ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。(今では好きですよ、黒い画面) 今回は、すぐに使えるSCSS入門|基礎編ということで、「黒い画面など見たくない!」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って? 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS(Sass) Mixin(自作)」からの

    site159
    site159 2012/10/29
    なんにもしないでいけた気がしている。。。
  • 【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を自動

  • 【営業さん必見!】iOS/Androidアプリ開発で事前に合意しておくべき7つのポイント | DevelopersIO

    ※1.X系は開発対象になることがほとんどないため、表から除外しています。 3.ネットワーク オフライン、3G、wi-fiLTEとスマートフォンではネットワークの種類がいくつかあります。何もここまでと思う方もいらっしゃると思いますが、3Gとwi-fiで動きが異なるということも実際あったので、開発対象のアプリがどのネットワークを対象としているのかは明確にしておく必要があります。 4.テスト範囲 端末とOSのバージョンを組み合わせただけで相当数のパターンができます。全ての端末、全てのOSのバージョン、全てのネットワークの組み合わせでのテストは現実的には不可能ですので、開発でのテストの範囲を決めておきましょう。またテスト範囲には、弊社諏訪が書いた記事「Androidの結合テスト」で書いていましたが、どこまでテストを深くやるのかも決めておくべきです。 5.リリース 開発までで終わりなのか?ストアの

  • HTML5 × CSS3 × jQueryを真面目に勉強 – #5 LESSのコンパイル(Win / Mac) | DevelopersIO

    そんな訳で、CSSの拡張メタ言語であるLESSをCSSにコンパイルする手順を学んでおくとします。 前回、LESSとはなんぞやという記事を書きました。今回はそれの補足に当たる内容なので、LESSをまだご存じないという方は、こちらに目を通されておくのがよろしいかと思いますが、「そんなのめんどくせー、息をするのもめんどくせー」という横着なアナタのために簡単に説明しておきます。 LESSとはCSSに対する拡張メタ言語のことです。拡張メタ言語とは、元の言語と同じ意味(機能)をより少ないコードで表現できるようにしたもので、「あー、CSSダラダラ書くの超めんどくせー、息をするのもめんどくせー」という横着なアナタにピッタリの言語というわけです。詳しくはこちらをご覧ください。 LESSからCSSファイルを書き出す (Win) lessc.exe まずはコマンドラインツールによる手法からやっていきます。以下の

    site159
    site159 2012/10/09
  • iOS6 Mobile SafariがAjax POSTでキャッシュする問題を回避する方法 | DevelopersIO

    iOS6出た! iOS6が出来ましたね。社内ではiPhone5を入手した社員がLTEの速度に驚いていました。私はまだiPhone4Sですが、iOS6にして新しい機能を楽しんでいるところです。さて、iOS6にしてSafariの仕様が変わって困ったと言った投稿が海外のフォーラムで挙っています。それも、基的なPOST通信についてです。これは困ったということで、動作を確認して対策方法についてシェアしたいと思います。 どんな時にPOSTをキャッシュする? まずはどんな状況か確認してみたいと思います。 Cache-ControlもExpiresも無い場合 : iOS6 Mobile SafariはPOSTをキャッシュする Cache-Control max-age=0指定 と Expires指定 : iOS6 Mobile SafariはPOSTをキャッシュする Cache-Control: no-

  • HTML5で使えるスマートフォンの機能 | DevelopersIO

    HTML5を使ったスマホアプリ開発に興味があったので、カメラやGPSなどスマートフォンの機能がどこまで使えるのか試してみました。 Webアプリケーションなのでブラウザに依存しますが、以下のサイトにモバイルブラウザ別対応状況が書かれています。 http://mobilehtml5.org 試したのは以下の機能です。端末はGalaxy NexusとiPod Touch 4世代を使いました。 Androidのバージョンは4.0.4でブラウザはChromeと一部Firefoxです。iOSは5.0.1、Safariで試しました。 スマートフォンで確認できるようにサンプルを作ったので試してみて下さい。 タッチイベント(Touch Events) マルチメディア(Multimedia) 位置情報の取得(Geolocation API) 加速度センサー(Motion Sensors) ファイルアクセス(F

    HTML5で使えるスマートフォンの機能 | DevelopersIO
  • Dart逆引きリファレンス | DevelopersIO

    Dart Synonymの章立てをベースとした逆引きリファレンスです。 Dartは2012年3月現在、まだまだ鋭意開発中の言語です。今後も言語仕様に変更や追加が行われていく可能性がありますので、リファレンスを参照の際にはその点にご留意ください。 目次 導入(Getting started) HTMLDartコードを埋め込みたい プログラムの開始ポイントが知りたい Dartコードが実行不可能な場合の処理を指定したい 標準出力(コンソール)へ文字列を出力したい モーダルアラートを表示させたい コードのモジュール化(Code modularity) ライブラリを定義したい ライブラリを使用したい 単一ファイルのみを読み込みたい 変数(Variables) 変数を宣言して値を代入したい デフォルト値について知りたい 変数宣言の巻き上げについて知りたい 変更を許可しない変数を宣言したい コレクシ

  • Videoタグのイベント挙動サンプル | DevelopersIO

    Videoタグについて調べていたのでVideoタグの挙動についてサンプルを作ってみました。属性関連もまとめました。 Videoタグとは VideoタグはHTML5で利用可能になる新しいタグのひとつです。従来、FlashやSilverlightを利用しなければ再生できなかった動画をプラグインなしで再生できるようになります。 特に、FlashやSilverlightを利用する際にもHTML4.01、XHTMLではembedタグやobjectタグを複雑に記述しなければいけなかったのですが、Videoタグを利用することでとてもシンプルに記述することができるようになります。 Videoタグで使える主なビデオコーデック Videoタグで使えるコーデックは主に3つあります。「Ogg Theora」「H.264」「VP8(WebM)」です。 このビデオコーデックがくせ者で、各ブラウザベンダーやその周辺の思