{"id":13825913,"url":"https://github.com/zk-phi/MEGAMOJI","last_synced_at":"2025-07-08T22:33:04.839Z","repository":{"id":35943011,"uuid":"94536098","full_name":"zk-phi/MEGAMOJI","owner":"zk-phi","description":"Create animoji easily","archived":false,"fork":false,"pushed_at":"2024-10-20T15:50:07.000Z","size":106659,"stargazers_count":322,"open_issues_count":12,"forks_count":38,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-08T04:40:33.963Z","etag":null,"topics":["tool","web"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zk-phi.png","metadata":{"files":{"readme":"Readme.org","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.markdown","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-16T11:05:48.000Z","updated_at":"2024-10-31T23:23:06.000Z","dependencies_parsed_at":"2023-10-11T05:01:48.816Z","dependency_job_id":"c5867f82-abd9-470d-9978-2d2288d4d7ea","html_url":"https://github.com/zk-phi/MEGAMOJI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zk-phi%2FMEGAMOJI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zk-phi%2FMEGAMOJI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zk-phi%2FMEGAMOJI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zk-phi%2FMEGAMOJI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zk-phi","download_url":"https://codeload.github.com/zk-phi/MEGAMOJI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225470631,"owners_count":17479366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tool","web"],"created_at":"2024-08-04T09:01:29.052Z","updated_at":"2025-07-08T22:33:04.832Z","avatar_url":"https://github.com/zk-phi.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"http://zk-phi.github.io/MEGAMOJI\n\n** 開発者向け\n\n新しいアイデアや新しいクソアニメを実装したらぜひ PR ください！\n\n*** 開発環境\n**** dev server\n\n: npm install\n: npm run start\n\nするとサーバーが立ち上がります。 https://localhost:8080 で確認できます。\n\nソースをいじるとすぐに反映されます。\n\n***** M1 Mac で npm install にコケる場合\n\n=node-canvas= パッケージが arm64 に対応していないのが原因の可能性があります。\n\nx86_64 な node を入れてみてください。\n\n=asdf= でインストールする例：\n\n: arch -x86_64 asdf install nodejs \u003cversion\u003e\n\n**** ビルド\n\n: npm run build\n\nビルドすると =./dist= ができます。そのまま静的サイトとしてデプロイできます。\n\n**** lint\n\n: npm run lint\n\nコーディングスタイルの揺れなどを自動検出します。\n\n: npm run fix\n\nで大部分は自動修正できます。\n\nプルリクを送る前に走らせておくのがおすすめです。\n\n*** Workflows\n\nGitHub Actions を使って自動でビルドしたり、 lint をかけたりするようにしてあります。\n\n- lint ... master を push したときに npm run lint\n- lint-pr ... プルリクを作ったときに reviewdog 経由で eslint, stylelint を回す\n- build ... master を push したときに npm run lint して gh-pages に push\n\nビルド時、 GitHub Secrets に ~ROLLBAR_TOKEN~ や ~GA4_TOKEN~ をセットしておくと、\nエラー収集やユーザー分析ができます。\n\n*** ディレクトリ構成\n\n- ~src/~\n  - ~animations/~ ... 個別のアニメーションの実装が入っています\n  - ~components/~ ... UI 部品が入っています\n  - ~constants/~ ... 定数類が入っています\n  - ~effects/~ ... エフェクトの実装が入っています\n  - ~filters/~ ... フィルタの実装が入っています\n  - ~fonts/~ ... web font が入っています\n  - ~parts/~ ... 「パーツから選ぶ」で使用するパーツ画像が入っています\n  - ~samples/~ ... チュートリアルで使っているサンプルが入っています\n  - ~shaders/~ ... WebGL エフェクトで使うフラグメントシェーダーが入っています\n  - ~utils/~ ... 便利関数たちが入っています\n  - ~webgleffects/~ ... WebGL エフェクトの実装が入っています\n  - ~megamoji.js~ ... エントリポイントです\n  - ~types.js~ ... エフェクトなどの型定義が入っています\n\n- ~static/~ ... html など特にビルドせずにそのまま配信できるものが入っています\n- ~resources/~ ... ドキュメントで使う画像などアプリと関係ないものが雑に入っています\n\n*** フィルタの追加\n\n~src/constants/filters.js~ に一覧があります。\n\nフィルタの実体は１引数の関数です。\n\n~HTMLImageElement~ が渡ってくるので、適宜画像処理をして、できあがった画像を\nBlobURL で返します。\n\n*** エフェクトの追加\n\n~src/constants/effects.js~ に一覧があります。\n\nエフェクトの実体は５引数の関数です：\n\n- ~keyframe~ :: アニメーションの進行具合 (0.0 ~ 1.0 の浮動小数)\n- ~ctx~ :: CanvasRenderingContext2D のオブジェクト\n- ~cellWidth~ :: canvas の横幅\n- ~cellHeight~ :: canvas の高さ\n\n背景が塗りつぶされたあと、 ~drawImage~ される直前の ~ctx~ が渡ってくる\nので、 ~transform~, ~filter~, ~clip~ など好みの変形をセットしてくださ\nい。 エフェクトは複数併用することを想定しているので、 ~setTransform~\nなど他のエフェクトが加えた効果を上書きしてしまうようなメソッドを呼ぶ\nことは避けてください。\n\nまた作成した絵文字がアニメーション無効の環境でも快適に使えるよう、\n少なくとも１フレーム目にはなんらか意味のある画像が描画されるように\n調整してください。アニメーション無効の環境でどう表示されるかを確認\nしたい場合は、「効果をつける」の「職人モード＞イージング」で\n「１フレーム目固定」を選択してください。\n\n渡ってくる ~canvas~ は、最終的に絵文字としてレンダーされるものの４倍\n（縦横それぞれ２倍）の大きさになっています。\n\n#+begin_src text\n  +--------+\n  |        | \u003c- cellHeight / 4 の余白\n  | +----+ |\n  | |    | | \u003c- cellHeight / 2 の描画エリア\n  | |    | |    最終的に絵文字に使われる部分\n  | +----+ |\n  |        | \u003c- cellHeight / 4 の余白\n  +--------+\n#+end_src\n\nたとえば絵文字を上にスライドアウトさせたい場合、 ~cellHeight / 2~ だけ\n(~cellHeight~ ではなく) 上に ~translate~ してあげれば十分です\n\n余白をトリミングする前の canvas の様子が見たい場合は、「効果をつける」\nの「職人モード＞開発者モード」にある「余白を切らない」を有効にして\nください。\n\n===\n\n仕様の背景：\n\n~びよんびよん~ などの拡大縮小 (特に縮小) や回転を伴うエフェクトを組み\n合わせると、本来絵文字として使われる範囲外の、余白部分までチラ見えして\nしまうことがあります。このような場合でもアニメーションを綺麗に見せるた\nめ、内部ではいったん、最終的に絵文字に使われる範囲より外まではみ出して\nレンダリングしてから、あとで余白をカットしています。\n\nわかりづらい仕様なのでなんとかしたい気持ちはありますが、上手い方法が思\nいついていないです。\n\n*** アニメーションの追加\n\n~src/constants/animations.js~ に一覧があります。\n\nアニメーションの実体は５引数の関数です：\n\n- ~keyframe~ :: (~effect_~ と同様)\n- ~ctx~ :: (~effect_~ と同様)\n- ~image~ :: アニメーションさせたい元画像\n- ~offsetH~ :: 元画像の描画したい範囲（左端）\n- ~offsetV~ :: 元画像の描画したい範囲（上端）\n- ~width~ :: 元画像の描画したい範囲 (幅)\n- ~height~ :: 元画像の描画したい範囲 (高さ)\n- ~cellWidth~ :: (~effect_~ と同様)\n- ~cellHeight~ :: (~effect_~ と同様)\n\nアニメーションは、渡ってきた canvas に対して、 ~ctx.drawImage~ などを\n使って実際に画像 ~image~ をレンダリングするします。ユーザーの設定した\nトリミング範囲が ~offsetH, offsetV, width, height~ として渡ってくるので、\n通常、 canvas に対するレンダリングは以下の形になります (効果の一環\nとして、あえてそうしないことは可能です)：\n\n#+begin_src javascript\n  ctx.drawImage(image, offsetH, offsetV, width, height, ...);\n#+end_src\n\nアニメーションに渡される canvas もエフェクトと同様、実際に絵文字として\n出力されるものの４倍の大きさを持っています。\n\n#+begin_src text\n  +--------+\n  |        | \u003c- cellHeight / 4 の余白\n  | +----+ |\n  | |    | | \u003c- cellHeight / 2 の描画エリア\n  | |    | |    最終的に絵文字に使われる部分\n  | +----+ |\n  |        | \u003c- cellHeight / 4 の余白\n  +--------+\n#+end_src\n\nたとえば、なにもしないアニメーション (ただ画面の中央に、通常のサイズで\n絵文字を描画するだけ) の実装は次のようになります：\n\n#+begin_src javascript\n  ctx.drawImage(..., cellWidth / 4, cellHeight / 4, cellWidth / 2, cellHeight / 2);\n#+end_src\n\nエフェクトと比べると、レンダリング方法を自由に実装できる点で自由度が高\nいです (２つ重ねてレンダリングするなど、単純な変形だけでは実現できない\n効果を実装できる)。ただし、他のアニメーションと組み合わせることはでき\nなくなってしまうので、エフェクトとして同じ効果を実装することができない\nか、一度は検討してみてください。\n\nまたエフェクトと同様に、作成した絵文字がアニメーション無効の環境でも\n快適に使えるよう配慮してください。\n\n*** WebGL エフェクトの追加\n\n~src/constants/webgleffects.js~ に一覧があります。\n\nCanvas の基本的な変形機能だけでは実装できないエフェクトを WebGL で実装できます。\n\nWebGL エフェクトの実体は４引数の関数です：\n\n- ~keyframe~\n- ~cellWidth~\n- ~cellHeight~\n\nシェーダをロードして、適切なパラメータをセットして返してください。\n\n#+begin_src js\n  // 例\n  import { webglLoadEffectShader, webglSetVec2 } from '../utils/webgl';\n  import fooShader from '../shaders/foo';\n  function webglZoom (keyframe, _w, _h, args) {\n    const program = webglLoadEffectShader(fooShader);\n    webglSetVec2(program, 'center', keyframe, 0.5);\n    return program;\n  }\n#+end_src\n\nシェーダーは ~src/shaders~ にあります (追加しても OK です)。\n\n追加する場合は ~webglEffectShader~ というラッパー関数があるので、これに\n生の GLSL コードを投げつけてください。\n\n#+begin_src js\n  const myShader = webglEffectShader(`\n    \u003cGLSL code\u003e\n  `);\n#+end_src\n\nよく使う関数 (疑似乱数など) は ~src/shaders/utils~ にあります。\n\n画像は例によって４倍サイズでレンダーされます。\n\nまた例によって、作成した絵文字がアニメーション無効の環境でも快適に使える\nよう配慮してください。\n\n*** フォントの追加\n\n読み込みが遅くなるので慎重に。\n\n以下のフォントは入れないことにしています：\n\n- アイコンサイズに縮小すると読めない\n- 収録漢字が少ない\n- 他のフォントと使いたい場面が被る\n\nフォントのライセンスをよく確認 (再配布可？改変 (woff 化) 可？) した上で、\nwoff 化したフォントを ~src/fonts~ に入れてください。\n\nSIL Open Font License でライセンスされたフォントのうち、ライセンスに\n「with Reserved Font Name ...」が含まれているものは原則使用しません\n(woff 化にあたってフォント名を変える必要があり、面倒なため)。\n\nwoff 化にはこれ https://github.com/zk-phi/woff2sfnt-sfnt2woff を使っています。\n\n: node sfnt2woff.js hoge.ttf hoge.woff\n\nフォントを入れたら２つのファイルを更新してください。\n\n- ~src/constants/fonts.ts~\n- ~LICENSE.markdown~\n\nライセンス表記時の作者名は、アカウント名などから適当に持ってくるのではなく、\nなるべく正式な表記を探してコピーしてください。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzk-phi%2FMEGAMOJI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzk-phi%2FMEGAMOJI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzk-phi%2FMEGAMOJI/lists"}