CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
[HTML5] Drag & Drop API おさらい 「DOM 要素の DnD」 | DevelopersIO
このイベントの中でとりあえず処理が必要なものは、Drag 対象要素の「 dragstart 」と Drop 対象要素の「 dragover 」「 drop 」となります。 var dragElement = null, items = document.getElementById('list').getElementsByClassName('item'); function dragStartHandler(event) { dragElement = event.target; event.dataTransfer.setData('dragItem', dragElement.innerHTML); } function dragOverHandler(event) { event.preventDefault(); event.dataTransfer.dropEffect =
![[HTML5] Drag & Drop API おさらい 「DOM 要素の DnD」 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/a18d742778bb675192c3331b71122e80fc5dc1fa/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Fhtml5.png)
【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。 | DevelopersIO
以前、ブログでEmmetをご紹介いたしましたが、またまたEmmetが良さげなツールを開発中です。 現在はまだベータ版ですが公開されていたので一連の流れを試してみました。 アジェンダ Emmet LiveStyleとは？ 環境設定 動作確認 SCSS(Sass)・LESS等のメタ言語の対応は？ Emmet LiveStyleとは？ ブラウザとエディタ間のスタイルをリアルタイムで確認・編集ができるツールみたいです。現在公式サイトでデモ用の動画を確認できます。 環境設定 Emmet LiveStyle を確認するには、設定が必要なので動作確認ができるまでの設定をご紹介します。 今回の動作検証環境 Windows7 chrome Sublime Text 2 Sublime Text の設定 Sublime Text 側でパッケージのインストール Sublime Textを開き、[Ctrl] +
スマホアプリの忘れちゃいけない5つのテスト観点 | DevelopersIO
こんにちは！おおはしりきたけです。今日はスマホアプリの忘れちゃいけないテスト観点について書いてみたいと思います。 はじめに 前提条件として、機能要件のテストは、やっている前提です。ここでは、テストの観点で忘れがちなポイントを備忘の為にも書いておきます。もっと深いとこ掘れば色々と細かいテスト観点というのは出てきますが、まずは、以下の5点を抑えておく必要があるかなと思います。 1.オフライン スマホはオンライン/オフラインの切り替わりが頻繁に起きます。たまにオフラインだとローディングのままずっと返ってこないアプリありますよね？そういったアプリはオフラインの場合を想定していない為、タイムアウトにもならなかったりします。オフライン時のリクエストでどのような動きになるのかをしっかりと確認する必要があります。オフラインで動くところ、サーバーにリクエストを投げるのでオンラインじゃないと動かないところなど
UIテストフレームワークCalabash-iOSを試す〜ターミナルから遠隔操作！〜 | DevelopersIO
前回のおさらい 前回はCalabash-iOSの導入方法について解説しました。今回からはGithubで公開されている01 Getting started guide · calabash/calabash-ios Wiki · GitHubを参考に、Calabash-iOSの使い方を解説していきたいと思います。 今回は公式ドキュメントにあるように、既に用意されているサンプルプロジェクトを使用して実際にCalabash-iOSを導入し、実行中のサンプルアプリに対してターミナルから対話的にコマンドを実行する方法を解説したいと思います。シナリオを早く書きたいところですが、何事も基本が大事！ということでまだ我慢してください。 サンプルプロジェクトを作成する まずは今回の解説に使用するサンプルプロジェクトを作成します。サンプルプロジェクトは既にGithubに公開されていますのでそちらをcloneする
iOS Tips #4 iOSでpng形式の画像からマスク画像を作成する | DevelopersIO
マスク画像を作成するUIImageのカテゴリを定義しよう 早速今回のお題で一番大事なところから実装します。作成したMaskImageSampleにUIImage+Maskを作成し、以下のように記述してください。 UIImage+Mask.h #import <UIKit/UIKit.h> /** UIImage機能拡張 */ @interface UIImage (Mask) /** マスクイメージを取得する @param maskColor マスクカラー @return マスクイメージ */ - (UIImage *)generateMaskImage:(UIColor *)maskColor; @end UIImage+Mask.m #import "UIImage+Mask.h" @implementation UIImage (Mask) #pragma mark - Public
[Android Studio] GitHub と連携してみる ｜ DevelopersIO
GitHub 連携 最近の弊社での Android アプリのバージョン管理はもっぱら Git です。GitHub はもちろん、プライベートリポジトリにしたい場合は BitBucket も使いますし、プロジェクトで Backlog を使うのであればそこで Git リポジトリを立てたり。 そんな中 Android Studio (IntelliJ IDEA) はプラグインなどを特に導入することなく、インストール後すぐに Git 連携ができるようになっています。ということで Android Studio で Git 連携してみたのでメモしておきたいと思います！ Android Studio で新規作成したプロジェクトを GitHub でシェアする プロジェクトを新規作成 まずは適当に Android プロジェクトを作成しましょう。Sample というプロジェクト名で適当に作りました。 プロジェク
![[Android Studio] GitHub と連携してみる ｜ DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0064231af51df890947c8e4bfe10fda4c9d1a94/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F05%2Fcatch3.png)
[Android Studio] 開発を始める前に知っておきたい基本的な使いかた | DevelopersIO
はじめに Android 開発者のみなさん、Android Studio はインストールしてみましたでしょうか？筆者も公開されてからいろいろ触ってみましたが IntelliJ IDEA を触ったことがなかったので、まだ慣れていません。。しかし今後は Android Studio が主流になってくると思うのでいち早く慣れておきたいところですね。 ということで、下記の公式ガイドをベースに Android Studio の基本的な使いかたを出来る限り分かりやすくまとめてみました！ Android Studio Tips and Tricks | Android Developers プロジェクト構成 まずはプロジェクト構成です。Android Studio はこれまでと違い「Gradle」というビルドシステムを採用しています。そのためいままでのプロジェクト構成と異なっています。下図は Eclip
【オープンソース】Adobe Brackets を使ってみたよ【テキストエディタ】 | DevelopersIO
個人的な話ですが、ほんのちょっと前までは Adobe Flash Builder や eclipse といった IDE（統合開発環境）を使って開発の全てを行なっていました。というのもデスクトップ上が沢山のウィンドウで埋め尽くされるというのがどうにも苦手で、単一のアプリケーションで完結できるというというのを最重要視していた節があります。（※そういえば Adobe Dreamweaver も一時期使ってたっけなぁ…） 半年ほど前に Sublime Text に出会ったことで、コーディングはテキストエディタで行いつつ、リポジトリ環境へのコミットは専用ツールやコマンドラインツール等を用いるなど、複数のツールを組み合わせて開発するというスタイルに少しずつ移行していっている最中です。 そんな訳で Sublime Text で全く不自由していない今日この頃ですが、タダより安いものはないということで、Ad
議事録インデックスシート(仮)で炎上回避（できたらいいね） | DevelopersIO
前回の「議事録を制するものはプロジェクトを制する（かもしれない）」で、議事録の書き方と私の Tips を紹介しました。 今回は、作成した議事録をより効果的に使う方法を紹介します。 議事録を読み返すの面倒くさい 後から議事録を読み返すのは面倒くさいですよね。メールでやりとりされていればまだマシですが、それがWordやExcel、もしくはPDFになってたりすると本当に面倒くさくて、議事録を読むこと自体が嫌になって、僕の脳内がプロジェクトの本棚だ、さあ検索しよう！となってしまうかもしれません。 （Windows7 以降はファイルエクスプローラーでファイルを開かなくても内容を確認できるのでいくらか楽になってます。ちゃんと議事録を保管してればね…。） 読み返す時はどんな時？ 議事録を読み返す時ってどんな時でしょうか？ どんな目的で読み返しますか？ 多分、何らかのトピックについて、どのようなやりとりを
[iOS]Storyboardで始めるiPhoneアプリ開発 #1 – pushセグエを使う | DevelopersIO
はじめに iPhoneアプリは、Macが１台あれば作ることができます。 (OSのバージョンは10.7.4以降である必要があります) 「とりあえず動くものを作ってみよう!」といった感じで簡単なアプリを作ってみたいと思います。 「アプリの画面」や「画面の遷移」を視覚的に作成できる「Storyboard」を使いながら、 コードを書かずにできるとこまでを今回はやってみます。 Storyboardとは Xcode4.2から導入されました。iOS5以降を対象としたアプリの開発で使用出来ます。 下の画像のような画面で「画面内のUIパーツのレイアウト」や、「画面から画面への遷移」を視覚的に作成出来ます。 開発の準備 用意するものは以下の通りです。 OS X 10.7.4以降がインストールされたMac 開発ツール「Xcode」 Xcodeは無料でインストールできます。最新版のバージョンは4.6.2です。 X
![[iOS]Storyboardで始めるiPhoneアプリ開発 #1 – pushセグエを使う | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6eb9a958fadd7c0895ae26b9c0ce873f00051ff/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F05%2Fios_eyecatch.png)
身につけておきたいWebサイト高速化テクニック #4｜最適な画像書き出しの基本 | DevelopersIO
みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。 第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。 本題 今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。 前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。 この記事の対象者 W
【HTML5】Indexed Database API を真面目に勉強してみる | DevelopersIO
最近、HTML5アプリ案件でローカルにデータを保存する必要があり、Local Storageを使うかIndexed DBを使うか検討しました。 その際、Indexed DBに関していろいろと調査したので残しておきます。 Indexed Database APIとは キー・バリュー型のデータベースです。まだワーキングドラフト(草案)の状態のため今後、仕様が変わる可能性があります。 ネットで探すとIndexed DBの記事は見つかるのですが、記事が古いとエラーが発生しました。この記事のソースコードも今日時点(2013/4/25)では動きますが今後動かなくなる可能性があります。 Local Storageと何が違うのか Local Storageと違うところは以下の３点です。 Indexed DBはキー以外の項目にインデックスを張ることでキー以外の項目も検索条件にできます。 Indexed DB
【iOS】UIWebViewで表示できる意外なファイル形式 | DevelopersIO
先日、iPhoneのSafariでダウンロードできるファイル形式という記事を書いたのですが、こんなコメントを頂きました。 Safariが対応しているわけではなくiOSレベルでサポートされてます。他のアプリでも同様に扱えます。 これを見て、どうやって実装するんだろう？と思ったので実装方法を調べたところ、UIWebViewを使って表示することが分かりました。 UIWebViewで表示できるファイル形式 表示できるファイル形式は結構前の記事ですがここに書かれていました。 Excel (.xls) Keynote (.key.zip) Numbers (.numbers.zip) Pages (.pages.zip) PDF (.pdf) Powerpoint (.ppt) Word (.doc) Rich Text Format (.rtf) Rich Text Format Directory
スマホアプリの受託開発ならネイティブで行うべき４つの理由 | DevelopersIO
こんにちは！おおはしりきたけです。今日はスマホアプリの受託開発について書いてみたいと思います。 はじめに 前提条件として、スマホアプリでの受託開発に限ります。お客様がハイブリッドアプリで依頼される場合や、自社サービスの場合は、自社で技術の判断ができますので、ネイティブでもハイブリッドでもWebでも自由な技術の選択で良いと思います。クラスメソッドでは、AWSやHTML5などが目立っていますが、iOS、Androidなどスマホアプリの受託開発もやっております。そういった中で、「マルチデバイスのハイブリッドアプリで」という要望もあったりしますが、2013年4月現在のクラスメソッドでは、原則ネイティブでの開発を勧めています。その理由を以下に記載させていいただきます。 1.かゆいところに手が届かない
“画像スライドショーでjQueryプラグインの基本を学ぶ” を @IT に寄稿しました | DevelopersIO
そんな訳で、＠IT にて先月より連載開始した jQuery×HTML5×CSS3を真面目に勉強 シリーズの第二回目が公開されました。 この連載は当ブログにおいてもシリーズ化している「HTML5 × CSS3 × jQueryを真面目に勉強してみる」の出張版といった位置づけですが、解説文やサンプルコードを新たに書き起こすなど、増補改訂版として発信しております。 第二回目は jQuery を扱う上で避けて通ることの出来ない jQuery プラグインの基本について解説しています。はじめての方でも無理なく習得できるようステップアップ形式でサンプルコードを紹介し、最後に学習のまとめとしてカルーセル（画像スライドショー）プラグインをゼロから作る方法を丸ごと掲載しました。 是非ともチェックしてみてください。 寄稿記事はこちら jQuery×HTML5×CSS3を真面目に勉強（2）：画像スライドショーでj
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
jQuery 2.0 Grunt ビルド | DevelopersIO
jQuery 2.0 をビルドしてみよう jQuery 2.0 を自前でビルドしてみます。自前でビルドすることでモジュールを省くことができます。 ビルド ビルドするためにはgruntコマンドを使います。インストールしていない場合は、gruntをインストールしておきます。 gruntについては、nodebrew, npm, grunt 環境構築手順でインストールしてください。 また、grunt -version コマンドでgrunt-cliが入っていない場合は、grunt-cliをインストールしておきます。 $ grunt -version grunt-cli v0.1.7 grunt v0.4.1 ソース取得 githubからjqueryのソースを取得します git clone git://github.com/jquery/jquery.git 依存ファイル取得 npm install
jQuery 2.0 リリース | DevelopersIO
jQuery 2.0 jQuery 2.0がリリースされました。jQuery 2.0は、最新ブラウザ向けに作られています。 古いブラウザをサポートするには、jQuery 1.xを使うことです。また、jQuery1.xは今後もサポートされていきます。 jQuery 2.0で変わったこと IE 6/7/8はサポートされていません。 分岐する必要があります。 <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]> <script src="jquery-2.0.0.js"></script> <![endif]--> JSファイルサイズ縮小 jQuery 2.0.0ファイルは、IE6,7,8の撤廃のおかげで1.9.1ファイルよりも12％小さくなっています。 カスタムビルド
iPhoneのSafariでダウンロードできるファイル形式 | DevelopersIO
Androidの端末ではPDFなどのHTML(JS,CSS)以外のファイルをブラウザからダウンロードすると別のアプリを起動させて表示したり、SDカードに保存したりすることができます。iPhoneのSafariの場合はどうなるのか試してみました。PDFファイルが表示できるのは知っていたのですが、他にも多くの形式をサポートしていました。 テストはiPhone5 iOSは6.1.3で確認しています。 ダウンロードできないファイル形式の場合は以下のようなアラートが表示されます。 Wordファイル（doc、docx） まず最初にWordを試してみました。ページがつながって表示されるので切れ目がよく分かりませんでしたが、とりあえずサポートはされているようです。 挿入した図が一部、表示されていませんでした。doc、docxどちらの形式でも処理できるようです。 Excelファイル（xls、xlsx） 次に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
