ykit00

AWS CodePipeline で Git タグでのパイプライン実行ができるようになったそうです。AWS CodePipeline で git タグでのトリガーのサポートを開始チュートリアル:…

AWS CodePipeline で Git タグでのトリガーがサポートされたので試したが、注釈付きタグを使うとうまく動かなかった

mofmof Advent Calendar 2022 18日目の記事です。macOS 13 Ventura から 「時計」アプリが追加されました。iPhoneやApple Watchでお世話にな…

Mac「ショートカット」App でポモドーロタイマーを設定して集中モードと同時に実行する

はじめにPC 新調を機に、導入することで色々なオプションやエイリアスが設定されるがあまり使いこなせていなかった Prezto をやめてフレームワークを使わず、必要な機能だけに絞って .zshrc …

Prezto をやめてイチから .zshrc をカスタマイズした

ブラウザ上で動作する、WebGLの知識が無くてもリッチでインタラクティブな2Dグラフィックスを描画することができるライブラリ「PixiJS v5」を試してみました。PixiJSPixiJSって？PixiJSは、WebGL APIに飛び込んだり、ブラウザーとデバイスの互換性を処理したりすることなく、リッチでインタラクティブなグラフィックス、クロスプラットフォームアプリケーション、およびゲームを作成できるようにするレンダリングライブラリです。GitHub - pixijs/pixi.js: The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.WebGLって？WebGL (Web Graphics Library) は、互換性があるウェブブラウザーでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。HTML5 <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。WebGL: ウェブの 2D および 3D グラフィック - Web API | MDN動作サンプル動作サンプルcodepen環境構築PixiJSはCDNを使用するので、ファイルはHTMLを一つのみ用意します。$ touch index.htmlサーバーを立てるhttp-serverを使用します。http-server  -  npmインストール$ npm install -g http-serverサーバーの起動$ http-serverデフォルトでは8080番のポートが使用されます。  http://127.0.0.1:8080キャンバスを表示するPIXI.Renderer を生成し、canvas要素をviewに割り当てます。<!doctype html><html><head>  <meta charset="utf-8">  <title>Hello World</title>  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script></head><body>  <canvas id="mycanvas"></canvas>  <script>    const canvas = document.getElementById('mycanvas')    const renderer = new PIXI.Renderer({      view: canvas,    })  </script></body></html>キャンバスが表示されました。（黒い部分がキャンバスです）キャンバスのサイズを画面幅に合わせておきます。...const renderer = new PIXI.Renderer({  view: canvas,  width: window.innerWidth,  // 追加  height: window.innerHeight,  // 追加})...ステージとスプライトを表示する画像からスプライトを作成し、ステージに追加します。ステージは画像等の表示物をまとめるコンテナの役割を果たします。...const stage = new PIXI.Container()const mediumFattyTunaTexture = PIXI.Texture.from('medium_fatty_tuna.png')const sushi = new PIXI.Sprite(mediumFattyTunaTexture)sushi.width = 200sushi.height = 200// 配置や回転に使用する原点を設定するsushi.anchor.set(0.5)// 配置座標を指定sushi.x = renderer.width * 0.5sushi.y = renderer.height * 0.5// ステージに配置stage.addChild(sushi)// ステージをレンダリングrenderer.render(stage)sushiが描画されました。アニメーションを作るPIXI.Tickerを用いてフレーム毎のループ処理を記述し、アニメーションを作ってみます。...const animate = () => {  sushi.rotation += 0.05  renderer.render(stage)}const ticker = new PIXI.Ticker()ticker.add(animate)ticker.start()寿司が回り始めました。インタラクションを使用するinteractive プロパティを用いることでインタラクションを有効化できます。有効化後、イベントリスナーを追加しアニメーションスタート処理を記述します。...// ticker.add(animate)  // コメントアウト// ticker.start()  // コメントアウトsushi.interactive = truesushi.on('pointertap', () => {  ticker.add(animate)  ticker.start()})クリック or タップに反応して回転を始めるようになりました。最終的なコード内容はこのようになります。<!doctype html><html><head>  <meta charset="utf-8">  <title>Hello World</title>  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script></head><body>  <canvas id="mycanvas"></canvas>  <script>    const canvas = document.getElementById('mycanvas')    const renderer = new PIXI.Renderer({      view: canvas,      width: window.innerWidth,  // 追加      height: window.innerHeight,  // 追加    })    const stage = new PIXI.Container()    const mediumFattyTunaTexture = PIXI.Texture.from('medium_fatty_tuna.png')    const sushi = new PIXI.Sprite(mediumFattyTunaTexture)    sushi.width = 200    sushi.height = 200    // 配置や回転に使用する原点を設定する    sushi.anchor.set(0.5)    // 配置座標を指定    sushi.x = renderer.width * 0.5    sushi.y = renderer.height * 0.5    // ステージに配置    stage.addChild(sushi)    // ステージをレンダリング    renderer.render(stage)    const animate = () => {      sushi.rotation += 0.05      renderer.render(stage)    }    const ticker = new PIXI.Ticker()    // ticker.add(animate)    // ticker.start()    sushi.interactive = true    sushi.on('pointertap', () => {      ticker.add(animate)      ticker.start()    })  </script></body></html>おわり以上、PixiJSを試してみた内容でした。簡単な記述でWebアニメーションを作成できるので、ちょっと頑張ればゲームなんかも作成できそうです。PixiJS ExamplesPixiJS API Documentation参考Diving In: PixiJS - YouTube

