タグ

スマホに関するk3akinoriのブックマーク (23)

  • Microsoft Power AppsでiOS/Androidのネイティブアプリ開発が可能に。Iginte 2021

    Microsoft Power AppsでiOS/Androidのネイティブアプリ開発が可能に。Iginte 2021 マイクロソフトは、11月3日、4日に開催したオンラインイベント「Microsoft Ignite 2021」で、ローコード/ノーコード開発ツールのPower Appsの新機能として、iOSとAndroidのネイティブアプリ開発を可能にする「Power Apps mobile apps 」プレビュー版を発表しました。 Power Appsのアプリケーションをネイティブアプリにすることで、モバイルデバイスでPower Appsのアプリを利用するためのPower Appsプレイヤーアプリが不要となります。 そしてモバイルデバイスのホーム画面からアプリ専用のアイコンをクリックすると特定のアプリケーションが起動するという、通常のモバイルアプリと同様の操作とUXにおける一貫したユーザ

    Microsoft Power AppsでiOS/Androidのネイティブアプリ開発が可能に。Iginte 2021
  • 実機検証 クラウドサービスを端末や料金で比較してみた(2017年4月現在)

    実機検証 クラウドサービスを端末や料金で比較してみた(2017年4月現在) by shirushiru · 公開 2017年4月18日 · 更新済み 2017年4月20日 スマホ向けサイト構築、ネイティブアプリ開発をする際、特にAndroid向けにおいては、端末による「機種依存」問題を気にする必要があります。 まぁ、キャリアごとにまったく表示が違ってしまうことがあったガラケー時代と比較すると、だいぶ楽にはなりましたが。。 それでも、世に出すサービスであれば、特に利用者が多い端末については、しっかりと検証は必要です。 といっても、端末を自分で用意するのは大変。 そんな時に、実機端末をクラウド上で簡単に操作して、検証できるサービスがありますので、ご紹介いたします。 Scirocco Cloud 公式サイト もっとも有名なサービスだと思います。私は、月額制で使っていました。 今は利用機会が減った

    実機検証 クラウドサービスを端末や料金で比較してみた(2017年4月現在)
  • Web Share APIによるシェア機能を使ってみる | 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部

    子どもが生まれてからすっかり早寝早起きになったムラタです。 何かしらのSNSを使って記事をシェアすることが当たり前になった昨今、ブログ記事やページにシェアボタンを配置することはとても多くなったと思います。 ただ実際配置するとなると大体「Facebook」や「Twitter」や「LINE」のシェアボタンだけになることが多く、その他のシェアしたいサービスへの選択肢を失わせているかと思います。 かといってシェアしたい可能性のある全てのサービスのボタンを配置するなんて勿論どう考えても現実的じゃないですよね。 まあFacebook、TwitterLineがあればほとんどのユーザーは事足りるといえばそうかもしれないですが、できるならユーザー側で任意のサービスを選ばせてあげられるといいと思いませんか? 割と最近使えるようになった「Web Share API」という仕組みを使うとユーザーの端末にインスト

    Web Share APIによるシェア機能を使ってみる | 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
  • JavaScriptユーザエージェント判別・判定

    Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi

    JavaScriptユーザエージェント判別・判定
  • 今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

    みなさん、入力フォームを制作する際、どのような施策をおこなっていますか? 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chromeデスクトッ

    今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
  • スマホ(iPhoneのsafari)のようにナビをスクロールの方向によって表示したり非表示にしたりする | スターフィールド株式会社

    私はiPhoneユーザーなのですが、safariの下部にあるメニューって下へスクロールする時は消え、上へスクロールしている時は表示されてますよね? PCのページにもそのようなメニューが増えてきているとは思います。 そこで試しに作ってみました。 早速ですが、DEMOをご覧ください! DEMO jQueryとcss3で実装しています。 ソース html <div class="navi"> <ul> <li><a href="">HOME</a></li> <li><a href="">Recruit</a></li> <li><a href="">Contact</a></li> <li><a href="">Access</a></li> </ul> </div>

  • アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付) | ベイジの社長ブログ

    スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。(以降、両者をガイドラインと略します) スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14%しかなく(comScore調査/2014)、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは

    アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付) | ベイジの社長ブログ
  • Android実機のデバッグが激しく捗る「Webインスペクタ」

    Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する連載。第4回は、Android端末に表示しているWebサイトを、Chromeデベロッパーツールで検証する「Webインスペクタ」を解説します。 特定デバイスでのバグ、表示崩れの原因を調べたい スマートフォン向けにコーディングをしていると、特定の端末でしか発生しないバグや表示崩れがあります。「特定の端末」の場合、第1回で解説した「Device Mode」では問題が再現せず、原因の特定は困難です。 原因を特定するには、バグ、表示崩れが発生した端末でChromeデベロッパーツールの「Webインスペクタ」を使って、問題のWebページを表示しながら検証します。 Webインスペクタの設定方法 Webインスペクタに使用するAndroid端末の設定を変更します。設定画面を開き、「開発者向けオプション」を表示します。

    Android実機のデバッグが激しく捗る「Webインスペクタ」
  • ★はじめに  |  Search  |  Google Developers

    フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 モバイルサイトとモバイルファースト インデックスに関するおすすめの方法 Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。 モバイル版のページを用意することは、コンテンツを Google の検索結果に表示させるための要件ではありませんが、非常に強く推奨されています。このページで説明するおすすめの方法は、モバイルサイト全般にあてはまり、当然のことながら、モバイルファースト インデックスにもあてはまります。 ユーザーに最適なエクスペリエンスを提供できるよう、このガイドで紹介されているおすすめの方法を実践してください。 モバイル フレンドリーなサイトを

    ★はじめに  |  Search  |  Google Developers
  • サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新

    京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

    サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
  • WebサイトMetaタグ 設定例まとめ(PC/SP別) - Qiita

    とりあえずこうしとけば良さそうな設定一覧。 alternate スマホサイトURLや他言語サイトURLを指定。 例: <link rel="alternate" media="handheld" href="このページのモバイル版URL"> <link rel="alternate" media="only screen and (max-width: XXXpx)" href="このページのスマホ版URL">

    WebサイトMetaタグ 設定例まとめ(PC/SP別) - Qiita
  • グーグル新アルゴリズム向けのスマホ対応で押さえておくべきポイント | ベイジの社長ブログ

    Googleから、モバイルフレンドリー(いわゆるスマートフォン対応、以下スマホ対応)であるかどうかを2015年4月21日以降の検索ランキングに反映する、という公式発表がありました。早急にスマホ対応をしないと流入が大幅に減るのでは、と脅威を感じているWeb担当者や制作者も少なくないでしょう。 そこでこのエントリーでは、現在スマホ対応ができていないWebサイトが、今回のアルゴリズム変更をどう判断すべきかのポイントを整理してみました。 企業サイトにおけるモバイル訪問比率の現状 弊社で実施している数多くのWebサイトに対するログ解析やヒアリング内容から、サイトタイプ別のモバイル流入比率はだいたい以下のようになっていると考えられます。 比率の少ないWebサイトでも20~30%に達し、モバイルと親和性の高いWebサイトでは80%前後まで至ることもある。ただし実際にはビジネスモデルやターゲット特性、掲載

    グーグル新アルゴリズム向けのスマホ対応で押さえておくべきポイント | ベイジの社長ブログ
  • Bootstrapをカスタマイズ!ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas

    Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/> </head> <body> ... <script src="../dist/js/bootstrap.offcanvas.js"></script> </body> Step 2: HTML まずは、オフキャンバスのナビゲーションを開くボタン。 <butt

    Bootstrapをカスタマイズ!ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas
  • NHK「スマホの『消せないメッセージ』に注意」がどんなサイトなのか探してチェックしてみた

    NHKのNEWS WEBに、「スマホに『消せないメッセージ』注意を」というニュースが載っていました。ニュースには、「アクセスするとスマートフォンの画面に「消せないメッセージ」を表示して、利用者から金を奪おうとする」、と書かれていたのですが、当然具体的なURLは伏せられていて、「消せないメッセージ」の正体(表示方法など)も不明でした。そこで、実際にニュースになっていたサイト(ワンクリック詐欺サイト)を探し出してみたので、それで分かった仕組みについて、確認した範囲で紹介します。消せないメッセージを消す方法については、記事の最後に紹介しています。 目次 1. 「消せないメッセージ」のニュース2. サイトを探す3. 「消せないメッセージ」全文4. 「消せないメッセージ」は無限alert5. 「消したかったらお金を払え」ではなかった6. 消えないメッセージの挙動7. 消えなくなったときの対処法8.

    NHK「スマホの『消せないメッセージ』に注意」がどんなサイトなのか探してチェックしてみた
  • 画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? - Webパフォーマンスについて

    これは、HTML5 Advent Calendar 2014の7日目のエントリーとして書いております。 2008年4月1日に初版が発行された、オライリー・ジャパンの「ハイパフォーマンスWebサイト」を未だに参考にされている方は多いと思います。 ウェブページ内で、背景やボタン、ナビゲーションバー、リンクなどで多数の画像を使う場合は、CSSスプライトを使うのがエレガントな解決策です。そうすることで、マークアップが整理され、扱うべき画像の数も減り、レスポンスも高速になります。 ― 「ハイパフォーマンスWebサイト 高速サイトを実現する14のルール」 Steve Souders著 その部分を参照されてか、時折、「CSSスプライトを使うことで、HTTPリクエスト数が削減されて、高速化に繋がる」と書かれている方をお見受けします。 しかし、それは当なのでしょうか? そこで、今回、当に効果があるのかど

    画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? - Webパフォーマンスについて
  • スマホサイト改善テク!タップで電話できるリンク設定とイベントトラッキングの基本を試す

    スマホサイトからの問い合わせを増やしたい? それなら、タップで電話がかかる仕組みを活かしましょう。リンクをポンで電話をかけられるのは、スマホサイトならではのアドバンテージです。 同時に、Googleアナリティクスでイベントトラッキングの設定も忘れずにしておきます。タップによる電話の発生を計測し、さらに問い合わせを増やすための改善のヒントを得られます。 両方とも、それほど手間はかかりません。ほぼコピペでOKなので、ぜひこの機会にお試しあれ! 著者情報:この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談>サービスメニュー】 💬 𝕏(twitter)はよくフリーランスの人たちにフォローされてるようです。 Follow @websae20

    スマホサイト改善テク!タップで電話できるリンク設定とイベントトラッキングの基本を試す
  • プレス発表 【注意喚起】HTTPSで通信するAndroidアプリの開発者はSSLサーバー証明書の検証処理の実装を:IPA 独立行政法人 情報処理推進機構

    ~米国CERT/CC (*1)が脆弱性のある617のAndroidアプリを指摘 (*2)。今後さらに指摘される見込み~ IPA(独立行政法人情報処理推進機構、理事長:藤江 一正)セキュリティセンターは、米国のCERT/CCが2014年9月3日、複数のAndroidアプリに「SSL証明書を適切に検証しない脆弱性」を確認したとの発表を受け、Androidアプリ開発者に対して注意喚起を発することとしました。 HTTPS(HTTP over SSL/TLS)でサーバーと通信するAndroidアプリは、HTTPS通信の開始時に通信先から送信されたSSLサーバー証明書が適切か検証する必要があります。来、HTTPS通信では、利用者とウェブサイトの通信経路上に攻撃者が割り込み、通信内容を盗聴したり改ざんしようとする攻撃(中間者攻撃)を防ぐことができます。しかし、開発者が提供するAndroidアプリが「S

    プレス発表 【注意喚起】HTTPSで通信するAndroidアプリの開発者はSSLサーバー証明書の検証処理の実装を:IPA 独立行政法人 情報処理推進機構
  • ドロワーというナビゲーションの再考 | UXデザイン会社Standardのブログ

    以前Facebookのアプリケーションで採用されたことを皮切りに、ここ数年で多くのアプリケーションで使われることになったドロワーというナビゲーションについての考察です。 最近ネット上でも話題になっており、安易なナビゲーションへの採用が見直されているされているインターフェイスでもあります。しかしドロワーの必要性について疑うことは良いのですが、表面的にただドロワーを使ってはいけないという情報に左右されていては、安易なドロワーはなくなったとしても、次に安易なタブなどが量産されるということが予測できます。 UIに関わるデザイナーとしては、なぜドロワーが適していないのかということと同時に、どのような状況下であればドロワーが適しているのかは考え続ける必要があるでしょう。 ドロワーの歴史 まず名前の由来としては、たしか2013年にAndroidでナビゲーションドロワーのためのフレームワークが公開されたこ

    ドロワーというナビゲーションの再考 | UXデザイン会社Standardのブログ
  • スマホでWebを見る人が増えると、サーバーの設定を変えなきゃいけなくなった話 | 初代編集長ブログ―安田英久

    接続処理中の状況が大量にあり、接続によってはアクセス開始から数分間「接続受付中」だったりと、通常では考えられない状況でした。 わかりやすく言うと「もうダメ、これ以上アクセスが来ても処理できないです」という状態でした。 Yahoo!砲などの大量アクセスがあったわけでもないのになぜだろうと考えて、思い当たったのがスマホでした。特に、スマートニュースやグノシーなどのニュース系アプリからのアクセスですね。 PCからのサイト閲覧が中心のとき問題なかったのに、同じアクセス数でもスマホからのアクセスが増えるとWebサーバーがいっぱいいっぱいになってしまうことがあるのです。 ガラケー向けのケータイサイトをやっていた人には当然のことなのですが、モバイルからのアクセスというのは、サーバーから見るとちょっと面倒なんです。通信速度は遅いし(つまりデータの送受信に時間がかかる)、接続の途中で電波の状況が悪くなってし

    スマホでWebを見る人が増えると、サーバーの設定を変えなきゃいけなくなった話 | 初代編集長ブログ―安田英久
    k3akinori
    k3akinori 2014/04/02
    リバースプロクシ、覚えておこう。
  • スマートフォンサイト制作時に覚えておきたいCSS 15

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

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