コンポーネント単位で考えるWeb制作 Remixing Vol.3 登壇資料 2015.12.05 (最終更新:2024.02.11) 作品と活動 勉強会資料 HTML Sass CSS EJS LIG inc 約200字 「Remixing Vol.3 with オールアバウト and LIG」へ登壇した際に初めて公開したスライドです。 Web制作で画面要素のコンポーネント化をすすめることによるメリットと、実践的なコンポーネントの実装手法について説明しています。 スライド
※gulp-ejsでのビルドを想定しています。 EJSでできること 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ) HTMLへの値の展開 ループと条件分岐 外部ファイルの読み込みとパラメータの引き渡し <% %>の種類 <% %> このタグの内側はJavaScriptワールドになる。HTMLとしては出力されない
gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないというときがあります。 そんなときに使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。 !(エクスクラメーションマーク)を使う 結論から書くと、除外したいディレクトリやファイルのパス指定前に**!(エクスクラメーションマーク)**を記述すれば除外指定することができます。 何らかの理由でこのファイルはLintさせないとか開発時にしか使用しないディレクトリ・ファイルを公開用にgulp.dest()するのに含めないとかいろいろ使う場面はありますが、そのような時にgulp.src()などで指定するパス前に!を記述すれば特定のディレクトリ・ファイルを除外指定できます。 実際の使用例 「!(エクスクラメーション
yamanoku.hatenablog.com 以前CSSプロパティの記述順に対してどうするかなどと悩んでいましたが、1つの解決策を見つけました。 CSScombを使用してみる 自分で記述順を悩むなんてアホくさいので機械に全部処理してもらうということになりました。というわけで以下をインストール。 CSScomb: Makes your code beautiful npm install csscomb --save-dev CSScombってどういうものなの CSScombはcssのプロパティの整形をしてくれるプラグインで、sublimeTextにもパッケージがあります。整形はpleeeaseでもできそうな気がしたけど、思っているプロパティ整理はなさそうなので有用そうなものを使用してみました。 以下はgulpを使っているので他の記述とは異なる箇所もあるのでご了承ください。 gulpfil
作成:2015/06/22 更新:2018/05/27 Mac > Web制作 Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Node.jsとは Node.jsをインストールする Mac版バージョン管理ツール:nodebrew Windows版バージョン管理ツール:nodist パッケージマネージャー npmの使い方 gulp(ガルプ)のインストールと使い方 Node.jsとは ご存知な
ファイル構成 project ├── node_modules ├── public_html ├── resource │ ├── **/*.html │ └── common │ ├── css │ ├── images │ ├── js │ ├── sass ├── gulpfile.js ├── package.json ├── .csscomb.json こちら、構成としてはresourceフォルダがいわゆる作業用ファイル群で、public_htmlがgulpで出力した納品用ファイルとなります。 なので、当然ですがpublic_htmlはほぼ触りません。 つまり、resourceフォルダとpublic_htmlフォルダの中身って、ほぼ一緒になります。 以前は同一フォルダにgulp.destしてたんですが、sassフォルダが邪魔だった
フロントエンド開発に便利なNode.js環境で、ファイル変更時に自動でSass(SCSS)からCSSファイルを生成したい。 2016-06-17 追記 上位互換記事を書きました。 gulp-sassで自動でSass/SCSSからcssファイルを生成したり、他にもいろいろする - 人生リアルタイムアタック 準備 以下のようなディレクトリ構成を想定。 . ├── css │ └── // cssファイルの生成先 └── assets └── sass └── main.scss インストール gulpとgulp-sassをインストールする $ npm install gulp gulp-sass gulpfile.jsの作成 まずは最も簡単な例として、*.scssに変更があれば自動で*.cssを生成する例。 var gulp = require('gulp'); var sass = re
先日のこと,カードソーティングゲームを元にUIをつくる演習の回で,「模写」を取り入れてみた.経緯として,昨年度の同じ課題の際に,ペーパープロトのスケッチを描くあたりで手が止まってしまう学生が多くて,毎日いろんなアプリを使っているのにUIは本当に見えないものなのだなぁ,という気付きがあった.でも,考えてみればUIはよく出来ていればいるほど,透明化して意識から消えてしまうものだ.デザインする以前にそもそも意識化する必要があるんじゃないか・・・と思って試しにやってみた次第である.軽くググってみたけど,UIの模写を教育の場で取り入れている例はほとんど無いようだ. ここで模写するアプリとして,料理レシピサービスのクックバッドを選択した.理由として,まず,学生達でも一度は使ったことがあるサービスであること(クックパッドはなんと月間6000万以上のユーザ数らしい.凄い数字だ).そして今回のカードソーティ
はじめに アプリによってビジネスモデルは異なりますが、大多数のアプリがゴール(KGI)にしているのは売上増かと思います。 では、あなたは売上増に向けた指標の把握と整理ができているでしょうか? この記事ではKPIツリーを使ってアプリの売上に貢献する指標を洗い出し、各指標について説明したいと思います。 1.KPIツリーの重要性 ◆そもそもKPIツリーとは? KPIツリーとは、例えばアプリのKGIを売上とした場合、売上を構成する要素を分解して施策が実行可能になるレベルまで落とし込まれた指標(KPI)の一覧です。 ◆KPIツリーを作らない場合の問題点 ①ボトルネックとなっている問題がわからない 売上を構成する要素を洗い出さないと、売上増の妨げになっている問題に気づかないことがあります。 ②具体的な施策を考えるのが難しい 売上やアクティブユーザー数など上位の指標を分解しないままでは、「じゃあその指標
安宅和人『イシューからはじめよ―知的生産の「シンプルな本質」』を読了したので、要点をまとめてみました。 著者のマッキンゼー&大学での研究の経験を基にした内容でしたが、 問題設定→仮説立て→調査→分析→他人への伝達 というフローで仕事や研究をしている人には参考になる点が多い本かと思います。 元になった著者のブログ記事 http://d.hatena.ne.jp/kaz_ataka/20081018/1224287687 ↑本書が書かれるきっかけとなった記事です。 本書の核の部分を掴みたいという方はこちらも是非ご覧になってください。 イシューからはじめよ――知的生産の「シンプルな本質」 作者: 安宅和人出版社/メーカー: 英治出版発売日: 2010/11/24メディア: 単行本(ソフトカバー)購入: 48人 クリック: 660回この商品を含むブログ (145件) を見る 目次 はじめに 優れた
SlideShare(スライドシェア)を利用していて、ふとこれはかなり情報収集に役立つなあと感じたので簡単に紹介してみようと思います。 SlideShare(スライドシェア)とは www.slideshare.net SlideShare(スライドシェア)はプレゼンテーションファイルの共有サービスです。プレゼンの他にもインフォグラフィックや様々なドキュメントが共有されているので、世界最大級のプレゼン共有サービスとも言われています。アメリカ発のWebサービスなので英語の資料がたくさんヒットしますが、日本語で検索してもかなり多くの資料を見つけることができるので問題なく利用できます。 SlideShare(スライドシェア)の使い方に関してはこちらの記事に詳しく書かれている。 SlideShareアプリをダウンロードしよう スライドシェアのアプリは以下から無料ダウンロードができます。スマートフォン
春ですね、いや、夏の匂いを感じる人もいることでしょう。 フロントエンド担当、ザワです。 今回は、フロントエンドエンジニアの私が日常的にチェックして情報を得たり、困ったちゃんの時にお世話になっている主なサイトをご紹介します。 フロントエンド系記事 CSS-TRICKS https://css-tricks.com/ CSS関連といえばこのサイトではないでしょうか。サイト名もカッコイイですし。CSSでお困りの際に検索すると、大体ヒットしてきます。CSSのTips系の記事や、最新のプロパティに関する記事などが掲載されるので、フロントエンドならマストでチェックしておきたいサイトです。 HTML5Experts.jp https://html5experts.jp/ Web技術に関する最新動向、エキスパートによる見解などが見所のメディアサイトです。最新の技術に関してプロ中のプロ、いわゆるロープーの人
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ユーザーが一目で分かるよう精巧で、幾何学的な美しい図形でデザインされたユーザインターフェース用のSVGのアイコン素材を紹介します。 個人でも商用でも無料で、企業サイトなどにも利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く