Adobe XDプラグインをVueとBabel/TypeScriptで開発する方法 - Qiita
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のソース文字列を使うのはアリか？
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;
JavaScriptを高速化するFacebook製Prepackを試してみた - Qiita
(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のためにしたこと - Qiita
この記事は加筆して「脱jQueryのためにしたこと - ICS MEDIA」に引っ越しました。 64000PV、480いいねとフロントエンド界隈でご好評いただいた内容です。ぜひご覧ください。 ※Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 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
CSS Grid Layoutをガッツリ使った所感 - Qiita
この記事は、加筆して「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に引っ越しました。 引越し先の記事では CSS Grid Layoutを使ってよかったこと 逆に苦労したこと、解決できなかったこと IE 11対応には工夫が必要 Autoprefixerの最新版を使えば、IE 11向けのコードに変換してくれる という内容をまとめています。 ※Google検索で辿り着いた方がリンク切れだと申し訳ないので、投稿は残しておきます。 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 yo
Angular 2のルーティングで遅延処理を挟む方法 - Qiita
Angular 2の「ルーティング」。SPA (シングルページアプリケーション)でディープリンクを実装する機能がAngular2にも搭載されてます。 ルーティングでページ遷移時に非同期処理を挟むときの方法をまとめました。 動作デモ 実装ポイント HTMLにルーターの参照を入れる (必須) インターフェースを実装する (たぶん必須) ルーティングの遷移時において、非同期処理を挟みたいクラスに、OnActivateとOnDeactivateインターフェースを指定。すると、routerOnActivate()メソッドとrouterOnDeactivate()メソッドの実装が義務付けられます。これがルーティング時のライフサイクルイベントとなります。 import {OnActivate} from "angular2/router"; import {OnDeactivate} from "ang
Node.jsでフォルダ内の全HTMLをキャプチャし画像化 - Qiita
画像化するコード 画像化するには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
[Flash Pro] タイムラインのレイヤーをいい感じにする君.jsfl - Qiita
私のとっておきの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
![[Flash Pro] タイムラインのレイヤーをいい感じにする君.jsfl - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/30fadd01295b42b91b1f743d5df85ccef9f260ec/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRmxhc2glMjBQcm8lNUQlMjAlRTMlODIlQkYlRTMlODIlQTQlRTMlODMlQTAlRTMlODMlQTklRTMlODIlQTQlRTMlODMlQjMlRTMlODElQUUlRTMlODMlQUMlRTMlODIlQTQlRTMlODMlQTQlRTMlODMlQkMlRTMlODIlOTIlRTMlODElODQlRTMlODElODQlRTYlODQlOUYlRTMlODElOTglRTMlODElQUIlRTMlODElOTklRTMlODIlOEIlRTUlOTAlOUIuanNmbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9M2I4MDJhYWMxYmM5NzI1ZDhlZGU4MDU2NDM1MDU1NjA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2xvY2ttYWtlciZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTNlOGY0ZWJlYmEzNmRhMGJmNjRhMTViZWFiYmIzNDk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D8991d0622cd0bc0723f554d4a9dc62aa)
[Flash Pro] 空フォルダを削除する君.jsfl - Qiita
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
![[Flash Pro] 空フォルダを削除する君.jsfl - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0846e7db53dcf78dcf6dfd0223d803ef3f535c84/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRmxhc2glMjBQcm8lNUQlMjAlRTclQTklQkElRTMlODMlOTUlRTMlODIlQTklRTMlODMlQUIlRTMlODMlODAlRTMlODIlOTIlRTUlODklOEElRTklOTklQTQlRTMlODElOTklRTMlODIlOEIlRTUlOTAlOUIuanNmbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjcxMGMzZGMyZTQyZjA4ZmY2ZmE1NGM1YjYwYzk3YWM%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2xvY2ttYWtlciZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTNlOGY0ZWJlYmEzNmRhMGJmNjRhMTViZWFiYmIzNDk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D272e6ba6af2e1b6eb1271841ccbe5dec)
[Flash Pro] 日本語のライブラリシンボル名を英語化する君.jsfl - Qiita
カッとなって作ってしまいました。 Flash ProでXFLを使っているときに、SVNやGITで日本語ファイルが入るのをある程度防ぐことができます。 function deleteJapaneseName(){ var lib = fl.getDocumentDOM().library; for(var i=0; i<lib.items.length; i++){ var o = lib.items[i]; var obj = getItemObject(o.name); var name = obj.name; name = name.split("アセット").join("asset"); name = name.split("シェイプ").join("shape"); name = name.split("シンボル").join("symbol"); name = name.spli
![[Flash Pro] 日本語のライブラリシンボル名を英語化する君.jsfl - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/37bea7ef75ab4d84da33661e35900e2414b59ab5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRmxhc2glMjBQcm8lNUQlMjAlRTYlOTclQTUlRTYlOUMlQUMlRTglQUElOUUlRTMlODElQUUlRTMlODMlQTklRTMlODIlQTQlRTMlODMlOTYlRTMlODMlQTklRTMlODMlQUElRTMlODIlQjclRTMlODMlQjMlRTMlODMlOUMlRTMlODMlQUIlRTUlOTAlOEQlRTMlODIlOTIlRTglOEIlQjElRTglQUElOUUlRTUlOEMlOTYlRTMlODElOTklRTMlODIlOEIlRTUlOTAlOUIuanNmbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTRiYzAzY2RlNTU1ZmMwNDE2MzJkYmVkNjgxZTU5MjQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2xvY2ttYWtlciZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTNlOGY0ZWJlYmEzNmRhMGJmNjRhMTViZWFiYmIzNDk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D4d652a705144172f59c2f462131e18ee)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ - Qiita
