スマートフォン体験を一歩先へ プログレッシブウェブアプリの作り方 Eiji Kitamura Last update: 2016/6
スマートフォン体験を一歩先へ プログレッシブウェブアプリの作り方 Eiji Kitamura Last update: 2016/6
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? gulpで使うプラグインやnpmモジュールをピックアップ 更新履歴 2016-03-11 更新 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver 2014-06-29 gulp-clean の箇所を修正(shinnn様にご指摘いただきました。感謝!m(_ _)m) プラグイン 今は使わない方が良いプラグインリスト - gulpjs/plug
gulpで普段使っている(使っていた)モジュールをまとめてみました。 本当はHTML/CSS/JSや関連ツールのモジュールも載せたかったのですが、長くなりそうなのでユーティリティとして使っているものだけを先に記事にしました。 一応、ここで紹介するgulpプラグインに関してはブラックリストに入っていない事を確認済みです。 ちなみに、Qiita内だと下記の記事がまとまっていて大変参考になると思います。 gulp.js その4 プラグイン一覧 - Qiita 僕がGulpで使っているプラグインとnode.jsモジュール一覧 - Qiita サンプルのGitHub https://github.com/yuichiroharai/gulp-sample ここで使用しているサンプルは全てGitHubにて公開しています。 実際に実行してみるとイメージが掴みやすいかと思います。 gulp-plumber
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア(無料)とオンラインサービス(無料と有料)です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日(2016年1月20日)現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。 本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。 npm-scripts には以下の特徴があります。 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。 複雑なことをするには向いていないです。 環境変数の扱いに難があります。 この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。
import Nylas from 'nylas'; const nylas = new Nylas({ apiKey: '<NYLAS_API_KEY>' }); const sentMessage = await nylas.messages.send({ identifier: <USER_GRANT_ID> requestBody: { to: [{ name: '<RECIPIENT_NAME>', email: '<RECIPIENT_EMAIL>' }], subject: '<EMAIL_SUBJECT>', body: '<EMAIL_BODY>' } }); require 'nylas' nylas = Nylas::Client.new(api_key: "<NYLAS_API_KEY>") request_body = { subject: '<EMAIL_SUB
こんにちは、デザイナーのもりたです。 突然ですが皆さん、整理整頓は得意ですか? 私の会社のPCのデスクトップはスクリーンショットだらけです。 よく整理整頓の第一歩はルールづくりだと言いますね。 リモコンはサイドテーブルに置く、雑誌はラックに入れる、シャツ類は一番上の引き出しに入れる……。でも、整理整頓ができる人にはきっとわからないけれど、自分に合わせたルールをつくるのが一番めんどくさいんですよ! だからデザイナーの間でもPSD(Photoshop Document)のレイヤー整理がまちまちだったり、同じ人でさえ場合によって変わったりします。そこで、いちいち考えることすらめんどくさくなったので、社内共通のルールをつくってしまおうということになりました。 せっかくつくったので、今回はそれをご紹介します。 全文読みたい方はこちらからどうぞ。 https://github.com/morita37
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く