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

  • Glitchの使い方(GitHub Pagesへ移行)

    Glitchの使い方(GitHub Pagesへ移行)

    😵❗️追記(2025年7月)Glitch は、2025年7月8日をもってホスティング機能を終了しました&#x1f60…

  • p5.js備忘録(3)WebGL

    p5.js備忘録(3)WebGL

    WebGLの実装で知っておきたい基礎知識 WebGLは、ブラウザ上で高度な2D/3Dグラフィックスを描画するためのAPIです。モバイル向けのOpenGL ESを…

  • p5.js備忘録(2)

    p5.js備忘録(2)

    時計 ロードされた時の時刻を表示しています(クリックでスタートとストップを制御) 木のフラクタル図形 再帰関数(自分自身を呼び出す関数)で、再起処理をしてツリー…

  • p5.js備忘録

    p5.js備忘録

    p5.jsは、JavaScriptを使ってクリエイティブコーディングを実現するライブラリですProcessingという言語をベースにしていて、プログラミング初心…

  • iframeについて

    iframeについて

    HTML埋め込みコンテンツ iframe 現在のHTMLへ別のHTMLを埋め込む embed 外部のマルチメディアを埋め込む(プラグインが必要) object …

  • 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クラスはコンテナバインドスクリプトでのみ利用可能です*例:スプレ…