タグ

mobileとwebに関するkathewのブックマーク (126)

  • デベロッパーツールでのスマホ確認の裏ワザとクラウド実機テスト

    スマホサイトの制作において欠かせないのが実機での表示確認。しかし、解像度はもちろんのこと、コードの解釈も多種多様なスマートフォンにおいて、すべての端末でひとつひとつ検証していくのはコスト面でも現実的ではありません。そのため現場では、実機とエミュレーターを組み合わせてテストするのが一般的になっています。 今回は、Web開発ツールとして人気の「GoogleChromeデベロッパーツール」であまり知られていないスマホ検証の裏ワザと、実機テストにかかるコストを抑えることができる、クラウド実機テストサービス「Scirocco Cloud(シロッコクラウド)」について紹介します。 GoogleChromeデベロッパーツール GoogleChromeグーグルクローム)のデベロッパーツールは、Webサイトがスマートフォンでどのように表示されるか、ブラウザから手軽にチェックできます。100%正確に表示再現

    デベロッパーツールでのスマホ確認の裏ワザとクラウド実機テスト
  • スマホだと反応が遅れる :hover を心地良くする方法

    スマホ向けにサイトを作っていると、ブラウザの挙動が遅くてUXを低下させてしまうことがあります。例えば、画面をタッチしたときの:hoverの挙動。あと、jQueryのanimate()の挙動。とか。 スマホブラウザはJavaScriptの実行速度が遅いので、animate()の挙動とかはCSSで書くのがベストです。これはよく知られているので、実装されているサイトも多いのではないでしょうか。(あ、具体的な実装はまた次回ご紹介したいと思います。) 今回はですね、あまり話題にならない:hoverのことです。 :hover がおかしい? マウスカーソルを乗せたときのスタイルを設定するのが:hoverです。スマホだとタッチした瞬間に適用されると思いますよね。でも例えばiPhoneで:hoverを使うと、指を離したときにスタイルが適用されます。ですので、「もう押してないのに…」という場所が「押されたスタ

    スマホだと反応が遅れる :hover を心地良くする方法
  • IntelliJ IDEA – the IDE for Pro Java and Kotlin Development

    IntelliJ IDEA is the JetBrains IDE for pro development in Java and Kotlin. Built for your comfort, it unlocks productivity, ensures quality code, supports cutting-edge tech, and protects your privacy.

    IntelliJ IDEA – the IDE for Pro Java and Kotlin Development
  • Wordpressテーマ『ELEPHANT2』を2ヵ月間使用した正直な感想

    株式会社SNAC代表取締役 MEO/SEO対策/HP制作を用いたWEB集客代行会社を運営。 1985年生まれ 福島県出身 月間12万PVのブログを運営中。自身が運営してきたブログ・メルマガノウハウを基に集客のアドバイスをしている。 【略歴】 28歳の頃、会社の突然の倒産をきっかけにインターネットビジネスの世界に入る。その後、ブログ運営やアフィリエイトに関する教材を買いあさり、素人から独学でWordPressの構築、記事の書き方、ライティング、SEO対策、マーケティング、メルマガ集客を学ぶ。2015年8月から始めたブログ「ブログ集客実践の書」は順調に成長し続け、2016年4月→1万PV、2017年7月→2万PV、2018年1月時点→45000PV→2018年7月には月間12万PVを突破。 現在は株式会社SNACを設立し、整体や美容室、パーソナルジム、エステなど実店舗向けのウェブ集客サービスを

    Wordpressテーマ『ELEPHANT2』を2ヵ月間使用した正直な感想
  • スマートフォンのブラウザで音声認識機能をつかいたいという想い - みかづきブログ その3

    ずっと無理だと思ってました。 いちかばちか SpeechRecognition をつかったら、 Nexus 5X (Android6.0) Nexus 5 (Android5.1) で動きました。ためしてみるもんですね。 developer.mozilla.org ソースコード JavaScript (function(win, doc) { "use strict"; var recognition = new webkitSpeechRecognition(), msg = doc.getElementById("msg"); recognition.lang = "ja"; recognition.addEventListener("result", function(evt) { var txt = evt.results[0][0].transcript; if (txt) {

  • モバイルUI進化中!革新的なナビゲーションメニュー実例サンプル10個まとめ

    モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、7〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、3つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中!2018年に押さえておきたい最新トレ

    モバイルUI進化中!革新的なナビゲーションメニュー実例サンプル10個まとめ
  • Google Chromeでスマートフォンサイトをチェックする:Google Chrome完全ガイド - @IT

    スマートフォン(スマホ)が広く普及し、昨今では多くのWebサイトが、画面の狭いスマホに最適化した専用のビュー(表示)を備えるようになってきました。 サイトがスマホでどう見えるのかは、もちろん実際にスマホで表示してみるのが確実です。ただ、スマホやタブレットにはさまざまな機種があり、画面の解像度も異なるため、どう見えるかを全て実機でテストするのは困難です。 このような場合は、デスクトップ版Webブラウザの「スマホ表示」機能(スマートフォンのWebブラウザのエミュレーション)を利用すると、PCで簡単にスマホサイトの確認ができます。操作方法もそれほど難しくありません。 記事では、Windows OS/macOSデスクトップ版Google Chrome(以下、Chromeと略)の「デベロッパーツール(開発者ツール)」でスマホ表示を確認する方法を紹介します。このツールは名前に「デベロッパー(開発者

    Google Chromeでスマートフォンサイトをチェックする:Google Chrome完全ガイド - @IT
  • スマホで見た時にサイト全体が自動縮小するようにする方法を教えてください。 - ど素人がWordpressでサイトを作らされています。... - Yahoo!知恵袋

    スマホで見た時にサイト全体が自動縮小するようにする方法を教えてください。 ど素人がWordpressでサイトを作らされています。 わたしの探し方が悪いのか、縮小させない方法はよく見つかるのですが、 縮小させる方法が見つかりません。 私はスマホを持っておらずスマホ自体の設定や操作のことも よくわからないのですが… 小さいタブレットでヤフーのトップページを見た時のように、 横幅全部が画面に入るようにぎゅーーっと縮小させたいです。 スマホ専用の画面を別に作るのは止められています。 ご存知の方がいたら教えてください。 よろしくお願いします。

    スマホで見た時にサイト全体が自動縮小するようにする方法を教えてください。 - ど素人がWordpressでサイトを作らされています。... - Yahoo!知恵袋
  • เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย

    เว็บสล็อตโรม่า joker123 เป็นทางเลือกที่น่าเชื่อถือสำหรับผู้เล่นที่ต้องการความมั่นใจในการเดิมพันออนไลน์ ด้วยระบบความปลอดภัยระดับสูงและการตรวจสอบอย่างเข้มงวด คุณสามารถวางใจได้ว่าทุกการเล่นของคุณจะเป็นไปอย่างยุติธรรมและโปร่งใส เว็บไซต์นี้ได้รับการรับรองจากหน่วยงานที่เกี่ยวข้อง ทำให้คุณหมดกังวลเรื่องการโกงได้อย่างสิ้นเชิง เว็บสล็อตโรม่า joker123 สล็อตโรม่า นอกจากนี้ ทีมงานมืออาชีพพร้อมให้บริการตลอด 24

    เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย
  • Viewport と Media Queries に関するメモ | Web Design Leaves

    Viewport の指定 スマートフォンの多くは「Viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに Web ページを縮小して表示する。 Viewport ブラウザの表示領域のことで、デバイスごとに異なる。(デバイス幅や解像度とは別)「Viewport」にはブラウザの表示領域をピクセル単位(何px X 何px)での値が設定されている。 デバイスの解像度(device-width や device-height) デバイスの解像度は、デバイスピクセル比を持つスマートフォンなどではデバイスピクセル比から求められた解像度の値を指す。これは「デバイスの画面解像度 ÷ デバイスピクセル比」で求められる。 画面解像度が 320px X 480px、デバイスピクセル比「1」の iPhone 3GS では 320px X 480px。 画面解像度が 6

  • 【2024年最新】スマホでプログラミングができるアプリ12選

    Progate Progateは、イラスト中心のスライド形式でプログラミングを学べるアプリです。学習の中で実際にコードを書くことができるので、実践的なスキルを身につけることができます。100以上の国で使われていて、利用者数は300万人以上の人気アプリです。 HTMLCSSはもちろん、SQLPythonなど15種類のプログラミング言語が学べます。環境構築が不要なため、簡単に始めることができます。初級は無料で、入門から基編は月額990円〜となっています。 Progateのダウンロードはこちら(iOS) Progateのダウンロードはこちら(Android) 言語別の学習方法に関して詳しく知りたい方は、以下の記事をご覧ください。 Javaの勉強方法|独学で入門するための学習のコツとステップアップの流れ SQLの勉強方法|初心者向けに、入門サイト、学習アプリなどの勉強法を紹介 Kotlin

    【2024年最新】スマホでプログラミングができるアプリ12選
  • あなたは今も犯している!?モバイルUXの7つの失敗 - ふろしき Blog

    ここ最近、モバイルWebコミュニティにて、Apptimize社のトップであるLynn Wang氏がポストした「7 Mobile UX Mistakes You’re Probably Making Right Now」が話題になっています。 www.sitepoint.com その内容とは、彼女自身が、A/Bテストを使い様々なモバイルアプリの改善を行い、その中で得られた知見をまとめたものです。若干、煽り気味なタイトルに見えますが、中身はしっかりしていて、多くの人がなんとなく感じていることをキレイに言語化しています。個人的にも、参考になると感じています。 人の許可が頂けたので、日語らしく読めるようざっくりと意訳し共有します。 1. 不必要にサインインをさせようとする 多くの人々は、ユーザのサインインが価値を持つものだと考えています。しかし、時にサインインは、ユーザに苦痛を与えます。たとえ

    あなたは今も犯している!?モバイルUXの7つの失敗 - ふろしき Blog
  • モバイルウェブが爆速に! GoogleがAMP (Accelerated Mobile Pages) を立ち上げ

    [レベル: 上級] Googleは、Accelerated Mobile Pages (アクセラレイティッド・モバイル・ページ)という、モバイル端末でのウェブページの表示を高速化するためのプロジェクトを公開しました。 略して、AMP(アンプ)と呼びます。 AMPで策定された仕様に従ってモバイルサイトを構成すると、モバイル検索結果からリンク先ページがまさに“一瞬”で表示されます。 AMPをデモで体験 AMPを使ったページがどのようにモバイル検索から表示されるのかを見てみましょう。 Inside Searchの公式アナウンスに動画があります。 まずこれを見て、何となくでいいので雰囲気をつかんでください。 ただ、見てもどんなだか十分にはわかりませんでしたよね。 実際に試したほうが理解できます。 AMPを体験できるサンプルのリンクもアナウンスに出ていますが、日からでは機能しないので少し細工を加え

    モバイルウェブが爆速に! GoogleがAMP (Accelerated Mobile Pages) を立ち上げ
  • CakePHP で docomo と au の RFC 非準拠メールアドレスを例外的に許可する email バリデーション

    CakePHP で docomo と au の RFC 非準拠メールアドレスを例外的に許可する email バリデーション 2011年11月28日 10:59CakePHP CakePHP の組み込みバリデーションルール email は メールアドレスの書式をチェックしてくれて便利なんだけど 特に携帯のキャリアメールに関して困ることがある。 かつて docomo と au で RFC 違反というか非準拠のアドレスが登録可能だった。 具体的に言うと .(ドット)が連続するものと @ の直前に . があるもの。 今はもうこれらは登録できないはずだけど 以前に作られたアドレスはまだ生きていて 実際に使っている人もたくさんいる。 使われてはいるけれども メールアドレスの仕様には沿っていないので これを入力すると email のバリデーションで弾かれてしまいますね。 yabmin に登録しようとした

  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    サービス終了のお知らせ - NAVER まとめ
  • Monaca

    Monacaはクラウド技術を活用した、日発・次世代のアプリ開発プラットフォームです。多様なアプリ開発に対応するクラウドサービスを中心に、アジャイル開発を促進するDevOps、コンサルティングやテクニカルサポート。日々の課題を解決するために用意されたツールやサービスを通じて、あなたのプロジェクトの成功を支えます。 さらに詳しく

    Monaca
  • [.com/.net] ドメインオークション | ドメイン取るならお名前.com

    ドメインオークションとは? ドメイン名の取得権利をオークション形式で ご購入いただくサービスです。 対象TLD.com.net.org.biz.info.mobi オークション対象はすべて中古ドメイン 中古ドメインで集客効率アップ 中古ドメインは過去に運用されていたWebサイトの「検索エンジン評価」「被リンク」「残存トラフィック」などを引き継いでいます。そのため、すでに中古ドメインが持っているパワーを活用することによって、集客効率の引き上げが期待できます。 SEO対策 高ドメインオーソリティの中古ドメインは、被リンクSEO対策用のサテライトサイト・ECサイト・ブログなどに活用されています。 アフィリエイトサイト 中古ドメインは、高収益アフィリエイターのアフィリエイトサイト構築によく活用されています。 新規サービス・商品サイト 新規で取得できなかったサービス名・商品名にピッタリのドメイン名も

    [.com/.net] ドメインオークション | ドメイン取るならお名前.com
  • 10~17歳の6割、携帯電話保有 ネット利用は2時間:朝日新聞デジタル

    10~17歳の子どもの6割がスマートフォンなどの携帯電話を持ち、1日に平均2時間近くインターネットを使っている――。内閣府が19日、そんな調査結果を公表した。 今年度の調査は昨年11~12月に、10~17歳の子どもを対象に実施。約1800人から回答を得た。 携帯電話を持つ割合は60%で、前年度より5ポイント上がった。小中高別にみると小学生で37%、中学生は52%、高校生は97%に達した。3年前と比べると、中高生の保有率はほぼ横ばいだが、小学生では2倍近くに伸びた。年齢が低い子への普及が進んでいる。

    kathew
    kathew 2014/02/19
    そろそろ沈静化していたと思っていた子供による高額課金トラブルがまた再燃しそうな予感
  • ライバルを出し抜け!スマートフォンサイト制作でコンバージョン率を上げる7つのポイント|MarTechLab(マーテックラボ)

    LPO研究所所長の鎌田です。 今回は「スマートフォンサイトでコンバージョン率を上げるための重要ポイント」をお伝えします。 レスポンシブデザインだの、HTML5だのといった技術的な話は一切しません。あくまで「コンバージョンに直結するスマートフォンサイト制作の考え方、施策」についてお伝えします。 時代はスマートフォンだ、マルチデバイスだと騒がれてはいるものの、実際のところ、Web上でスマートフォンからのコンバージョン獲得を意識して対策できている会社はまだ多くありません。今のうちにしっかりと対策をすれば、PCでは激戦区のジャンルであっても、スマートフォンサイトで出し抜ける可能性は大いにあります。 それでは早速いってみましょう。 目次 スマホユーザビリティは右手親指を意識しろ スマホサイトは読み込み速度を重視しろ リスティングもスマホ向けに最適化しろ スマホサイトではオファーを下げろ スマホではス

    ライバルを出し抜け!スマートフォンサイト制作でコンバージョン率を上げる7つのポイント|MarTechLab(マーテックラボ)
  • スマートフォンサイト制作時に覚えておきたいCSS 15

    スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に

    スマートフォンサイト制作時に覚えておきたいCSS 15