はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    WWDC25

『@clockmakerのマイページ - Qiita』

  • 人気
  • 新着
  • すべて
  • 静的ファイルのホスティングの性能評価 - Qiita

    5 users

    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

    • テクノロジー
    • 2020/08/04 05:38
    • Adobe XDプラグインをVueとBabel/TypeScriptで開発する方法 - Qiita

      31 users

      qiita.com/clockmaker

      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)を使って開発すると以下のメリットを享受できる。

      • テクノロジー
      • 2018/12/11 18:02
      • webpack
      • Vue
      • typescript
      • js
      • plugin
      • あとで読む
      • React/Vue/AngularでDOMのonやhrefにJavaScriptのソース文字列を使うのはアリか?

        20 users

        qiita.com/clockmaker

        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日 個人的な意見 ここからは個人的な意見です。先のアン

        • テクノロジー
        • 2018/09/28 11:00
        • あとで読む
        • WordPressのimgタグをamp-imgタグで出力する方法 - Qiita

          4 users

          qiita.com/clockmaker

          記事「画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA」で、amp-imgタグを使うと遅延読み込み(レイジーロード)で役立つことを紹介した。 画像の遅延読み込みは縦に長いページで効果的。特にブログ投稿で画像を大量に扱う場合に力を発揮する。WordPressのようなCMSで利用すると、遅延読み込みの恩恵を受けられるだろう。 そこで、WordPressでの実装方法を紹介する。このコードはICS MEDIAで使っている変換コードそのものだが、様々なケースに対応できるよう汎用化していないので、コピーして使う場合は注意してほしい(免責)。 考え方 WordPressのフックのタイミング WordPressの画像タグを置換する方法が公式には存在しない。何かのフックがあるわけではない(投稿画面での画像挿入時のフックはあるが、少し目的が異なる)。 WordPressのthe_conte

          • テクノロジー
          • 2018/06/12 13:41
          • wordpress
          • ES Modules対応のgsapの使い方 - Qiita

            4 users

            qiita.com/clockmaker

            Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

            • テクノロジー
            • 2018/06/04 17:48
            • javascript
            • 設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみる - Qiita

              13 users

              qiita.com/clockmaker

              Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

              • テクノロジー
              • 2018/02/28 13:06
              • webpack
              • webpack 4入門:PostCSS(AutoPrefixerやcssnano)を使う方法 - Qiita

                4 users

                qiita.com/clockmaker

                Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                • テクノロジー
                • 2018/02/22 10:27
                • webpack
                • AngularでWAI-ARIA対応のタブ型UIを実装する方法 - Qiita

                  4 users

                  qiita.com/clockmaker

                  Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                  • テクノロジー
                  • 2018/01/09 22:07
                  • Browser
                  • RxJS v5を小さくバンドルする方法。import文の書き方で容量が変わる(v6の書き方も紹介) - Qiita

                    5 users

                    qiita.com/clockmaker

                    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                    • テクノロジー
                    • 2017/09/08 19:06
                    • webpack 4入門:スタイルシート(CSSやSass)を取り込む方法 - Qiita

                      24 users

                      qiita.com/clockmaker

                      この記事は大幅に加筆して「最新版で学ぶ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

                      • テクノロジー
                      • 2017/08/16 11:55
                      • webpack
                      • CSS
                      • あとで読む
                      • webpack3
                      • JavaScriptを高速化するFacebook製Prepackを試してみた - Qiita

                        36 users

                        qiita.com/clockmaker

                        Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                        • テクノロジー
                        • 2017/05/08 13:07
                        • javascript
                        • prepack
                        • performance
                        • 脱jQueryのためにしたこと - Qiita

                          492 users

                          qiita.com/clockmaker

                          Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                          • テクノロジー
                          • 2017/04/18 15:00
                          • jQuery
                          • JavaScript
                          • vue.js
                          • あとで読む
                          • WAI-ARIA
                          • VueJS
                          • accessibility
                          • angular
                          • vue
                          • css
                          • CSS Grid Layoutをガッツリ使った所感 - Qiita

                            151 users

                            qiita.com/clockmaker

                            Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                            • テクノロジー
                            • 2017/04/14 17:55
                            • css
                            • grid
                            • CSS3
                            • layout
                            • レイアウト
                            • css grid
                            • Webデザイン
                            • あとで読む
                            • タグ未設定
                            • 2017年
                            • JavaScriptで生年月日から年齢を計算する簡単ロジック - Qiita

                              5 users

                              qiita.com/clockmaker

                              // あなたの誕生日 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

                              • テクノロジー
                              • 2017/03/09 20:17
                              • Angular 4でcanvas要素を扱う方法 - Qiita

                                7 users

                                qiita.com/clockmaker

                                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

                                • テクノロジー
                                • 2016/09/06 19:45
                                • Angular 2のルーティングで遅延処理を挟む方法 - Qiita

                                  3 users

                                  qiita.com/clockmaker

                                  インターフェースを実装する (たぶん必須) ルーティングの遷移時において、非同期処理を挟みたいクラスに、OnActivateとOnDeactivateインターフェースを指定。すると、routerOnActivate()メソッドとrouterOnDeactivate()メソッドの実装が義務付けられます。これがルーティング時のライフサイクルイベントとなります。 import {OnActivate} from "angular2/router"; import {OnDeactivate} from "angular2/router"; import {ComponentInstruction} from "angular2/router"; class ほげほげくらす implements OnActivate, OnDeactivate { /** 遷移で入ってきたとき */ router

                                  • テクノロジー
                                  • 2016/02/08 21:26
                                  • Node.jsでフォルダ内の全HTMLをキャプチャし画像化 - Qiita

                                    78 users

                                    qiita.com/clockmaker

                                    // 定数宣言 (必要に応じて書き換えてください) 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

                                    • テクノロジー
                                    • 2016/02/05 08:27
                                    • Node.js
                                    • phantomjs
                                    • CreateJS
                                    • あとで読む
                                    • キャプチャ
                                    • js
                                    • javascript
                                    • HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ - Qiita

                                      7 users

                                      qiita.com/clockmaker

                                      Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                                      • テクノロジー
                                      • 2016/01/28 12:46
                                      • Javascript
                                      • JavaScriptでCSSのHSLカラーを使いこなそう - Qiita

                                        17 users

                                        qiita.com/clockmaker

                                        JavaScript で CSS の HSL カラーを使いこなそう HSLカラーは色のモーションを作る上でとても便利な色彩設定方法です。何の色であるかは色相、鮮やかであるか色あせているかは彩度、明るか暗いかは明度、という3つのパラメーターで色を表現します。 ▲ HSL色空間 (Wikipediaより)。プログラムによってはHSLと呼ばず、HSVとかHSBとか呼びます。違いは明度を示すHSLの最後のワードを、「L = ルミナンス」「B = ブライトネス」「V = バリュー」といろんな呼び方をしているだけです。 色相(Hue = H)と彩度(Satuation = S)と明度(Luminance = L)という3つのパラメーターはそれぞれは数値で指定します。数値であればプログラムによって制御ができます。つまり、人間に直感的なパラメーターをプログラムで扱うことができるのです。 それでは、色の設定

                                        • テクノロジー
                                        • 2016/01/17 11:47
                                        • CSS
                                        • color
                                        • javascript
                                        • design
                                        • あとで読む
                                        • [Flash Pro] タイムラインのレイヤーをいい感じにする君.jsfl - Qiita

                                          4 users

                                          qiita.com/clockmaker

                                          //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

                                          • テクノロジー
                                          • 2012/02/17 15:53
                                          • jsfl
                                          • flash
                                          • [Flash Pro] 空フォルダを削除する君.jsfl - Qiita

                                            4 users

                                            qiita.com/clockmaker

                                            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

                                            • テクノロジー
                                            • 2012/02/17 15:47
                                            • jsfl
                                            • flash

                                            このページはまだ
                                            ブックマークされていません

                                            このページを最初にブックマークしてみませんか?

                                            『@clockmakerのマイページ - Qiita』の新着エントリーを見る

                                            キーボードショートカット一覧

                                            j次のブックマーク

                                            k前のブックマーク

                                            lあとで読む

                                            eコメント一覧を開く

                                            oページを開く

                                            はてなブックマーク

                                            • 総合
                                            • 一般
                                            • 世の中
                                            • 政治と経済
                                            • 暮らし
                                            • 学び
                                            • テクノロジー
                                            • エンタメ
                                            • アニメとゲーム
                                            • おもしろ
                                            • アプリ・拡張機能
                                            • 開発ブログ
                                            • ヘルプ
                                            • お問い合わせ
                                            • ガイドライン
                                            • 利用規約
                                            • プライバシーポリシー
                                            • 利用者情報の外部送信について
                                            • ガイドライン
                                            • 利用規約
                                            • プライバシーポリシー
                                            • 利用者情報の外部送信について

                                            公式Twitter

                                            • 公式アカウント
                                            • ホットエントリー

                                            はてなのサービス

                                            • はてなブログ
                                            • はてなブログPro
                                            • 人力検索はてな
                                            • はてなブログ タグ
                                            • はてなニュース
                                            • ソレドコ
                                            • App Storeからダウンロード
                                            • Google Playで手に入れよう
                                            Copyright © 2005-2025 Hatena. All Rights Reserved.
                                            設定を変更しましたx