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

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

ブラウザ上で可愛いフィルターを実現！TensorFlow.jsを使ったリアルタイム顔認識 7月9日公開岩間日菜♥ 18

AfroRay 2020/02/26

リンク

エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA

ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。レベル1、基本的な校正ルールを使ういろんな場面で使える基本的な文章校正テクニックから紹介します。テクノロジー系の名詞は正しく記載しているかテクノロジー系の名詞を間違って使うと、「本当に技術に詳しいの？」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 Github → GitHub（Hは大文字） Javascript → JavaScript（Sは大文字） After Effect → After Effects（複数形の「s」を忘れてはいけな

AfroRay 2018/10/05

万人が学ぶべき文書校正

リンク

CSSで円グラフや集中線が描けるconic-gradient入門 - ICS MEDIA

CSSのグラデーションconic-gradient()関数は、conic（円錐）の名のとおり、円錐状にグラデーションを描画するものです。conic-gradient()関数を使用すると、円錐状のグラデーションはもちろん、集中線や市松模様といった表現が手軽に実装できます。 ▼ conic-gradient()関数で実装したグラデーション例 ▼ conic-gradient()関数で実装した演出例サンプルを別ウインドウで開く本記事ではconic-gradient()関数の基本的な使い方を解説しつつ、応用的な表現やクロスブラウザ対応の方法を紹介します。 conic-gradient()関数の基礎 linear-gradient()関数・radial-gradient()関数との比較 CSSでグラデーションを実現する手段は次の3種類があります。 linear-gradient()関数：直線状

AfroRay 2018/09/11

新機能

css
chrome

リンク

上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA

CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-it ems: center; } デモを別ウインドウで再生するソースコードを確認する Flexboxだと3行対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。すべてのモダンブラウザでベンダープレフィックスなしで動作します。 ▼ CSS .container { display: flex; justify-content: center; align-it ems: center; } ▼ 画像をウインドウの上下中央に配置

AfroRay 2018/04/06

リンク

ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA

みなさんは、CSSを書くときに管理のしやすさを意識していますか？　CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。何も意識せずにCSSを書くと、誰も読めない、理解できない何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまったスタイルが上書きされすぎていて、 !important せざるを得ないといった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設

AfroRay 2017/03/15

再利用しない設計参考になった！

リンク

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