[B! web制作][iOS] shirotorabyakkoのブックマーク

consim. β

Made by @chiharukodama If you have any feedbacks or ideas, please contact me at Twitter. Also, donation is very appreciated!

shirotorabyakko 2020/08/24

リンク

今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

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

shirotorabyakko 2019/12/15

リンク

iOS Design Guidelines

September 28, 2015 in design iOS Design Guidelines About these guidelines These guidelines describe how to design apps that follow the official HIG for iOS by Apple, not what you can do with custom controls. Sometimes it makes sense to break the rules. The purpose of this document is to guide you, not to provide solutions for complex and unique design probl ems. Resolutions and Display Specificatio

shirotorabyakko 2018/11/07

リンク

Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita

iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。

shirotorabyakko 2015/09/27

リンク

Universal Links - Apple Developer

Universal links for developers Seamlessly link to content in your app or on your website. With universal links, you can always give users the most integrated mobile experience, even when your app isn’t installed on their device. What’s new in universal links Universal links allow your users to intelligently follow links to content in your app or to your website. Learn how the latest enhancements i

shirotorabyakko 2015/09/14

リンク

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

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

shirotorabyakko 2015/07/08

リンク

iOS でヘッダー固定のドロワーメニューを実装するときに気をつけたいこと

最近、スマートフォンを中心にドロワーメニューが流行っている。こういうやつ。実装するのは極めて簡単で、トリガーとなるボタンが押されたらメインのコンテンツ部分に transf orm: translateX( 100px ) みたいにして動かすだけ。で、閉じるときにはその値を 0 に戻す。ただこれ、固定ヘッダーを用いる場合には iOS でちょっと壁にぶつかる。iOS では GPU アクセラレーションが有効になっている要素内の全ての要素で position: fixed が position: relative のように振る舞われるためだ。一度でもドロワーメニューが開かれれば translateX が当たっているので、その要素内に固定のヘッダーとかを持っている場合には固定されなくなってしまうのだ。対応策は、固定ヘッダーをやめる translateX の代わりに left プロパティを使う