タグ

ブックマーク / ics.media (6)

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

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

    文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
  • HTMLタグで本格VRコンテンツが作れる! Mozillaが開発した3DライブラリA-Frame - ICS MEDIA

    HTMLタグでVRコンテンツが作れる! Mozillaが開発した3DライブラリA-Frame WebXRフレームワークの「A-Frame」を使えば、JavaScriptを記述することなく、HTMLにタグを追加するだけでVRコンテンツが作成できます。 次のデモはA-Frameを用いてt作成したオリジナルのVRデモです。中央の円状のカーソルを牛の3Dモデルに重ねることでアニメーションします。 ※パソコンではドラッグ、スマートフォンではジャイロセンサーが検知した傾きで視点が変わります。右下のアイコンをクリックすると、HMDで閲覧できるモードへ切り替わります。 デモを別ウィンドウで開く HTMLをマークアップするようにVRコンテンツを作成しよう VRコンテンツをHTMLのマークアップのように作成するには、JavaScriptライブラリ「A-Frameエー・フレーム」を使用します。「やっぱりJa

    HTMLタグで本格VRコンテンツが作れる! Mozillaが開発した3DライブラリA-Frame - ICS MEDIA
  • Electronの公式テストフレームワークSpectron入門 - ICS MEDIA

    Spectron(スペクトロン)はElectronの為のテストフレームワークで、ElectronのAPIを使用したテストが可能になります。テストを取り入れることで、「想定していた動作と違う」「作成していた機能がいつの間にか動作しない」といったことを未然に防げます。 Spectronからは実際にElectronアプリを起動することができ、「ウィンドウのタイトル」「デベロッパーツールの表示状態」といったことをElectronのAPIにアクセスして取得できます。また、「ページの画像キャプチャー」機能でデザイン崩れが発生していないかのチェックや「ページのテキスト保存」でテストに失敗した時のHTMLテキストの取得、「console.log()で書きだした内容の取得」も可能です。これらのテストは手元の開発機だけでなくJenkinsなどCI(継続的インテグレーション)サービス上でも使用できます。 ▲

    Electronの公式テストフレームワークSpectron入門 - ICS MEDIA
  • 今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

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

    今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
  • JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA

    プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度(分布)で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ (HTML5製) 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を

    JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA
  • JenkinsでCI環境構築チュートリアル (Windows編) - ICS MEDIA

    CI環境のサンプルとして前回、記事「作業の効率化のためのCI環境構築」を紹介しました。この記事を公開したところ、環境構築の仕方を知りたいとの要望を多数の読者から頂きましたので、複数回の記事に分けて説明したいと思います。 Jenkinsを利用されている方は、LinuxmacOSで利用されている方が多いと思いますが、記事ではサーバが苦手な人でも導入できるよう、「Windows環境を使ったCI環境構築」をテーマとして手順を説明します。 1。ソフトウェアのインストール 環境構築に必要なソフトウェアをインストールしましょう。必要となるソフトウェアは以下になります。 Jenkins 2.7.2(http://jenkins-ci.org/) git for windows 2.9.3(http://msysgit.github.io/) WinSCP 5.9.1(http://winscp.net

    JenkinsでCI環境構築チュートリアル (Windows編) - ICS MEDIA
  • 1