Skip to content

Commit 4179d0d

Browse files
committed
Add ja document
1 parent 676999c commit 4179d0d

File tree

1 file changed

+169
-0
lines changed

1 file changed

+169
-0
lines changed

docs/ja/README.md

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
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+
[![NPM](https://img.shields.io/npm/v/sakana)](https://www.npmjs.com/package/sakana)
10+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](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

Comments
 (0)