Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを

ちょっと仕事で使うことがあったのでメモ的エントリです。 デザインイメージを表す言葉を思いつく限り書き出し、五十音順に並べてみました。 使えない言葉もあると思いますが、言葉の語彙を増やしたい方の参考としてどうぞ。 あ行 あ 明るい、温かい、安心感のある い 生き生きとした、インパクトのある う 初々しい え エネルギッシュな、エスニックな、エレガントな お おおらかな、穏やかな、落ち着いた か行 か 格調高い、活気のある、堅い、がっしりとした、活発的な、革新的な、カジュアルな、可憐な、ガーリーな き 規律性のある、キュートな、きれいな く クールな け 健康的な、堅実な、元気な こ 高級感のある、高貴な、ゴージャスな、古風な さ行 さ さわやかな、斬新な し 静かな、親しみやすい、シャープな、女性的な、自由な、重厚な、情熱的な、上品な、新鮮な、神秘的な、シンプルな、信頼感のある スイートな、

ヴィジュアル要素をつくるときに使えるような、表現方法をまとめてみました。 メインビジュアルなどをつくるとき、うまく思いつかず困ってるんだよねーって方の参考になるかな、と思います。 ヴィジュアルの表現方法としては、大きく分けて以下の2種類があります。 ■直接的な表現 人・物・動物・タイポグラフィなどそのものを主役に置いた表現。 ■間接的な表現 抽象的なメッセージを主役に置いた表現。「たとえ」や「見立て」の技法を使う。 今回は、間接的な表現の中でどんなものがあるか、修辞技法をもとにまとめてみました。 言葉だけ聞くと難しく感じるのですが、普段私たちが話し言葉でも良く使っているものですので、理解しやすいと思います。 比喩 直喩法 直喩（明喩、シミリー）とは「（まるで・あたかも）～のようだ（ごとし、みたいだ）」のように、比喩であることを読者に対し明示している比喩である。 「修辞技法」（2011年12

これは FOLIO Advent Calendar 2017 の12/3の投稿でもあります。前日は chocoi さんで「とある新興証券会社での AWS Direct Connect 利用に関して」でした。 今回は社内情報システム案件でも中々情報の少ない、Apple製品についてフォーカスを当ててみます。 主にmacOS端末を導入した際の記録的な感じでいろいろ書いていければと思います。 macOS端末はWindows端末とは異なり、シリーズとスペックくらいしか選定基準がないですが、 今後導入することになった際、 「実際導入するとなったらこういう流れになるのか」 「実はそんな仕組みもあるのか」 というキッカケになれば幸いです。 また、実際どういったことを考慮に入れてmacOS端末やiOS端末をキッティング（セットアップ）しているかなどついては、 12/10 12/17に記事を書く予定です。 2

これは FOLIO Advent Calendar 2017 の17日目の記事でもあります。 最近とらドラ！を観返していて、もうそろそろ10年経つとか思うとゾッとします。 さて、先日「Apple製品を会社として導入するための準備をした話」を書きましたが、 準備だけではなく、具体的な導入についても気になる点かと思います。 今回は、中々世に出てこないWindows端末以外のiOS、AndroidおよびmacOS端末をどういった感じで管理・運用していくと良いのか、 そのためにどのようなツールなどを使用しているかを一部紹介できればと思います。 大人の事情により、一言。 この投稿に記載されているポリシーおよび記載した内容は、個人の意見を多く含んでおり、 FOLIOとして適用・運用し続けていることを保証するものではありません。 なぜ端末管理を行うのか 端末の選定するにあたって 仕入先 予算 携帯性 セ

webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