Webグラフィックス描画ライブラリ 「PixiJS」を試す

JetBrains 製 の RubyMine という高機能エディタを使用する上で特に便利なショートカットをまとめました。macOS 版に対応したものとなります。動作確認時のバージョンmacOS 10.15.4検索 Keymap  Action  Remark  Shift × 2  どこでも検索（ファイル, クラス, アクション, その他） ファイルを開くときはだいたいこれ  Command + O  クラスを検索  Command + Shift + O  ファイルを検索  Command + Shift + A  アクションを検索  ショートカットもわかる 移動 Keymap  Action  Remark  Command + E  最近開いたファイルを表示  Command + Shift + E  最近表示したファイル内のコード位置を表示  大きいファイル内で迷子になった際に便利  Command + (B or Click)  選択箇所の宣言/定義へ移動  Command + Shift + [  タブを移動（左） Command + Shift + ]  タブを移動（右） Command + [  戻る  Command + ]  進む  Command + Control + ↑  関連するモデルやビュー、テストへ移動する 編集 Keymap  Action  Remark  Command + ↑/↓  選択行を移動する  Option + ↑/↓  選択行を移動する  現在のインデント位置を保持する  Command + Shift + V  コピー履歴から選択してペーストする  Command + D  現在の行を複製する  Shift + F6  リネーム  選択位置の名前の使用箇所を一括で置換できる  Command + Shift + U  選択範囲の大文字と小文字を切り替える  Option + Shift + U  選択範囲のスネークケースとキャメルケースを切り替える  Command + Option + L  コードをフォーマットする  Command + Option + Shift + L  コードをフォーマットする  ダイアログを表示する  Command + Option + F7  変数が使用されている箇所を検索する 機能・ウィンドウ操作 Keymap  Action  Remark  Control + R  アプリケーションの実行  Control + D  デバッガを起動 事前に設定が必要 Alt + F12  ターミナルを開く  Command + 1  Project ツールウィンドウを開く/閉じる  ツールウィンドウの一覧は ツールバー -> View -> Tool Windows から確認できる  Command + 4  Run ツールウィンドウを開く/閉じる  実行中のアプリケーションのログとコンソール  Command + 5  Debug ツールウィンドウを開く/閉じる  Command + K  コミット  Control + V  VCS 操作一覧をポップアップ  Git 等の操作

ykit00

AWS CodePipeline で Git タグでのトリガーがサポートされたので試したが、注釈付きタグを使うとうまく動かなかった

Mac「ショートカット」App でポモドーロタイマーを設定して集中モードと同時に実行する

Prezto をやめてイチから .zshrc をカスタマイズした

Webグラフィックス描画ライブラリ「PixiJS」を試す

RubyMine を快適に扱うためのショートカット30選

AWS CodePipeline で Git タグでのトリガーがサポートされたので試したが、注釈付きタグを使うとうまく動かなかった

Mac「ショートカット」App でポモドーロタイマーを設定して集中モードと同時に実行する

Prezto をやめてイチから .zshrc をカスタマイズした

Webグラフィックス描画ライブラリ 「PixiJS」を試す

RubyMine を快適に扱うためのショートカット30選

Webグラフィックス描画ライブラリ「PixiJS」を試す