Storybookでモジュール一覧を作る | フロントエンドBlog | ミツエーリンクス
当社ではサイトを構築する前に、全体で共通して使うパーツ（当社では「モジュール」と呼んでいます）を洗い出し、モジュールだけを集めたモジュール一覧ページを作成することがあります。モジュール一覧には、各モジュールをどのようにマークアップするか、マークアップ時の注意点などを羅列します。一覧を作成しておくことで、複数人で作業した場合でも人によるマークアップのゆれを減らし、効率のよい開発ができます。 最近はReactやVue.jsをはじめとするフレームワークを使用するプロジェクトが増えてきており、モジュールと同じようにコンポーネント一覧を作ることがあります。モジュールはコンポーネントに似ていますが、コンポーネントはさまざまな状態（State）を持ち、状況によって見た目や機能が変わるという違いがあり、全ての状態を一覧するページを0から作るのは手間がかかります。そんなときにオススメなのが「Storyboo
どうして！？document.querySelectorAll(selector).addEventListener()が動かないわけ | フロントエンドBlog | ミツエーリンクス
2018年5月24日 どうして！？document.querySelectorAll(selector).addEventListener()が動かないわけ UI開発者 宇賀 みなさんこんにちは！UI開発者の宇賀です。 今回は、先日掲題のようなお便りをいただきましたので記事にしてみました。 社内外問わずjQueryからJavaScriptの世界へ入ってきた方々の中にも、脱jQueryとまでは言わなくともVanilla（純粋なJavaScript）でコードを書く練習をしているデベロッパが多くなってきたと思います。 今でも幅広く世の中で利用されているjQueryが持つメリットの中でも、特に高い恩恵をもたらす仕様の1つに「暗黙的にforEachのようなループ処理が実行されること」があげられると私は考えているのですが、同時にこの「暗黙的に」という部分が厄介な点でもあります。 これはVanilla入
思わぬところで学習スイッチが入るかもしれないJavaScriptの小ネタ5選！ | フロントエンドBlog | ミツエーリンクス
2018年4月24日 思わぬところで学習スイッチが入るかもしれないJavaScriptの小ネタ5選！ UI開発者 宇賀 みなさんどうもこんにちは、UI開発者の宇賀です！ もうすっかり春ですね。暖かくなってきて過ごしやすくなってきましたが、花粉との戦いに日々明け暮れたり、新しい環境に四苦八苦したりと、反面身の回りは大変な時期なのではないでしょうか。 今回はJavaScriptを学び初めてしばらくすると陥りがちな「学習に飽きてきた状態」な方向けの記事です。 何かを作るために必ずしも直接必要ではない知識を知ることで、意外と学習スイッチが入ったりすることがある個人的な経験から、ちょっとした小ネタをいくつか紹介したいと思います。 微妙なチョイスで「最近ちょっとマンネリ化してきた」という方の学習スイッチを押していきたいと思います。 注意： 本記事は、これから紹介するコードや仕組みの利用を推奨するもので
React NativeのVue.js版！？Weexでネイティブアプリを開発しよう！ | フロントエンドBlog | ミツエーリンクス
2018年3月8日 React NativeのVue.js版！？Weexでネイティブアプリを開発しよう！ UI開発者 加藤 先日Google社がFlutterというフレームワークのベータ版を発表しました。FlutterはiOSとAndroidアプリをワンソースで開発できるフレームワークです。ここ数年、複数のプラットフォーム向けの開発を同時に行うクロスプラットフォーム開発が盛り上がっており、React NativeやNativeScriptなどWeb開発用のライブラリをベースとしたフレームワークもいくつか存在します。 今回はその中からWeexという中国のAlibaba社が開発したフレームワークをご紹介します。React Nativeは名前の通りReactを、NativeScriptはAngularを公式にサポートしているのに対し、WeexはVue.jsをサポートしています。（プラグインを使用
picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 | フロントエンドBlog | ミツエーリンクス
2016年12月22日 picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 UI開発者 宇賀 数多の画面サイズ、従来に比べて2～3倍あるいはそれ以上の解像度を誇るディスプレイなど、日々Webサイトが閲覧される環境の種類は着実に増えています。そんな中Webサイトを制作していく上で、やはり画像のレスポンシブ対応や高解像度対応などが課題となることがあります。 picture要素やsrcset属性を用いることで、画像についてのそうした課題を解決することができます。 ※ この記事に登場するサンプルは、次のリンクでサポート状況が確認できます。サポート外の環境では正常に表示されません。 picture要素のサポート状況（Can I use） srcset属性のサポート状況（Can I use） 画像のレスポンシブ対応 通常、以下のように画面幅に応じて画像を拡縮させる対応方法が主だ
デザイン・開発間での作業効率を高める幾つかの方法 | フロントエンドBlog | ミツエーリンクス
「デザイナーがデザインしたものを開発者がコードを書いて実装する」、一言で表すと簡単そうなフローですが、デザインと開発の分業による従来のWeb制作フローではお互いが相手の作業を理解する機会が生まれない限り、Webにおいて再現不可能なデザインが入稿されてしまったり、開発者へデザイン趣意が伝わらず、意図したデザインに仕上がらないなどの問題が発生し、制作フロー上のボトルネックになる可能性が多くありました。 しかし、昨今ではデザインを行う制作環境の幅は広がっており、Sketchを用いたデザインからCSSを書き出したり、インタラクティブ表現ができるプロトタイプツールから基盤となるデザインを決めることができるようになるなど、開発者にも関連のある環境になってきています。 また、各種ベンダーブラウザにおけるデベロッパーツールの進化によりインブラウザデザインが発達し、デザイン・開発者両者にとっての垣根は徐々に
AMPコンポーネントの使用方法とその効果 | フロントエンドBlog | ミツエーリンクス
以前投稿したAMP対応でモバイルユーザーを獲得するという記事で、AMP対応においてサイトの機能性やデザインの再現性への影響が大きいと思われる制約の一つとして、「AMP JS以外のJavaScriptの記述と読み込みの禁止」という項目があることをご紹介しました。今回はそれを補うための手段をご紹介します。 AMP JS以外のJavaScriptの記述や、読み込みが禁止されていることによる影響の大きさはサイトによって様々ですが、jQueryやlodashなどのライブラリやフレームワーク、スクラッチで開発したJavaScriptファイルを読み込むこと、script要素を用いてHTMLソース内にJavaScriptソースを記述することも禁止されています。 AMP HTMLでカルーセルやアコーディオンメニュー等の機能を実装するためには、AMPコンポーネントを使用します。 AMPコンポーネントとは、外部
SVGを使用して鮮明なロゴへ変身 | フロントエンドBlog | ミツエーリンクス
Retinaディスプレイの登場をきっかけに高解像度ディスプレイのスマートデバイスが多く登場し、その波はすでにPCにも到来しています。高解像度ディスプレイは通常の解像度より画素の密度が高く、より鮮明な表現が可能となっているのが魅力です。では、目的のWebサイトを閲覧している際に、企業ロゴ、製品ロゴ（以下、ロゴと表記）は鮮明でしょうか。それとも、ぼやけていますでしょうか。 ロゴはとても重要な存在です。企業を象徴するロゴはコーポレートアイデンティティ（CI）を構成する要素に含まれるビジュアルアイデンティティ（VI）に該当します。ビジュアルアイデンティティ（VI）は、企業が目指す「理念」「ビジョン」「経営戦略」などに基づいた行動指針を社内外問わず共有するためにデザインとして策定し、企業のイメージを図案化したものです。Webサイトが幾度更新されようとロゴは常に最初に目に留まる位置にいます。つまり、ロ
BackstopJSを使ったCSSのリファクタリング | フロントエンドBlog | ミツエーリンクス
皆さんはCSSをメンテナンスする際に、あるセレクターを削除したら思いもよらないページでレイアウトが崩れていたなどの経験がありませんでしょうか。サイトを運用していくに当たって、CSSのメンテナンスはサイトの構造を熟知していない人が触るとサイト全体のデザインが崩れる可能性があります。その理由として、以下が良く上げられると思います。 セレクターが全てグローバル変数的な扱いになること 悪い意味でスタイルがカスケードをしてしまうこと スタイルを消すことを恐れてスタイルの詳細度を上げて上書きしていくこと 最近、JavaScriptではJasmine、Mocha、QUnitなどテストツールが数多くありますが、CSSをテストするツールは多くはありません。その中で今回は上記の問題を解決するための手段としてサイトの見た目はそのままでCSSの構造を改善するためのリファクタリングツールをご紹介します。 Backs
「Webの創成」からイマのWebを考える | コラム | ミツエーリンクス
数日前、私はこのコラムで何を書こうかと悩みつつ自宅の本棚を漁っていたのですが、その奥の方に青色の書籍「Webの創成」があるのが目に入り、何かのヒントになればと手に取って、久しぶりにページをめくり始めました。読み終えた後、受けた感銘と感嘆を数人の友達に共有せざるをえないくらいTimの先見性やビジョンに打たれました。 面白いことに、11年前に読んだ時には前半がスラスラ読めて後半の章においては理解するのに時間がかかり読むスピードが落ちたのですが、今読むと前半に時間がかかり、後半に入れば入るほどスムーズに読めました。このことは私が最初に「Webの創成」を読んだ2004年と現在の2015年とでWebが大きく変化したことも要因でしょう。つまり、後半に語られるTimのビジョンが今や身近になってきているから、と思えるのです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
