こちらの記事は、Jonathan Saring 氏により2018年 6月に公開された『 11 JavaScript Animation Libraries For 2019 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 何かいいJavaScriptのアニメーションライブラリがないかとWebを眺めていても、「おすすめ」されているはずの多くライブラリが、実は長い間メンテナンスされていませんでした。 そこで私は調査を重ね、あなたのアプリにも使える11の優れたライブラリ、そして今はほとんどメンテナンスされていないものの、非常に便利ないくつかのライブラリをまとめてみました。 アドバイス: JSコンポーネントを個別にパッケージ、公開するのにはBitを使いましょう。異なるプロジェクトやアプリケーション間で共有したりすることができ、チーム内でより迅速にアプリケーションを構築するこ

アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。 ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんあります。正直まだ把握しきれていないところもあるんですが、社内への共有も含めてドキュメント化しています。 もし、「ここが間違ってるよ」とか「こうしたほうがいいよ」みたいなことがあれば、Qiitaのコメント欄やGitHubのIssueをいただけたらとても嬉しいです。 SVGの作成時に注意すること サイズ削減のためにすること 「オブジェクト」→「パス」→「単純化」でアンカーポイントの数を最小化する（見た目を損なわない程度に留めます） 非表示にしているレイヤーを削除する（非表示レイヤーも書き出されます） 1回しか使わないシンボル図形

Adobe XDプラグインの開発で、ユーザーインターフェース(UI)は人気のライブラリVue.jsを使いたいというニーズに応えるための記事。 こんな感じのXDプラグインを作れるサンプルを用意した。 リポジトリはこちら。 ics-creative/181211_AdobeXD_Plugin_Kit Vue.jsを使う利点 JavaScript/HTML/CSSを使ってAdobe XDプラグインを開発できる。createElement()メソッドなどJavaScriptを使ってHTMLのDOMを構築する必要があるため、DOMを書くのが大変。 シンプルなDOM構造であればいいが、複雑なUIを開発しようとすると、ライブラリの手を借りずに作るのはしんどい。 Vueの単一ファイルコンポーネント（Single File Component = 略してSFC）を使って開発すると以下のメリットを享受できる。

[和訳] 次期 Vue (v3.0) の計画 / Plans for the Next Iteration of Vue.js ありがとう Evan You, ありがとう Vue.js 開発チーム 元記事 Plans for the Next Iteration of Vue.js – The Vue Point – Medium 追記 (2018/10/02) この訳が Vue.js 日本語公式サイトの翻訳記事になりました 🎉 https://jp.vuejs.org/2018/10/01/plans-for-the-next-iteration-of-vue-js/ Plans for the Next Iteration of Vue.js ─ Vue.js における次のイテレーションの計画 先週の Vue.js London で、私は Vue の次のメジャーバージョンについて簡単

設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを

Git v2.13.0（2017/05/10リリース）でgit configにConditional includes（条件付きインクルード）という機能が実装され、特定のリポジトリに対して一括でgit configを適用できるようになりました。 会社用と個人用でプロファイルを使い分けたり、たまに使う設定をまとめて適用する場合などに役立ちそうです。 設定方法 includeIfセクションを使います。git configコマンドか、~/.gitconfigを直接編集して追記します。

Webエンジニアでも最低限のSEO知識を持っておきたい ferretやferretOneといったウェブマーケティングのメディア、ツールを開発、運営している株式会社ベーシックで働いており、近々ECサイトphocaseにて本格的にSEO施策を行うので、勉強がてらエンジニアが覚えておくべきだと思ったSEO周りの知識をまとめました。 この記事も書いていたら長くなってしまったので知らない部分をピックアップして読んでいただければと思います。 実装方法やSEO施策の詳細は貼ってあるリンクだけではなく、 別途Googleで検索するなどして複数の意見をインプットすることをおすすめします。 ###★この記事を読むとどうなるか マーケター、ディレクターとのやりとりがスムーズになる。 意図せず検索順位を下げてしまうコードに気づける様になる。 エンジニア側だけで動けるSEO施策を提案できる様になる。 なんとなくSE

