|
| 1 | +<a href="https://lab.magiconch.com/sakana/?v=takina" target="_blank"> |
| 2 | + <img src="../../html/takina.png" height="160px"> |
| 3 | +</a><a href="https://lab.magiconch.com/sakana/?v=chisato" target="_blank"> |
| 4 | + <img src="../../html/chisato.png" height="160px"> |
| 5 | +</a> |
| 6 | + |
| 7 | +# 🐟「Sakana!」リコリス紙人形劇 |
| 8 | + |
| 9 | +[](https://www.npmjs.com/package/sakana) |
| 10 | +[](https://opensource.org/licenses/MIT) |
| 11 | + |
| 12 | +デモ https://lab.magiconch.com/sakana/ |
| 13 | + |
| 14 | +> さかなー---!! |
| 15 | +
|
| 16 | +複数のシチュエーションに対応しました! [デート編](https://lab.magiconch.com/sakana/deto.html) |
| 17 | + |
| 18 | +## イラストの出典 |
| 19 | + |
| 20 | +大伏アオ |
| 21 | +[@blue00f4](https://twitter.com/blue00f4) |
| 22 | +[Pixiv](https://pixiv.me/aoiroblue1340) |
| 23 | + |
| 24 | +**イラスト 2 点([その 1](https://twitter.com/blue00f4/status/1551887529615687680)、[その 2](https://twitter.com/blue00f4/status/1552066743853813760))の WEB ページでの掲載について、大伏アオ先生より非商用利用の許諾を得ました。 |
| 25 | +) ** |
| 26 | +`ヾ(^▽^ヾ)` |
| 27 | + |
| 28 | +## 機能 |
| 29 | + |
| 30 | +- キャラクターをドラッグし、離すと反対方向にスイングします。 |
| 31 | +- 台座をクリックするとキャラクターが切り替わります。 |
| 32 | +- ジャイロセンサが使えるスマートフォンでは、スマートフォンを振ることで、キャラクターをスイングさせる。 [#12 解決予定](https://github.com/itorr/sakana/pull/12) |
| 33 | +- キャラクターにランダムな大きさの力をランダムな間隔で加える自走式モード [#7](https://github.com/itorr/sakana/pull/7) [@milkybird98](https://github.com/milkybird98) |
| 34 | +- 効果音、マウスを離した時の効果音はランダムな間隔で鳴ります。 [#9](https://github.com/itorr/sakana/pull/9) [@zthxxx](https://github.com/zthxxx) |
| 35 | +- 多言語対応 [#26](https://github.com/itorr/sakana/pull/26) [@dsrkafuu](https://github.com/dsrkafuu) |
| 36 | + |
| 37 | +### リクエストパラメーター |
| 38 | + |
| 39 | +- リクエストパラメータに `?v=chisato` を追加すると、[錦木千束](https://lab.magiconch.com/sakana/?v=chisato) になります。 |
| 40 | +- リクエストパラメータに `?v=takina` を追加すると、[井ノ上たきな](https://lab.magiconch.com/sakana/?v=takina) になります。 |
| 41 | +- リクエストパラメータに `?alpha=true` を追加すると、背景が透過されます。 [例](https://lab.magiconch.com/sakana/?alpha=true) |
| 42 | +- リクエストパラメータに `?background=red` を追加すると、背景をカスタマイズできます。 `#FF00FF` `'#d77 url(chisato.png)'` を利用できます。 [例](<https://lab.magiconch.com/sakana/?background=%23d77%20url(chisato.png)>) |
| 43 | +- リクエストパラメータに `?decay=0.99` を追加すると、キャラクターの動きの減衰の大きさを指定できます。 [減衰なしの例](https://lab.magiconch.com/sakana/?decay=1) [#11](https://github.com/itorr/sakana/issues/11) |
| 44 | +- リクエストパラメータに `?inertia=0.1` を追加すると、慣性の大きさを指定できます。 [スーパースローの例](https://lab.magiconch.com/sakana/?inertia=0.001) |
| 45 | +- リクエストパラメータに `?lang=en-US` を追加すると、言語を指定できます。 [英語](https://lab.magiconch.com/sakana/?lang=en-US) [日本語](https://lab.magiconch.com/sakana/?lang=ja-JP) |
| 46 | +- リクエストパラメータに `?scale=auto` を追加すると、キャラクターが小さい場合に身長と大きさを調整します。 |
| 47 | +- リクエストパラメータに `?scale=0.5` を追加すると、キャラクターを拡大縮小できます。 |
| 48 | +- リクエストパラメータに `?translateY=200px` を追加すると、Y 軸方向の変位を指定できます。 |
| 49 | +- リクエストパラメータに `?r=60` を追加すると、初期の傾きが 60 度になります。 |
| 50 | +- リクエストパラメータに `?y=100` を追加すると、初期位置が Y 軸方向 100 の位置になります。 |
| 51 | + |
| 52 | +#### パラメータの組み合わせの例 |
| 53 | + |
| 54 | +- [超高速振動の千束の英語表記例](https://lab.magiconch.com/sakana/?inertia=0.2&decay=0.999&v=chisato&lang=en-US) |
| 55 | +- [超低速スイングのたきなの日本語例](https://lab.magiconch.com/sakana/?inertia=0.001&decay=1&v=takina&lang=ja-JP) |
| 56 | +- [大きさが 2 倍で低速の減衰なし千束の例](https://lab.magiconch.com/sakana/?inertia=0.01&decay=1&v=chisato&scale=2&translateY=140px) |
| 57 | +- [超小型・慣性弱・強減衰 たきなの例](https://lab.magiconch.com/sakana/?inertia=0.02&decay=0.9&scale=0.3) |
| 58 | +- [デフォルト角度 60 度で Y 軸 100 の位置 のたきなの例](https://lab.magiconch.com/sakana/?v=takina&r=60&y=100) |
| 59 | + |
| 60 | +## 個人サイトに導入 |
| 61 | + |
| 62 | +[例](https://lab.magiconch.com/sakana/into.html) |
| 63 | +[ソースコード](https://github.com/itorr/sakana/blob/main/html/into.html) |
| 64 | + |
| 65 | +```html |
| 66 | +<div class="sakana-box"></div> |
| 67 | +``` |
| 68 | + |
| 69 | +```html |
| 70 | +<script src="https://cdn.jsdelivr.net/npm/sakana"></script> |
| 71 | +<script> |
| 72 | + Sakana.init({ |
| 73 | + el: ".sakana-box", // 開始位置。ノードまたはセレクタ |
| 74 | + scale: 0.5, // 倍率 |
| 75 | + canSwitchCharacter: true, // キャラクターの切り替え |
| 76 | + }); |
| 77 | +</script> |
| 78 | +``` |
| 79 | + |
| 80 | +### オプションとメソッド |
| 81 | + |
| 82 | +```javascript |
| 83 | +// ミュート指定 |
| 84 | +Sakana.setMute(true); |
| 85 | + |
| 86 | +// ミュートの状態を取得 |
| 87 | +const { isMute } = Sakana.Voices; |
| 88 | + |
| 89 | +// 初期化 |
| 90 | +const sakana = Sakana.init({ |
| 91 | + // オプション:デフォルト |
| 92 | + el: ".sakana-box", // 開始位置。ノードまたはセレクタ |
| 93 | + character: "takina", // キャラクターを指定。「ちさと」または「たきな」。 |
| 94 | + inertia: 0.01, // 慣性 |
| 95 | + decay: 0.99, // 減衰 |
| 96 | + r: 60, // 初期角度 |
| 97 | + y: 10, // 初期高さ |
| 98 | + scale: 1, // 倍率 |
| 99 | + translateY: 0, // Y軸方向の高さ |
| 100 | + canSwitchCharacter: false, // キャラクターの切り替え |
| 101 | + onSwitchCharacter(character) { |
| 102 | + // キャラクターを切り替えた時に呼ばれる |
| 103 | + console.log(`${character} dayo~`); |
| 104 | + }, |
| 105 | +}); |
| 106 | + |
| 107 | +// 角度を指定 |
| 108 | +sakana.setOriginRotate(10); |
| 109 | + |
| 110 | +// キャラクターの状態を取得する |
| 111 | +const v = sakana.getValue(); |
| 112 | + |
| 113 | +// 動作確認 |
| 114 | +sakana.confirmRunning(); |
| 115 | + |
| 116 | +// キャラクターを切り替え |
| 117 | +sakana.switchCharacter(); |
| 118 | + |
| 119 | +// ポーズ(一時停止) |
| 120 | +sakana.pause(); |
| 121 | + |
| 122 | +// 動作を再開 |
| 123 | +sakana.play(); |
| 124 | + |
| 125 | +// キャラクターを指定 |
| 126 | +sakana.setCharacter("chisato"); |
| 127 | +``` |
| 128 | + |
| 129 | +### ウィンドウの右下に配置 |
| 130 | + |
| 131 | +```css |
| 132 | +html .sakana-box { |
| 133 | + position: fixed; |
| 134 | + right: 0; |
| 135 | + bottom: 0; |
| 136 | + transform-origin: 100% 100%; /* 右下に配置するために変更 */ |
| 137 | +} |
| 138 | +``` |
| 139 | + |
| 140 | +## ローカル環境での変更 |
| 141 | + |
| 142 | +`document.less` を `.css` に変換する必要があります。 [#6](https://github.com/itorr/sakana/pull/6) |
| 143 | + |
| 144 | +## 実行 |
| 145 | + |
| 146 | +- `npm i` |
| 147 | +- `npm run build` |
| 148 | + |
| 149 | +## GitHub |
| 150 | + |
| 151 | +https://github.com/itorr/sakana/ |
| 152 | + |
| 153 | +## 派生プロジェクト |
| 154 | + |
| 155 | +- ウェブウィジェット版 [Demo](https://sakana.dsrkafuu.net/) [@dsrkafuu/sakana-widget](https://github.com/dsrkafuu/sakana-widget) |
| 156 | +- 動画 @而我撑伞 [BV1vN4y1F7ML](https://www.bilibili.com/video/BV1vN4y1F7ML) [创意工坊](https://steamcommunity.com/sharedfiles/filedetails/?id=2854221525) |
| 157 | +- 動画 @麻匪 [BV1jG4y1k7oA](https://www.bilibili.com/video/bv1jG4y1k7oA) [创意工坊](https://steamcommunity.com/sharedfiles/filedetails/?id=2854192204) |
| 158 | +- VSCode プラグイン [@UFOAlastor/sakana-hop](https://github.com/UFOAlastor/sakana-hop) |
| 159 | +- Unity バージョン [@zxsean/sakana_Unity](https://github.com/zxsean/sakana_Unity) |
| 160 | + |
| 161 | +## SNS |
| 162 | + |
| 163 | +https://weibo.com/1197780522/M2xbREtGI |
| 164 | + |
| 165 | +## License |
| 166 | + |
| 167 | +[MIT](https://opensource.org/licenses/MIT) |
| 168 | + |
| 169 | +Copyright (c) 2022, itorr |
0 commit comments