モバイル開発に役立つJSデバッグ術 | メルカリエンジニアリング
Mercari Advent Calendar 2017 13日目は フロントエンドチームの @sottar が web アプリの開発（特にモバイル開発）で役立つ Chrome DevTools の便利な機能を紹介します。 はじめに メルカリでは PC からのアクセスよりもモバイルからのアクセスが多いため、web アプリもモバイルからのアクセスを意識したコードを書く必要があります。 しかしモバイル向けのコードを書く際に、毎回実機を接続して確認するのは面倒です。そこで最近のブラウザに付属している開発者ツールにはモバイル向けのコンテンツの開発に役立つ機能が搭載されているため、その機能を使いこなすことでモバイル向けの開発をしつつ、開発のスピードを上げる事が可能です。 そこで本日は Chrome DevTools 内にある、特にモバイルデバイス向けのコンテンツ開発に役立つ機能を紹介します。 Dev
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
スマホ専用の検索ランキングってあるの？スマホSEO対策の基本をマル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、じつかわです。ヴォラーレという会社でSEOコンサルタントをしています。 現代のWebビジネスを考える際、もはやスマホを無視して考えることはできなくなってきています。ここ1〜2年で、「スマホのSEOってどうすれば良いの？」という声も大変よく聞くようになってきました。 実際のところ、スマホサイトを構築する際にSEO的な要件はどうすればいいんだろうか……と悩まれる方は多いかと思います。今回はそんなスマホとSEOの関係についてマル�ッと紹介したいと思います。 「スマホ専用の検索ランキング」は存在する？ いきなりすこし込み入った話をしますが、かなり注目度の高い重要な質問だと思います。 スマホのSEOを考えるときにまず話題になるのが、「スマホ専用の検索ランキング」というものが存在するのかどうか。スマホサイトを持っていなければ検索上不利になるのか、スマホ向けのユーザビリティがどこまで加味され
モバイルSEOに役立つGoogle純正ツール×5
[対象: 初〜中級] この記事では、モバイル向けサイトのユーザビリティやユーザーエクスペリエンスの向上に役立つ、Googleが提供する公式ツールを5つ紹介します。 Chrome PageSpeed Insights Mobile-Friendly Test Fetch as Google モバイルユーザビリティ レポート 順に説明します。 Chrome Google Chromeの「デベロッパー ツール」では、スマートフォン端末で見たときのそのページの表示をエミュレーションできます。 「デベロッパー ツール」は次の手順で起動します。 [Google Chromeの設定]（右上の3本バー） − [その他のツール] − [デベロッパー ツール] Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac) スマホを表すアイコンをクリックするとスマホでの表示モ
「ハマるしかけ」で「艦隊これくしょん」の中毒性を読み解く
ちょっと、いつもと違った趣向で書いてみましょう。ゲームの話、そう、去年からある方面ではたいへん話題の「艦隊これくしょん」です。 このゲーム、モバイル向けにはなっていませんし、ソーシャルゲームというわけでもありませんし、なぜ人気なのかは謎な部分もあります。 この話はすでに「ライフハックLiveshow」で３回にわたって触れてきました。みたいもん！のいしたにまさきさん（@masakiishitani）、おおつねまさふみさん（@otsune）をお迎えして放送した直近の回はこちら。 擬人化された旧日本海軍の艦艇「艦娘」を率いて双六のような仕組みで「敵」と戦う、とまあやっていない人にはなんのことかさっぱりわからない話だと思いますが、やりこんでいる人は膨大な時間をこのゲームに注ぎ込んでいるほどです。もはや中毒性、常習性といった言葉をつかってもいいほどに。 ところで先月まで続いていました日経ビジネスアソ
【IVS特集】エイリム高橋氏、カプコン辻本氏、グリー荒木氏、DeNA小林氏が「モバイル・ゲーム市場の今後」を語る...『ブレフロ』誕生秘話、次世代の『ブレフロ』創出戦略 | gamebiz
コンソールゲームやPCオンラインゲームで『モンスターハンター』など数々のヒットタイトルを生み出したカプコン。 日本中にソーシャルゲームの一大ムーブメントをもたらし、互いに切磋琢磨を積み重ねて成長し続けてきたグリーとディー・エヌ・エー。 彼らは、より多くの世界中のユーザーにサービスを届け、継続的なプレイを促し、世界各国での売上ランキング上位入りを狙う。 その中、今最もモバイルゲーム業界のビッグウェーブに乗っているのが、エイリムだろう。 『ブレイブフロンティア』が、北米で、Supercell、Kingに引き続き、売上ランキング上位の常連入りを果たし、アジアでも各国で売上ランキング上位に入っている。さらに、最近ではヨーロッパへも裾野を広げており、飛ぶ鳥を落とす勢いで拡大中だ。(関連記事1、関連記事2) まさに、今、『ブレイブフロンティア』は、世界各国の猛者の壁を打ち破り、進撃を続けている。 今回
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ブラウザでの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
