サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
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でDOMのonやhrefにJavaScriptのソース文字列を使うのはアリか?AngularVue.jsReactriot 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;
記事「画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA」で、amp-imgタグを使うと遅延読み込み(レイジーロード)で役立つことを紹介した。 画像の遅延読み込みは縦に長いページで効果的。特にブログ投稿で画像を大量に扱う場合に力を発揮する。WordPressのようなCMSで利用すると、遅延読み込みの恩恵を受けられるだろう。 そこで、WordPressでの実装方法を紹介する。このコードはICS MEDIAで使っている変換コードそのものだが、様々なケースに対応できるよう汎用化していないので、コピーして使う場合は注意してほしい(免責)。 考え方 WordPressのフックのタイミング WordPressの画像タグを置換する方法が公式には存在しない。何かのフックがあるわけではない(投稿画面での画像挿入時のフックはあるが、少し目的が異なる)。 WordPressのthe_conte
ウェブのトゥイーンエンジンの老舗「GSAP(グリーン・ソック・アニメーション・プラットフォーム)」(旧 TweenMax)のnpmでの使い方をまとめる。 ※本記事ではNode.js v14以上を開発環境に利用しているものとして、webpackでの利用方法を解説する。webpackの導入方法については記事「最新版で学ぶwebpack入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照のこと。 Babelでの使い方 次のコマンドを入力してgsapモジュールをインストールする。
設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみるTypeScriptwebpackbabelwebpack4 webpack 4から設定ファイル(webpack.config.jsファイル)を書かずともビルドできるようになりました。シンプルに環境構築したい場合には、webpack 4は便利です。 ※この記事はwebpack 4向けの内容です。webpack 5では動作しないので注意ください。 BabelとTypeScriptでそれぞれゼロコンフィグの手順をまとめたので紹介します。最小限の構成で説明します。 ※webpack 4について基本的な使い方はICS MEDIAの記事「最新版で学ぶwebpack 4入門」を参考ください。 webpack + Babel の環境構築の手順 モジュールのインストール コマンドラインで必要なモ
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
RxJS 5はES Modulesの import の書き方で容量が変わる。 利便性と容量のトレードオフの関係⚖ ※注意:この記事はRxJS 5について言及したものだ。RxJS 5では import 文の書き方で容量が変わるが、RxJS 6ではツリーシェイキングが可能な構造になっているので、一般的な書き方で容量がコンパクトになる。RxJS 6についてもこの記事の末尾で検証結果を記載している。 公式ReadMeにも書かれていることだが、バンドルツールで検証したので数値結果とともに4通りの記述方法を示す。 1. 全部まるっとimport import * as Rx from 'rxjs'; Rx.Observable.interval(200) .take(9) .map(x => x + '!!!') .bufferCount(2) .subscribe(value => console.
この記事は大幅に加筆して「最新版で学ぶ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
(function () { const MAX_NUM = 10000; // パーティクルの個数 const STAGE_W = 465; const STAGE_H = 465; const FRICTION = 0.96; const ACC_VALUE = 50; /** * パーティクルクラスです。 * @param {number} x * @param {number} y * @constructor */ class Particle { constructor(x, y) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; } } function updateParticlePosition(particle, gravityX, gravityY) { const diffX = gravityX - parti
この記事は加筆して「脱jQueryのためにしたこと - ICS MEDIA」に引っ越しました。 64000PV、480いいねとフロントエンド界隈でご好評いただいた内容です。ぜひご覧ください。 ※Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。
この記事は、加筆して「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に引っ越しました。 引越し先の記事では CSS Grid Layoutを使ってよかったこと 逆に苦労したこと、解決できなかったこと IE 11対応には工夫が必要 Autoprefixerの最新版を使えば、IE 11向けのコードに変換してくれる という内容をまとめています。 ※Google検索で辿り着いた方がリンク切れだと申し訳ないので、投稿は残しておきます。
// あなたの誕生日 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
Angular 2の「ルーティング」。SPA (シングルページアプリケーション)でディープリンクを実装する機能がAngular2にも搭載されてます。 ルーティングでページ遷移時に非同期処理を挟むときの方法をまとめました。 動作デモ 実装ポイント HTMLにルーターの参照を入れる (必須) インターフェースを実装する (たぶん必須) ルーティングの遷移時において、非同期処理を挟みたいクラスに、OnActivateとOnDeactivateインターフェースを指定。すると、routerOnActivate()メソッドとrouterOnDeactivate()メソッドの実装が義務付けられます。これがルーティング時のライフサイクルイベントとなります。 import {OnActivate} from "angular2/router"; import {OnDeactivate} from "ang
画像化するコード 画像化するにはphantomjsを利用します。メインの実行ファイルと、画像生成プロセスの2つコードを用意するのがポイントです。 main.js : メインの実行ファイル 非同期処理になるので、Promiseとか使っています。 // 定数宣言 (必要に応じて書き換えてください) 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', '.i
canvas 要素の画像ファイル化 HTML5 の canvas 要素は画像として保存することができます。 デモを jsdo.it に投稿したので、合わせてご覧ください。 Save as Image File - Colorful Lines - jsdo.it JPEG 画像へ変換する方法 canvas変数は、document.getElementById("ほげほげ")で取得したcanvas要素の参照です。toDataURL()メソッドの引数に変換したい種別を指定することで、その画像形式に対応した文字列(Base64方式の画像)を戻り値として受け取れます。
JavaScript で CSS の HSL カラーを使いこなそう HSLカラーは色のモーションを作る上でとても便利な色彩設定方法です。何の色であるかは色相、鮮やかであるか色あせているかは彩度、明るか暗いかは明度、という3つのパラメーターで色を表現します。 ▲ HSL色空間 (Wikipediaより)。プログラムによってはHSLと呼ばず、HSVとかHSBとか呼びます。違いは明度を示すHSLの最後のワードを、「L = ルミナンス」「B = ブライトネス」「V = バリュー」といろんな呼び方をしているだけです。 色相(Hue = H)と彩度(Satuation = S)と明度(Luminance = L)という3つのパラメーターはそれぞれは数値で指定します。数値であればプログラムによって制御ができます。つまり、人間に直感的なパラメーターをプログラムで扱うことができるのです。 それでは、色の設定
私のとっておきのJSFL。 タイムラインの空のレイヤーを一括削除するのが主な目的ですが、補助機能としてレイヤーカラーを整えます。 レイヤーカラーは適当な色になることが多いので、綺麗なflaづくりに役立ちます。 //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.lay
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ページを開く