Sassで連想配列が使えずに泣いたあの日はもういない。 無駄に配列２つ用意したあの日よグッバイ。 ということで、早速サンプルいってみよう。 $member_color:( madoka:pink, homura:black, sayaka:blue, kyoko:red, kyube:white ); @each $name, $color in $member_color { .color_#{$name} { color: $color; } }

Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas

たくさんの思い出が詰まったskypeのメッセージたち。 skypeのアプリ上で昔のメッセージを読み込もうとすると遅いし、 一年前以上のメッセージは読み込んでくれない。 何かあった時のために、読みやすい形でログが残ってあれば… というわけで抽出方法です。 macの場合、 ~/Library/Application Support/Skype/[skypeID]/ の中の main.db というデータベースのファイルからデータを抽出する。 cd ~/Library/Application Support/Skype/[skypeID]/ echo 'select datetime(timestamp,"unixepoch","localtime"), author, body_xml from Messages;' | sqlite3 ./main.db > skype.log (ファイル名s

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

WordPressのデータを本番へデプロイする方法、ツールは色々ありますが、わたしはサイト構築も経験が浅いので、とりあえずできるところからやっています。個人的には、IDEに依存せず、コマンドラインからの実施が可能な方法があると嬉しいので、何か良いものがないかな〜と探したところ、 wordmove というruby製のツールを発見。 https://github.com/welaika/wordmove/ きっかけになったのは、ユニキャストラボ様の、下記のエントリです。 wordmove – WordPressサイトを一発デプロイ http://lab.unicast.ne.jp/2013/05/09/deploying-wordpress-with-wordmove/ 基本は上記のエントリを参考にいただければ分かるかと思いますが、オプションについての情報を、こちらで補足してみます。 2016

注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f

var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('sass', function () { gulp.src('./**/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest('./css')); }); this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined at LazyResult.async (/Users/xxx/app/node_modules/postcss/lib/lazy-r

VCCWを使ってWordPressの開発環境を整えて、WordMoveでhetemlにDeployするWordPresswordmoveVCCW 個人的にWordPressを使った環境構築をする機会があったのでメモ。 環境構築はするけど、wordpressは殆ど触った事がない人間です。 開発環境構築 なぜVCCWか？ こちらのページが結構参考になりました。 http://codechord.com/2015/05/compare-vccw-wocker/ WordPressの開発では、VCCWとWockerというメジャーなものが２つあって、前者はVagrantベース。後者はDockerベース(Vagrantの中でDockerを起動している)のよう。 VCCWはガッツリいろいろなものが揃っているのに対して、Wockerはシンプルで起動も軽量という特徴があります。 僕は両方使ってみた上での比較

追記（2016年11月） VCCWの最新情報を掲載させる感じで更新しました。 VCCW v3がリリースされました。 先月に気付いてこの記事のアップデートの必要性を感じたきっかけです。（まだベータ版？） 詳しいことは次の記事をごらんください。 VCCW v3での変更点と新機能まとめ Boxサイズが小さくなったり、起動が早くなったりうれしいですね！（こなみかん） ChefがAnsibleになったり、PHP7系だったり、NodeJSがv6系になってたり。順当なアップデートなんですかね（素人感しかない感想） VCCWをインストールするためのWP-CLIのプラグインがリリースされました。 詳しいことは次の記事をごらんください。 WP-CLIでVCCW環境をほいほい作る zipダウンロードしてうんたらかんたらするのめんどうだと思っていたそこのあなた（俺）にぴったりですね！ 紹介した2つの記事ですが、見

管理画面の左側にあるメニューをカスタマイズする方法メモ。 非表示にする unset admin_menuフックを使い、対象のメニューをunsetしてあげることで、非表示にすることが出来ます。 function remove_menus () { global $menu; unset($menu[2]); // ダッシュボード unset($menu[4]); // メニューの線1 unset($menu[5]); // 投稿 unset($menu[10]); // メディア unset($menu[15]); // リンク unset($menu[20]); // ページ unset($menu[25]); // コメント unset($menu[59]); // メニューの線2 unset($menu[60]); // テーマ unset($menu[65]); // プラグイン u

対象：Rails4.2 Railsのバージョンを4.2に上げてブラウザからアクセスしようとしたら繋がらない。 $ ./bin/rails s => Booting WEBrick => Rails 4.2.0 application starting in development on http://localhost:3000 => Run `rails server -h` for more startup options => Ctrl-C to shutdown server

Gruntだと結構見かけるんだけど、gulp.jsによるjadeコンパイル時にjsonの値をもってくるのは意外と居なかったのでメモ。そしてついでに、日本語と英語の同時出力をしたかったので、2ヶ国語対応したjsonから吐き出すようにする。 といっても今回は自動的にja/enを吐き出すんじゃなくて、jaとenはバラバラのjadeファイルであることとします。（まあgulp.jsがんばって書けば自動出力可能だとおもうけどね） 尚、1年前ぐらいに手探りでやったんで、微妙かもしれない。 doctype html html head meta(charset="utf-8") block title title #{meta.ja.title} meta(name="description", content=meta.ja.description) meta(name="keywords", cont

手順 コマンドライン（Terminalなど）でダウンロードした解凍ファイルのROOTディレクトリに移動 npm install grunt deployでHTML書き出し、grunt watch:deployでjadeの変更を監視し、HTML自動書き出し可能 JSON読み込み 全ページの メタ要素、シェアテキスト サイト共通のリンク などをsrc/json/_common.jsonで一括管理しています。 手順 Gruntfile.js12〜44行目で、jade→HTML書き出しの設定をしています。 dataプロパティにオブジェクトデータを渡すとjade内で使えるようになります。 3.jadeDataFunc関数ではsrc/json/_common.jsonデータに加えてenv(環境)、page(HTMLファイル名)をマージしてからオブジェクトデータを渡しています 4. src/jade/c