サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
プライムデーセール
qiita.com/clockmaker
firebaseかnetlifyかどちらの方が、転送が早いのか検証してみた。 結論 firebaseのほうが転送は高速。 検証結果 Google Chromeにて、数十KBのJSONファイルをaxios(XHR)の読み込みで検証。 firebase 初回: 300-400ms 二度目以降: 20ms netlify 初回: 500-600ms 二度目以降: 80ms 余談 個人的な愚痴だが、「netlifyは簡単だ」と言われるが、結構しんどかった。 netlifyはGitHubとBitbucketとGitLabしか対応してない Azure DevOpsは対応してない yarnコマンドが失敗する npm installを毎回しないとビルドができない cd ◯◯◯ && npm i && npm run generateってコマンドをビルドコマンドにしている つまり時間がかかる Nuxtのge
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）を使って開発すると以下のメリットを享受できる。
React、Vue、Angularユーザーに質問。 JSXやテンプレートのHTMLにおいて、デフォルト挙動のキャンセルのために、ネイティブのon属性等を仕込むのはいいのでしょうか？ まずは、アンケートにご回答ください。 React、Vue、Angularユーザーに質問。 JSXやテンプレートのHTMLにおいて、デフォルト挙動のキャンセルのために、ネイティブのon属性等を仕込むのはアリ？ 例 <a href="javascript:void(0)"> <a onclick="return false;"> <body ondragstart="return false;"> <p oncontextmenu="return false;"> — 池田 泰延@Adobe MAX Japan登壇 (@clockmaker) 2018年9月27日 個人的な意見 ここからは個人的な意見です。先のアン
記事「画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA」で、amp-imgタグを使うと遅延読み込み（レイジーロード）で役立つことを紹介した。 画像の遅延読み込みは縦に長いページで効果的。特にブログ投稿で画像を大量に扱う場合に力を発揮する。WordPressのようなCMSで利用すると、遅延読み込みの恩恵を受けられるだろう。 そこで、WordPressでの実装方法を紹介する。このコードはICS MEDIAで使っている変換コードそのものだが、様々なケースに対応できるよう汎用化していないので、コピーして使う場合は注意してほしい（免責）。 考え方 WordPressのフックのタイミング WordPressの画像タグを置換する方法が公式には存在しない。何かのフックがあるわけではない（投稿画面での画像挿入時のフックはあるが、少し目的が異なる）。 WordPressのthe_conte
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
この記事は大幅に加筆して「最新版で学ぶwebpack 4入門 - スタイルシート(CSSやSass)を取り込む方法 - ICS MEDIA」に引っ越しました。 上記の記事ではwebpack+CSSの手順を網羅的に解説しています。 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 webpack 4でExtractTextPluginを利用する方法(webpackでCSSファイルとして書き出す方法) ※Google検索等で訪れた方がリンク切れになると申し訳ないので、このページは残しておきます。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently r
// あなたの誕生日 const yourBirthDay = { year: 1983, month: 2, date: 15 }; // Dateインスタンスに変換 const birthDate = new Date(yourBirthDay.year, yourBirthDay.month - 1, yourBirthDay.date); // 文字列に分解 const y2 = birthDate.getFullYear().toString().padStart(4, '0'); const m2 = (birthDate.getMonth() + 1).toString().padStart(2, '0'); const d2 = birthDate.getDate().toString().padStart(2, '0'); // 今日の日付 const today = n
Angular 4の話 AngularでHTML5のcanvas要素とどうやったら連携できるのか調べてみました。TypeScript 2.2, Angular 4での書き方です。 動作サンプル 動作サンプルはPlunkerにアップしておきました。 Angular 4 Example - How to use Canvas Element 手順の解説 template内のセレクターにID値を割り当てておく。ID値の割り当て方はAngularの記法を使う。(例 : <canvas #hoge></canvas>) クラスではAfterViewInitインターフェースをimplementsキーワードで指定。これによってngAfterViewInit ()メソッド(ライフサイクル)の実装が義務付けられる。 クラスのメンバー変数にViewChildアノテーションでID値を使って関連付けを行う。 ng
インターフェースを実装する (たぶん必須) ルーティングの遷移時において、非同期処理を挟みたいクラスに、OnActivateとOnDeactivateインターフェースを指定。すると、routerOnActivate()メソッドとrouterOnDeactivate()メソッドの実装が義務付けられます。これがルーティング時のライフサイクルイベントとなります。 import {OnActivate} from "angular2/router"; import {OnDeactivate} from "angular2/router"; import {ComponentInstruction} from "angular2/router"; class ほげほげくらす implements OnActivate, OnDeactivate { /** 遷移で入ってきたとき */ router
// 定数宣言 (必要に応じて書き換えてください) const TARGET_FOLDER = './samples'; // キャプチャーしたいHTMLのフォルダー const OUTPUT_FOLDER = './imgs'; // 保存先のフォルダー const VIEWPORT_W = '1024'; // viewportの横幅(幅：単位px) const VIEWPORT_H = '768'; // viewportの高さ(幅：単位px) const IGNORE_LIST = ['.DS_Store', 'Thumbs.db', '.idea']; // 無視リスト const PHANTOM_JS_FILE = 'render.js'; // PhantomJSのパス // 具体的な処理 const fs = require('fs'); const childProces
JavaScript で CSS の HSL カラーを使いこなそう HSLカラーは色のモーションを作る上でとても便利な色彩設定方法です。何の色であるかは色相、鮮やかであるか色あせているかは彩度、明るか暗いかは明度、という3つのパラメーターで色を表現します。 ▲ HSL色空間 (Wikipediaより)。プログラムによってはHSLと呼ばず、HSVとかHSBとか呼びます。違いは明度を示すHSLの最後のワードを、「L = ルミナンス」「B = ブライトネス」「V = バリュー」といろんな呼び方をしているだけです。 色相(Hue = H)と彩度(Satuation = S)と明度(Luminance = L)という3つのパラメーターはそれぞれは数値で指定します。数値であればプログラムによって制御ができます。つまり、人間に直感的なパラメーターをプログラムで扱うことができるのです。 それでは、色の設定
//delete empty layers var l = 0; var timeline = fl.getDocumentDOM().getTimeline(); execDelete(); function execDelete() { var layersConut = timeline.layerCount; if(l >= layersConut || layersConut == 1) return; var currentLayer = timeline.layers[l]; //skip when layer is folder if(currentLayer.layerType == "folder") next(true); //check all start frame on layer var frameArray = currentLayer.frames; fo
function cleanLibraryFolder(){ var lib = fl.getDocumentDOM().library; var folders = {}; for(var i=0; i<lib.items.length; i++){ var o = lib.items[i]; var n = o.name; var obj = getItemObject(o.name); if(o.itemType == "folder"){ folders[o.name] = 0; } folders[obj.folder]++; } var cnt = 0; fl.trace(""); fl.trace("----- Clean Library Folder -----"); for(var p in folders){ if(folders[p] == 0){ cnt++; li
このページを最初にブックマークしてみませんか？
『@clockmakerのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
