VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 - ICS MEDIA
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。このライブラリを筆者が開発しているのですが、今年4月に公開したところ大変好評いただきました。 たくさんの要望もいただき、新しい機能を追加したのでアップデート内容を紹介します。今回はアニメーション制作において必要度の高い機能追加をメインに、各機能のブラッシュアップを行っています。 基本的な使い方や導入方法は、前回の記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを繰り返すloop() 新機能：トゥイーンを連続で遅延させるlag() 遅延させ
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説 - ICS MEDIA
Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが（参照：npm trends）、記事『ベストな手法は？ Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。本記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基本的には作法的な書き方はあまり軽減しませ
API通信一切なし！Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
Vue.jsにはOption APIやClass方式があり、Vue.jsバージョン3からはComposition APIも増え、さまざまな作り方があります。Vue.jsを基礎としているフレームワーク、Nuxt.jsも同様にNuxt Composition APIとしてNuxt.js用に拡張されたものがリリースされています。 さらにNuxt.jsには静的サイトジェネレートという強力な機能があります。Nuxtの静的化のための機能はOption APIで提供されていましたが、Composition APIでの使い方はあまり解説記事がありません。本記事ではNuxt Composition APIを使って静的サイトを生成する方法を解説します。 下記は実際にNuxt Composition APIで静的化したものと、非同期処理を比べたデモです。 サンプルを別ウィンドウで開く コードを確認する Nuxt
CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。仕様上許可されないものは赤色で点滅、ダメではないが、やらない方がベターなものは黄色で点滅するようになっています。 当記事では下記のデモを見ながらだと理解を深めやすいので、合わせて読むことをオススメします。 サンプルを別ウィンドウで開く コー
最新のユーザーエージェント対応はどうするべきか？ - ICS MEDIA
ユーザーエージェント文字列は、ユーザー分析やデバイス・ブラウザーで処理を分けたい時に広く用いられています。取得方法は昔からあまり変わっておらず、ウェブブラウザーの種類・バージョン・プラットフォームごとに固有の文字列を取得しています。 実は、この文字列が近い将来固定化され、正常に情報を取得できなくなってしまうことをご存知でしょうか？ 今回はユーザーエージェント文字列の変遷を追いながら、現在策定されている新しいユーザーエージェント仕様である「User-Agent Client Hints」の概要を紹介します。 User-Agent Client Hintsの使い方、ユーザーエージェント文字列が固定化された時の対応についてもまとめています。 旧来のユーザーエージェント判別方法 従来のユーザーエージェント文字列取得は、navigatorオブジェクトのuserAgentプロパティを参照する方法です。
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
最新WebGL通信 〜いまキャッチアップしたいWebGL2・WebGPU・WebXRとは〜 - ICS MEDIA
2011年に仕様が正式リリースされて以来、WebGLは多くのブラウザベンダー、コンテンツ開発コミュニティの手によって普及してきました。本記事では、2019年1月現在のWebGLの現状と周辺技術、そして未来について紹介します。 環境が完全に普及したWebGL 1.0 WebGLの最初のバージョンであるWebGL 1.0は、現在ではデスクトップ、モバイルともにすべての主要なブラウザで対応しています。対応環境という観点ではもはや案件での採用も問題ない状況といえるでしょう。実際のユーザーのWebGLサポート環境を集計する「WebGL Stats」によると、デスクトップ、スマートフォンともに98%もの環境で動作していることがわかります。 ▲WebGL 1.0を利用可能なブラウザについて。「Can I use…」より ▲WebGL 1.0のサポート環境について。「WebGL Stats」より 国内でも
エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル1、基本的な校正ルールを使う いろんな場面で使える基本的な文章校正テクニックから紹介します。 テクノロジー系の名詞は正しく記載しているか テクノロジー系の名詞を間違って使うと、「本当に技術に詳しいの？」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 Github → GitHub（Hは大文字） Javascript → JavaScript（Sは大文字） After Effect → After Effects（複数形の「s」を忘れてはいけな
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
ブラウザ拡張Selenium IDEでユーザー操作を記録・再現できる！UIテストの自動化に活用しよう - ICS MEDIA
ブラウザ拡張Selenium IDEで ユーザー操作を記録・再現できる！ UIテストの自動化に活用しよう Selenium IDE（セレニウム・アイディーイー）とは、ブラウザ操作を記録・再現できるChrome、Firefoxで利用可能な拡張機能（アドオン）です。 手軽に記録・再現ができるため、アイデア次第で色々な使い方ができます。筆者は、会社の打刻操作（社内サイトへアクセス → ログイン → 打刻ページへ遷移 → 打刻ボタンをクリック）を記録し、自動実行することでいち早く出社ができるようにしていました。 その他にも開発時に繰り返し行うようなデバッグ作業やルーティーン作業を記録することで、以下のような活用もできます。 入力フォームなどに文字を入力する操作を記録しておき、自動入力させる。 ゲームやSPAのデバッグ時に、スタート画面からデバッグしたい画面までの移動操作を記録しておき、任意の画面へ
上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィッ
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
