Skip to content

Commit

Permalink
Add ja document
Browse files Browse the repository at this point in the history
  • Loading branch information
OHMORIYUSUKE committed Sep 25, 2022
1 parent 676999c commit 4179d0d
Showing 1 changed file with 169 additions and 0 deletions.
169 changes: 169 additions & 0 deletions docs/ja/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<a href="https://lab.magiconch.com/sakana/?v=takina" target="_blank">
<img src="../../html/takina.png" height="160px">
</a><a href="https://lab.magiconch.com/sakana/?v=chisato" target="_blank">
<img src="../../html/chisato.png" height="160px">
</a>

# 🐟「Sakana!」リコリス紙人形劇

[![NPM](https://img.shields.io/npm/v/sakana)](https://www.npmjs.com/package/sakana)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

デモ https://lab.magiconch.com/sakana/

> さかなー---!!
複数のシチュエーションに対応しました! [デート編](https://lab.magiconch.com/sakana/deto.html)

## イラストの出典

大伏アオ
[@blue00f4](https://twitter.com/blue00f4)
[Pixiv](https://pixiv.me/aoiroblue1340)

**イラスト 2 点([その 1](https://twitter.com/blue00f4/status/1551887529615687680)[その 2](https://twitter.com/blue00f4/status/1552066743853813760))の WEB ページでの掲載について、大伏アオ先生より非商用利用の許諾を得ました。
) **
`ヾ(^▽^ヾ)`

## 機能

- キャラクターをドラッグし、離すと反対方向にスイングします。
- 台座をクリックするとキャラクターが切り替わります。
- ジャイロセンサが使えるスマートフォンでは、スマートフォンを振ることで、キャラクターをスイングさせる。 [#12 解決予定](https://github.com/itorr/sakana/pull/12)
- キャラクターにランダムな大きさの力をランダムな間隔で加える自走式モード [#7](https://github.com/itorr/sakana/pull/7) [@milkybird98](https://github.com/milkybird98)
- 効果音、マウスを離した時の効果音はランダムな間隔で鳴ります。 [#9](https://github.com/itorr/sakana/pull/9) [@zthxxx](https://github.com/zthxxx)
- 多言語対応 [#26](https://github.com/itorr/sakana/pull/26) [@dsrkafuu](https://github.com/dsrkafuu)

### リクエストパラメーター

- リクエストパラメータに `?v=chisato` を追加すると、[錦木千束](https://lab.magiconch.com/sakana/?v=chisato) になります。
- リクエストパラメータに `?v=takina` を追加すると、[井ノ上たきな](https://lab.magiconch.com/sakana/?v=takina) になります。
- リクエストパラメータに `?alpha=true` を追加すると、背景が透過されます。 [](https://lab.magiconch.com/sakana/?alpha=true)
- リクエストパラメータに `?background=red` を追加すると、背景をカスタマイズできます。 `#FF00FF` `'#d77 url(chisato.png)'` を利用できます。 [](<https://lab.magiconch.com/sakana/?background=%23d77%20url(chisato.png)>)
- リクエストパラメータに `?decay=0.99` を追加すると、キャラクターの動きの減衰の大きさを指定できます。 [減衰なしの例](https://lab.magiconch.com/sakana/?decay=1) [#11](https://github.com/itorr/sakana/issues/11)
- リクエストパラメータに `?inertia=0.1` を追加すると、慣性の大きさを指定できます。 [スーパースローの例](https://lab.magiconch.com/sakana/?inertia=0.001)
- リクエストパラメータに `?lang=en-US` を追加すると、言語を指定できます。 [英語](https://lab.magiconch.com/sakana/?lang=en-US) [日本語](https://lab.magiconch.com/sakana/?lang=ja-JP)
- リクエストパラメータに `?scale=auto` を追加すると、キャラクターが小さい場合に身長と大きさを調整します。
- リクエストパラメータに `?scale=0.5` を追加すると、キャラクターを拡大縮小できます。
- リクエストパラメータに `?translateY=200px` を追加すると、Y 軸方向の変位を指定できます。
- リクエストパラメータに `?r=60` を追加すると、初期の傾きが 60 度になります。
- リクエストパラメータに `?y=100` を追加すると、初期位置が Y 軸方向 100 の位置になります。

#### パラメータの組み合わせの例

- [超高速振動の千束の英語表記例](https://lab.magiconch.com/sakana/?inertia=0.2&decay=0.999&v=chisato&lang=en-US)
- [超低速スイングのたきなの日本語例](https://lab.magiconch.com/sakana/?inertia=0.001&decay=1&v=takina&lang=ja-JP)
- [大きさが 2 倍で低速の減衰なし千束の例](https://lab.magiconch.com/sakana/?inertia=0.01&decay=1&v=chisato&scale=2&translateY=140px)
- [超小型・慣性弱・強減衰 たきなの例](https://lab.magiconch.com/sakana/?inertia=0.02&decay=0.9&scale=0.3)
- [デフォルト角度 60 度で Y 軸 100 の位置 のたきなの例](https://lab.magiconch.com/sakana/?v=takina&r=60&y=100)

## 個人サイトに導入

[](https://lab.magiconch.com/sakana/into.html)
[ソースコード](https://github.com/itorr/sakana/blob/main/html/into.html)

```html
<div class="sakana-box"></div>
```

```html
<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
Sakana.init({
el: ".sakana-box", // 開始位置。ノードまたはセレクタ
scale: 0.5, // 倍率
canSwitchCharacter: true, // キャラクターの切り替え
});
</script>
```

### オプションとメソッド

```javascript
// ミュート指定
Sakana.setMute(true);

// ミュートの状態を取得
const { isMute } = Sakana.Voices;

// 初期化
const sakana = Sakana.init({
// オプション:デフォルト
el: ".sakana-box", // 開始位置。ノードまたはセレクタ
character: "takina", // キャラクターを指定。「ちさと」または「たきな」。
inertia: 0.01, // 慣性
decay: 0.99, // 減衰
r: 60, // 初期角度
y: 10, // 初期高さ
scale: 1, // 倍率
translateY: 0, // Y軸方向の高さ
canSwitchCharacter: false, // キャラクターの切り替え
onSwitchCharacter(character) {
// キャラクターを切り替えた時に呼ばれる
console.log(`${character} dayo~`);
},
});

// 角度を指定
sakana.setOriginRotate(10);

// キャラクターの状態を取得する
const v = sakana.getValue();

// 動作確認
sakana.confirmRunning();

// キャラクターを切り替え
sakana.switchCharacter();

// ポーズ(一時停止)
sakana.pause();

// 動作を再開
sakana.play();

// キャラクターを指定
sakana.setCharacter("chisato");
```

### ウィンドウの右下に配置

```css
html .sakana-box {
position: fixed;
right: 0;
bottom: 0;
transform-origin: 100% 100%; /* 右下に配置するために変更 */
}
```

## ローカル環境での変更

`document.less``.css` に変換する必要があります。 [#6](https://github.com/itorr/sakana/pull/6)

## 実行

- `npm i`
- `npm run build`

## GitHub

https://github.com/itorr/sakana/

## 派生プロジェクト

- ウェブウィジェット版 [Demo](https://sakana.dsrkafuu.net/) [@dsrkafuu/sakana-widget](https://github.com/dsrkafuu/sakana-widget)
- 動画 @而我撑伞 [BV1vN4y1F7ML](https://www.bilibili.com/video/BV1vN4y1F7ML) [创意工坊](https://steamcommunity.com/sharedfiles/filedetails/?id=2854221525)
- 動画 @麻匪 [BV1jG4y1k7oA](https://www.bilibili.com/video/bv1jG4y1k7oA) [创意工坊](https://steamcommunity.com/sharedfiles/filedetails/?id=2854192204)
- VSCode プラグイン [@UFOAlastor/sakana-hop](https://github.com/UFOAlastor/sakana-hop)
- Unity バージョン [@zxsean/sakana_Unity](https://github.com/zxsean/sakana_Unity)

## SNS

https://weibo.com/1197780522/M2xbREtGI

## License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2022, itorr

0 comments on commit 4179d0d

Please sign in to comment.