好奇心の赴くままに。気になったことを、気ままに深掘り

  • Web Animations API

    Web Animations API

    Web Animations APIはCSSアニメーションやCSSトランジションをJavaScript から操作するAPIです*Safari 13.1のリリース…

  • CSS 3D(Transform)を実装する時の参考に

    CSS 3D(Transform)を実装する時の参考に

    基本 CSS 3D(Transform)は平面に奥行きをつけて変形させます光源をもとにして陰影をつけることはできません perspectiveの値は平面(z=0…

  • テキストのアニメーション備忘録

    テキストのアニメーション備忘録

    *デモはiteration-count(繰り返す回数)をinfinite(無限)にしている SVGをつかう 破線の間隔のパターン(stroke-dasharra…

  • Web制作に便利なSVGツール

    Web制作に便利なSVGツール

    SVGの最適化 Web上でSVGを軽量化してくれますわざわざファイルをアップロードしなくても「Psate markup」をクリックしてSVG要素を貼り付けること…

  • ローディングとファーストビューのアニメーション

    ローディングとファーストビューのアニメーション

    表示に3秒以上かかるページは半数近くの人が離脱するようです ローディングアニメーションを実装して待つストレスを軽減させたり導線用のファーストビューを準備してペー…

  • GSAP備忘録(その3)

    GSAP備忘録(その3)

    CanvasとGSAP 画像を複数行に分割して複数のCanvas要素で表示するdrawImage(image, sx, sy, sWidth, sHeight,…

  • Canvas API備忘録 (3)

    Canvas API備忘録 (3)

    ピクセルデータの取得と操作 ピクセルデータの取得getImageData(left, top, width, height)*rgba(赤・緑・青・透明度)の4…

  • Canvas API備忘録 (2)

    Canvas API備忘録 (2)

    sinとcos 波線を描く *Math.sin(radians)を使って波を動かし、色を変化させる(「-1」~「1」の間の数)*clearRectのかわりにfi…

  • Canvas API備忘録(1)

    Canvas API備忘録(1)

    HTML5のcanvas要素に2次元の図形を描画します 図形の描画 スクリプトで描画コンテキストを取得します*width属性とheight属性の初期値キャンバス…

  • 【韓国時代劇×朝鮮王朝】第20代景宗〜27代純宗 王様とドラマ早見表

    【韓国時代劇×朝鮮王朝】第20代景宗〜27代純宗 王様とドラマ早見表

    『イ・サン』『雲が描いた月明り』『哲仁王后』『緑豆の花』——ルネサンス・勢道政治・開国に揺れた朝鮮王朝後期の180年。20代景宗から27代純宗まで8代の王をまと…

  • clip-pathの活用

    clip-pathの活用

    clip-pathは要素のどの部分を表示するか(クリッピング領域)を作ります内側は表示され外側は非表示です 切り抜き clip-pathの「basic-shap…

  • 「脱IE」関連のことをCSSを中心にまとめました

    「脱IE」関連のことをCSSを中心にまとめました

    まだ使えないものもありますが、今後のために個人的には「Safari」がネックです^^; *Grid Layoutとクリッピングとマスキング(clip-pathな…

  • Grid Layoutについて

    Grid Layoutについて

    IEがサポート終了したので、そろそろGrid Layoutを使ってみよう! Grid Layoutの基本 MDN CSS グリッドレイアウト 基本概念とポイント…

  • 【韓国時代劇×朝鮮王朝】第14代宣祖〜19代粛宗 王様とドラマ早見表

    【韓国時代劇×朝鮮王朝】第14代宣祖〜19代粛宗 王様とドラマ早見表

    『華政』『王になった男』『トンイ』『チャン・オクチョン』——戦乱・クーデター・換局が続いた朝鮮王朝激動の150年。宣祖から粛宗まで6代の王をまとめました。 時代…

  • Dart Sassを使う準備&gulp(備忘録)

    Dart Sassを使う準備&gulp(備忘録)

    2022年10月でLibSass(node-sass)のサポートが終了なのでLib Sass(node-sass)からDart Sass(sass)へ切り替えを…

  • 【韓国時代劇×朝鮮王朝】初代太祖〜13代明宗の王様とドラマ早見表

    【韓国時代劇×朝鮮王朝】初代太祖〜13代明宗の王様とドラマ早見表

    『六龍が飛ぶ』『根の深い木』『王女の男』『チャングムの誓い』——建国・王位簒奪・繁栄が交錯した朝鮮王朝草創期の170年。初代太祖から13代明宗まで13代の王をま…

  • MacOSで定期処理(cron覚え書き)

    MacOSで定期処理(cron覚え書き)

    crontabコマンド -eオプションでcrontabファイル(スケジュール)を編集します通常「viエディタ」が立ち上がります*VISUAL環境変数またはEDI…

  • GASでTwitter APIを使ってみた

    GASでTwitter APIを使ってみた

    Twitterで APIキーを取得するには事前に「デベロッパー申請」が必要です(英語で申請目的などを書く必要があります💧) API refere…

  • GAS  スプレッドシートにUIを追加

    GAS スプレッドシートにUIを追加

    Uiクラス メニュー・サイドバー・ダイアログなどの機能をスクリプトで追加できるようにします Uiクラスはコンテナバインドスクリプトでのみ利用可能です*例:スプレ…

  • GASでYouTube Data APIを使ってみる(検索サイトを作成)

    GASでYouTube Data APIを使ってみる(検索サイトを作成)

    YouTube動画を検索するサイトを作ります(自分専用のためエラー処理は省略^^;)GASを使えばAPIキーの取得やサーバーが不要です スクリプトの準備 スタン…

  • Puppeteerでスクレイピング(2)

    Puppeteerでスクレイピング(2)

    Puppeteerを使わないスクレイピング Puppeteerに関してはこの続き Puppeteerの概要 Puppeteerでブラウザを操作してスクレイピング…

  • JavaScript ジェネレーター

    JavaScript ジェネレーター

    イテレーターについて 「イテレーター」は反復操作のためのオブジェクトです2つのプロパティ(value・done)を返すnext()メソッドを持ちますvalueプ…

  • Node.js Webスクレイピング(1)

    Node.js Webスクレイピング(1)

    node-fetch Node.jsアプリでPromiseベースのHTTP通信を行うためのライブラリです htmlファイルとして取得(レスポンスを文字列で取得)…

  • Streamについて (Node.js)

    Streamについて (Node.js)

    そんなものか〜程度に理解しただけで、エラー云々全然考えていません(^^;; Streamを使うことで小分けされたデータ(chunk)を順番に処理する(まとめて一…