baba_jdlのブックマーク - はてなブックマーク

LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説 - ICS MEDIA

▲メイン画像（「アニメーションスタンプ制作ガイドライン」より引用） ▲トークルームタブ画像（「アニメーションスタンプ制作ガイドライン」より引用）デザインカラーモードはRGB 画像サイズは幅320×高さ270px以内（幅、高さのどちらかが270px以上あれば、横長や縦長の画像の制作も可能）背景は透過アニメーションのない余白部分は削除 APNGファイルの最初のフレーム画像がLINE STOREまたはスタンプショップの販売時や静止時に表示される再生時間（1つのAPNGファイルあたり）最大再生時間は4秒最大フレーム（コマ）数は5〜20フレーム 1〜4回ループ可能（再生時間4秒を超えない範囲内）データ容量（1つのAPNGファイルあたり） 300KB以下詳しくは「アニメーションスタンプ制作ガイドライン」をご覧ください。この記事の情報もガイドラインの更新にあわせて随時アップデートしてい

baba_jdl 2017/01/27

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境：ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

baba_jdl 2016/12/06

リンク

話題になったウェブサイト事例【2016年夏〜秋】 - ICS MEDIA

私たちが毎日目にしているウェブサイトは、ユーザーの閲覧環境や使用する技術によって日々変化しています。今回は、2016年8〜10月に国内外のブックマークサイトで取り上げられた国内のリッチなウェブサイトを5つ取り上げ、どのような技術や表現手法が用いられているのかを解説します。 IJC MATSURI | IS JAPAN COOL? 別ウィンドウで開く ANAが運営する外国人向けのメディアサイト「IS JAPAN COOL?」で日本の祭りを紹介するスペシャルコンテンツ。サイトの背景一面に映像を表示し、迫力のある音で祭りの臨場感を表現しています。映像の他にもさまざまな演出が各所に用意されており、日本に訪れたことのない外国人でも日本の祭りを感じられます。 ▲デスクトップ版では、祭り独特の所作に似せたUIで映像（数枚のコマ画像）をパラパラアニメのように操作できます ▲360度の全方向を撮影できるカメ

baba_jdl 2016/11/07

リンク

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

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

baba_jdl 2016/09/28

リンク

Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA

スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。プッシュ通知のデモプッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows

baba_jdl 2016/09/28

webでプッシュ通知

リンク

モバイルページ読込を高速化するAMPを三ヶ月間運用してどうだったのか - ICS MEDIA

※AMPは画像を遅延読み込みする機能が存在するため、ファーストビューでの転送容量が少なくなる傾向があります。当サイトもHTTP/2やリバースプロキシーを利用するなどWordPressを極限まで早くするようチューニングしていますが、AMPページではそれよりも高速に表示されています。筆者はモバイルブラウザでのページ読み込み高速化によって、アクセス数が伸びる、SEO的に有利になる、エンゲージメントが向上する、といったことに期待していました。 AMP対応の効果は今のところ局所的結論からいうと、AMP対応して得られたメリットは局所的なものでした。一部の記事がバズったときに、アクセス数の向上を確認できたというものです。まずアクセス数の数値から、AMPの状況を見ていきましょう。次のグラフはAMP対応してから現在までのアクセス数の記録です。 ▲アクセス解析はAMPページのみに絞り込んで表示上位1位の

baba_jdl 2016/09/28

リンク

ブラウザからBluetoothが使える！ JSでWeb Bluetooth APIを使ってBLE機器を操作する方法[Lチカ・温湿度センサー編] - ICS MEDIA

最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 4月5日公開澤田悠♥ 35

baba_jdl 2016/09/28

リンク

HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方レスポンシブイメージとは一体何か？レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り

baba_jdl 2016/09/27

あとで読む

リンク

Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA

ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。この記事で学べること Flexboxの使い方スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。サンプルの紹介今回はレスポンシブな