JavaScript&可視化講習会#1

OUCC(http://oucc.org/) で5/24に行ったJavaScriopt&可視化講習会の一回目資料です。

Transcript

1. JavaScript&可視化講習会 #1 2015/5/24 @OUCC
2. 始める前に • 次の用語がわかる人？  変数  関数  オブジェクト  クラス • 次の言語が使える人？  C言語  C#  Python  Java
3. 始める前に • 全ての用語がしっかりと理解できている方 はおそらく恐ろしく暇だと思うので練習問 題を解くか、僕がKC3のときに使った資料 と練習問題を使ってください。(そこそこ難 しいです) https://github.com/domitry/KC3_D3js • 質問はslackで飛ばしてください。僕が喋っ ている途中でも大丈夫です。
4. 私は誰 • どみとり(@domitry) • 基礎工の3年 • 神経科学とかそっちら辺の人 • 普段はRuby, Python, Cあたりを書く
5. JavaScriptとは • 主にWebで使われる • Javaとはあんまし関係ない言語 • 僕と同い年
6. どこでも見かけるJavaScript
9. 最近のJavaScript • 高速化高速化  V8 Engine  asm.js • 際限なく広がっていくJavaScriptの世界  Node.js (サーバーサイド)  WebGL (3D)  WebCL (並列化) • もうJavaScript書きたくない人たち  AltJS (TypeScript, CoffeeScript, JSX, etc.)  babel
10. 今日やること・可視化 • 今可視化が熱い！！！
11. 可視化のコミュニティ
12. Python
13. Ruby
14. D3.js
15. D3.js • Webエンジニア向けのライブラリ(not研究者) • 色々なことができる反面、複雑 • JavaScript文化の影響が強い
16. D3.jsを学ぶ意義 • データサイエンティストとかがもてはやさ れる時代、可視化にも一定の需要がある • 割とJavaScript的なライブラリなので JavaScriptに慣れるにはいいかも
17. お品書き • JavaScript入門 • HTML • Inline-SVG • D3.js入門
18. JavaScript入門
19. JavaScriptの実行環境 • 右上からその他のツール -> JavaScriptコンソール • コードを入力してEnterで実行 • Shift+Enterで複数行入力
20. Hello, world console.log("Hello, world!"); • コンソールで試してみよう
21. 九九の表 for(var i=0; i<=9; i++){ for(var j=0; j<=9; j++){ console.log(i + " * " + j + " = " + i*j); } } • コンソールで試してみよう
22. 念のため用語の説明 • メモリ…記憶領域 • 変数…メモリ上で値をしまっておく領域 • 制御文…プログラムを制御する分。分岐(if) や繰り返し(for, while)など • 演算子…+, -, %, =, ==みたいなやつ。
23. 念のため用語の説明 • 手続き … procedure, 処理そのもの。 • 状態 … 処理の結果生まれたもの。(または 処理の前段階で準備してあったもの) • アルゴリズム … 手順を記したもの。料理本 のレシピみたいなもの
24. 演算子と制御文、 関数
25. JavaScriptの特徴 • 制御文(if, forなど)はC言語に似ている • ブロックは{}, 文の終わりに; for(var i=0; i<=9; i++){ if(i%3 && i%5)console.log(“FizzBuzz”); else if(i%3)console.log(“Fizz”); else if(i%5)console.log(“Buzz”); else console.log(i); }
26. JavaScriptの特徴 • 変数はvarで宣言 • 動的型付け言語、変数に何でも入れられる var hoge = 30; hoge = “Hello, world!”; hoge = [“a”, 1, 10, “hogehoge”]; console.log(hoge);
27. JavaScriptの特徴 • 演算子  +, -, *, /, %, ++, --, << , >>, >, <, =, ==, ===等 • 大体Cと一緒。 var a = 10, b = 3, c = 10; console.log(a+1, a%3, a++, a--, a==b, a==c); var hoge = [“a”, “b”, “c”]; var nya = [“a”, “b”, “c”]; console.log(a===b);
28. 演算子 • +,-,*,/ … 四則演算 • ++, -- …一つずつ足す, 引く • A % B… 剰余(A mod B)
29. 演算子 • = … 代入 • == … 値の比較 • === … 厳密等価演算子(型を含めて比較, 暗 黙の型変換を行わない)  Ex: console.log(“1” === 1); // false console.log(“1” == 1); // true
30. 演算子 • A && B … AかつB • A || B … AまたはB • !(falseかtrue)で真偽を反転 console.log(1==1, 1==2); console.log(1==1 && 2==2, 1!=2 || 1==2); console.log(!false, !true);
31. typeof, instanceof演算子 • 変数はそれぞれ”型, type”を持っている。(型 については後述) • typeof A (Aは変数)とすると変数の型の名前 を文字列で返す。 var a = “HogeHoge”; var b = 10; console.log(typeof a); // => “string” console.log(typeof b); // => “number”
32. if文 • 先ほどの条件演算子を使う • if(A){B}else{C}で、Aの条件が真だったらB を実行。偽だったらCを実行。 var a = 10, b = 20; if(a==b){ console.log(“Nyaaa”); }else{ console.log(“Nyan”); }
33. if文 • If-else if-else if-elseのように重ねることも できる • If-else{if-else}のように入れ子にもできる • {}の中身が一行だったら省略できる if(){ }else if(){ if(){ }else(){ } }else{ } if(a==b)console.log(“Hogeeee”);
34. 練習問題 • 変数a, bを作り、それぞれに文字列と数値を 代入する。a, bの型が一致するときはHoge, 一致しないときはNyaと出力せよ。
35. for文 • for(A;B;C){D}  1. Aで変数を初期化する。  2. Bの条件を満たしていればDを実行する。  3. Cを実行して2に戻る。後は繰り返し。 for(var i=0; i<10; i++){ for(var j=0; j>-5; j--){ console.log(i*j); } }
36. for文 • if文と同じく{}の中身が1行であれば{}は省略 できる。 for(var i=0; i<10; i++)console.log(i);
37. 練習問題 • 変数aに任意の数字を代入し、aが素数かど うか判定せよ。(a-1から2までforでループさ せ、どれかで割り切れたら素数である。)
38. 関数 • function 関数の名前(引数){処理内容}で手続 きを関数にまとめることができる • 数学の関数と違って必ずしも値を返す必要 はない function printHello(){ console.log(“Hello, world!”); } function plus(a, b){ return a + b; } console.log(plus(3, 4));
39. 練習問題 • 与えられた数のmodを求める関数を作ろう  mod(10, 3); // 1 • nの階乗を求める関数を作ろう  fanc(3); // 6 • n番目のフィボナッチ数を求める関数を作ろう  fib(3); // 1+1 = 2
40. 型とデータ構造
41. 変数とデータ型 • JavaScriptは動的型付け言語。 • 型はちゃんとある。 var hoge = 30; hoge = “Hello, world!”; hoge = [“a”, 1, 10, “hogehoge”]; console.log(hoge);
42. 変数とデータ型 • C言語における型の意味は主にメモリ上のサ イズと解釈の仕方だった。 • JavaScriptではメモリ上の配置を気にする必 要は(基本的には)ない。型はデータ構造と密 接に関係している。 var arr = [“a”, “b”]; console.log(typeof arr); var hash = {a: “b”, c: “d”}; console.log(typeof hash);
43. 数値型(number) • 整数や少数の区別なし var num0 = 1; var num1 = 1/3; var num2 = 100000000000000000000000000000000000000000000; console.log(typeof num0, typeof num1, typeof num2); console.log(num2);
44. 文字列型(string) • “文字”と”文字列”は別物！でもJavaScriptで はその違いを意識しなくてもよい！ • str[0]などで一文字づつ配列のようにアクセ スできる。C言語ぽい。でもあくまでarray 型とは別物で、char型みたいなのはない。 var hoge = "Hello, world!"; console.log(typeof hoge); console.log(hoge + 3);
45. 配列型(array) • 値を一杯入れられるデータ構造。順番を持 つ。 • arr[0]のように順番に要素にアクセスできる。 var arr = [1, 2, 3, 4]; for(var i=0; i<arr.length; i++)console.log(arr[i]);
46. 連想配列型(object) • 鍵keyと値valueの組み合わせからなるデータ 構造。順番はない。 • 他の言語だとhashやdictと呼ばれているもの • 実はJavaScriptにおいてはとてつもなく大き な意味を持っている(後述) var obj = {“a”: 10, “b”: 30}; console.log(obj);
47. 連想配列型(object) • 鍵から値にアクセスできる。アクセスの仕方 は二種類。  obj[“key”]  obj.key • どちらも同じ意味。だけどこれのおかげで JavaScriptは面白い。(後述) var obj = {“a”: 10, “b”: 30}; console.log(obj.a, obj[“a”]); obj[“c”] = 40; obj.d = 100; console.log(obj);
48. 関数型(function) • 関数も文字列や配列と同じ扱い(これを関数 を第一級オブジェクトとして扱う、と表現 したりする。) • つまり、変数に代入したり、配列や連想配 列の要素にしたりできる。
49. 関数型(function) • 変数に代入するときは以下のように書く。 • この右辺の書き方を無名関数と呼ぶ。 var HogeHuga = function(){ console.log(“Hoge”); }
50. 関数型(function) • JavaScriptでは無名関数を使った以下のよう な記法をよく見かける。これは一時変数を 新たに宣言してスコープを汚さないためで ある。 (function(a){ var i = a*a; console.log(a*i); })(100); // ここで新しくiを宣言しても何の問題も起きない！
51. 関数型(function) • 以下の2つは基本的に同じ意味。 function HogeHuga1(){ console.log(“Hoge”); } var HogeHuga2 = function(){ console.log(“Hoge”); };
52. 関数型(function) • 以下のように、無名関数はその外側のス コープで宣言された変数を使うことができ る。 var a = 100; var hogehuga = function(){ console.log(a); }; hogehuga(); // => 100 a = 200; hogehuga(); // => 200
53. 関数型(function) • 以下のように、無名関数が生き続ける限り その無名関数が使う変数も生き続ける。 • これをこのクロージャclosureが変数aを束 縛すると表現する。 var func = (function(){ var a = 100; return function(){ console.log(a); }; )(); func(); //=> 100
54. 練習問題 • 与えられた連想配列に”hoge”というキーが存 在するか確かめる関数を作ろう  hasHoge({hoge: 3}); //-> true  hasHoge({nya: 4}); //-> false • 与えられた配列の中に入っているのがすべて数 値であるか確かめる関数を作ろう  isAllNumber([3, 4, 5]); //-> true  isAllNumber([1,2,”hoge”]); //-> false
55. 練習問題 • 与えられた連想配列に”hoge”というキーが存 在するか確かめる関数を作ろう  hasHoge({hoge: 3}); //-> true  hasHoge({nya: 4}); //-> false • 与えられた配列の中に入っているのがすべて数 値であるか確かめる関数を作ろう  isAllNumber([3, 4, 5]); //-> true  isAllNumber([1,2,”hoge”]); //-> false
56. ライブラリ等
57. ライブラリ • JavaScriptには標準で便利ライブラリがいく つか添付されている。 • 例えば正規表現のRegExpや数値計算用のも ろもろが入ったMathなど。 • この内Mathは可視化でほぼ必ず使うのでい くつか機能を確かめておこう。
58. ライブラリ • Math.log, pow, exp, cos, sin, tan, acos, atan, atan2, … それぞれの値を求める関数 • Math.PI, Math.E …定数 • Math.floor, ceil, round…切り捨て切り上げ 四捨五入の関数 • Math.min, Math.max…渡された引数の内最 小最大のものを返す関数 等々。使い方がわからなければググろう。
59. 練習問題 • ラジアンから度に変換する関数を作ろう • Math.expやMath.powを自分の手で実装し てみよう • Math.minとMath.maxの使い方を確かめよ う
60. オブジェクト指向
61. オブジェクト指向 • JavaScriptはprototype型のオブジェクト指 向言語 • 他の言語と性格が大きく違うので注意  classは存在しない！(ECMA6で入ったけどびみょ)  継承はできると思うな！(似たようなことはできる)  thisは一意に定まらない！(超大事) • LL言語でもLuaとかPerlあたりとは似てる仕 組み。RubyとかPythonとは全然違う。
62. オブジェクトとは何か • 手続きと状態を持つもの。 • (まあ色々な考え方があるけどJavaScriptではこ う考えておいて支障はない) • この手続きのことをメソッド、状態のことをプ ロパティやメンバ変数、メンバなどと呼ぶ。
63. オブジェクトとは何か • 関数はJavaScriptでは変数に代入でき、また連 想配列などの要素としても利用できる。 • つまり配列や連想配列は手続きと状態の両方を 持ちうる。 var obj = { hoge: 100, printHoge: function(){ console.log(this.hoge); } };
64. 連想配列とオブジェクト • 配列よりも連想配列の方がラベリングしや すい・名前から実態が探索しやすいため、 JavaScriptにおけるオブジェクトは連想配列 と同一のものとみなされる。 • だから連想配列がオブジェクトという名前 • “配列オブジェクト”はオブジェクト=連想配 列の一種。(配列型とは一応別物。)
65. 例 • 例:以下のfloor, ceil, roundはそれぞれMath オブジェクトの持つメソッドである。
66. クラスとは • ここでオブジェクトの他にクラスという概 念を新しく導入する。すでに他の言語でク ラスの概念を習得した人は読み飛ばしても ok。 • クラスとは似た性質を持つオブジェクトの” 鋳型”のようなものである。 A a クラスA printHoge() hoge printHoge() hoge オブジェクトa
67. クラスとは • あるクラスから作られるオブジェクトのこ とをそのクラスのインスタンスと呼ぶ。 • あるクラスから作られるオブジェクトは同 じメソッドと同じ名前のプロパティを共通 して持っている。これらのことをインスタ ンスメソッド、インスタンス変数などと呼 ぶ。 A a c b インスタンスa,b,c クラスA printHoge() printHoge() printHoge() hoge hoge hoge printHoge() hoge
68. クラスとは • クラスからオブジェクトを作る際に使うメ ソッド(関数)のことをコンストラクタと呼ぶ。 • ここまでの説明はオブジェクト指向を標榜 する言語でそれなりに広く使われる定義・ 用語である。 A a クラスA printHoge() hoge printHoge() hoge オブジェクトa コンストラクタ
69. JavaScriptにおけるクラス • classという言葉は使わないがクラス的に使 える機能ならある。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); a.printHoge(); //=> 100
70. JavaScriptにおけるクラス • 下の例ではAがコンストラクタ的な関数、 printHogeがAクラスのメソッド, aはAクラ スのインスタンスと表現することができる。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); a.printHoge(); //=> 100
71. JavaScriptにおけるクラス • hogeはAクラスのインスタンスが共通して 持つプロパティである。このプロパティに はメソッドの中からthisを介してアクセスで きる。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); a.printHoge(); //=> 100
72. thisに注意！ • thisは便利なのだが、時々直観的でない動作 をする。例えば前頁のサンプルを改変した 以下のコードを実行してみると、Undefined と表示される。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); var func = a.printHoge; func(); //=> Undefined
73. thisに注意！ • 実はthisはメソッドを呼び出す際に . の左に 書いたオブジェクトを指す変数なのである。 • 下の用に.を省略すると、thisにはグローバ ルオブジェクトのwindowが入る。 function A(val){ this.hoge = val; } A.prototype.printHoge = function(){ console.log(this.hoge); }; var a = new A(100); var func = a.printHoge; func(); //=> Undefined
74. thisに注意！ • メソッドを呼び出す際.の左に何を書いたか でthisは変動する。 • これはかなり大きな落とし穴なので注意。 僕も未だに時々やります。
75. 問題 • 以下の3つのコードを実行し、thisが何になって いるか確認してください。  _.apply({a: 3, b: 4}, function(){console.log(this);})  function A(){ console.log(this); } A();  function B(){ this.hoge = “Hoge”; } B.prototype.printHoge = function(){ console.log(this.hoge); } var b = new B(); var func = b.printHoge; func();
76. 問題 • 先ほどの項でオレオレpow，オレオレexpを 作った人はついでにオレオレMathオブジェ クトを作ってみてください。
77. オブジェクト指向の続き • (ここからは特に説明しないと思うので好き な人だけ読んでください)
78. 型とオブジェクト
79. 型とオブジェクト
80. JavaScriptにおける継承 • みんな大好き”継承”はJavaScriptにおいてど う実装されているのか？
81. JavaScriptにおける継承
82. HTML
83. HTMLとは • Webサイトの静的な部分を記述するための マークアップ言語 • ちょっと前までXHTMLとかに潰されるので はという雰囲気があったがHTML5で復権 • 昔は何でもHTMLでできたけど最近(という ほど最近でもないけど)は見た目はcss、動 きをつけるのはJSでやろうという流れ。
84. HTMLとは • 下のように<name></name>で囲まれた部 分をname要素と呼ぶ。 • classやidのことを属性attributesと呼ぶ。 <div class=“hoge” id=“nya” style=“color: yellow;”> <h1>Hello</h1> <p> Hello, world! </p> </div>
85. HTMLとは • 要素は入れ子にすることができる。 • 下のdivを親要素、h1やpを子要素と呼ぶ。 <div class=“hoge” id=“nya” style=“color: yellow;”> <h1>Hello</h1> <p> Hello, world! </p> </div>
86. HTMLとは • 下に書いてある属性の内、classは複数の要素 につける名前、idは一つの要素にしかつけら れない名前のことをさす。 • styleの中身がCSS。よく見たら別言語である ことがわかる。 <div class=“hoge” id=“nya” style=“color: yellow;”> <h1>Hello</h1> <p> Hello, world! </p> </div>
87. 問題 • 適当なWebページを開いてソースコードを 眺めてみてください。d3.jsの公式サイトと かお勧め。
88. Inline-SVG
89. SVGとは • HTMLの規格を策定しているのと同じ団体 W3Cが策定しているベクターグラフィック の規格 • HTMLのようなマークアップ言語(正確には XMLで)画像が書ける。 • 拡大縮小しても品質が劣化しない。
90. 例えば • Wikipedia日本語版のマスコットキャラク ターの配布形式がsvg http://upload.wikimedia.org/wikipedia/co mmons/1/1b/Neko_Wikipe-tan.svg • 右クリックしてソースコードを表示してみ よう
91. Inline-SVGとは • 元々HTMLもSVGもxmlの一種なのでいっ しょくたに書いても問題ないんじゃない の？という規格。 • SVGが一時期下火だったこともありブラウ ザに実装されてきたのはごく最近。 • 実装が新しいのでブラウザ間で辻褄が合わ ないことがままある。規格にも穴があった りする。
92. 例えば • Snap.svg(http://snapsvg.io/) のワニなんか はinline-svgで動いてる。
93. 実際のInline-SVG • 一つの図形(円、矩形、線…etc.)が一つの要 素として扱われる。
94. Inline-SVGの各要素について • <svg></svg> • この中に色々な図形を表す子要素を入れて いく。 • 今回使う属性はwidth, heightくらいのもの だと思う。 • <svg width=“500” height=“500”> <rect></rect> </svg>
95. 矩形(くけい) <rect></rect> Attributes: x, y, width, height Example: <rect x=“10” y=“10” width=“100” height=“100” fill=“yellow” stroke-width=“3” stroke=“black”></rect>
96. 円 <circle></circle> Attributes: cx, cy, r, stroke, stroke-width, fill Example: <circle cx=“50” cy=“50” r=“20” fill=“yellow”></circle>
97. 線① <line></line> Attributes: x1, y1, x2, y2, stroke, stroke-width, fill Example: <line x1=“0” y1=“0” x2=“10” y2=“10” stroke-width=“5” stroke=“yellow”></line>
98. 線② <path></path> Attributes: d, fill, stroke, stroke-width, fill Example: 省略。ここら辺を参考に。 http://www.hcn.zaq.ne.jp/___/SVG11- 2nd/paths.html
99. グループ <g></g> Attributes: Example: <g transform=“translate(10, 10)”> <rect x=“0” y=“0” width=“300” height=“100” fill=“white” stroke-width=“2” stroke=“black”></rect> <circle cx=“150” cy=“50” r=“35” fill=“red” stroke- width=“0”></circle> </g>
100. transform属性 • transform=“translate(10, 30) rotate(100)” でx, y方向にそれぞれ10, 30平行移動, 100度 回転という意味。 • これがあるからgroupが便利になる。
101. その他 • 他にも<def></def>など色々な要素、属性 がありますが省略します。詳しくは以下の Webページでどうぞ。 • http://www.w3.org/TR/SVG/Overview.ht ml • http://www.w3schools.com/svg/default.a sp
102. 問題 • 次の図形を書いてください。
103. D3.js入門
104. D3.jsとは • inline-svgの要素を付けたり消したり、属性 を書き換えたりをJavaScriptから楽に行おう というライブラリ。 • jQueryを知っている人ならば感覚がすぐつ かめるかもしれない。
105. D3.jsの基本 • Selection: HTMLやInline-SVGの要素をラッ プしたもの。  d3.select(str);  d3.selectAll(str); • 等を使って作る。 Rect selection
106. d3.select, d3.selection • d3.select(“#hoge”)でid属性にhogeが指定さ れた要素を一つ取ってくる。 • d3.selectAll(“.nya”)でclass属性にnyaが指 定された要素をすべて取ってくる。 • d3.select(“body”)でbody要素を取ってくる。 Rect #hoge .nya Rect #nyan .nya body selection selection selectAll(“.nya”) selectAll(“body”)
107. 練習問題 • サンプルのd3_select.htmlを開き、以下のコ マンドをコンソールで実行してください。 それぞれのselectionに何が入っているかを console.logで確認してください。  var s1 = d3.select(“rect”);  var s2 = d3.selectAll(“rect”);  var s3 = d3.select(“#hoge”);  var s4 = d3.selectAll(“nya”);
108. Selection • Selection.attr(属性の名前, 新しい値) • セレクションがラップする要素の属性を書 き換える。 • Example:  var selection = d3.select(“rect”);  selection.css(width, 300);
109. Selection • Selection.css(プロパティの名前, 新しい値) • Selection.attrと同様にCSSのプロパティを 更新する。  var selection = d3.select(“div”);  selection.css(“width”, 1000);
110. Selectionその他のAPI • Selection.append(str)  新しい要素を付け足す。strはrectなど要素名。 • Selection.remove()  selectionがラップする要素を削除する。 • Selection.text(str)  <div>hoge</div>のhogeにあたる部分を変更する。 • Selection.select(str), selectAll(str)  子要素から条件に合う要素を探す。
111. 練習問題 • サンプルのd3_select.htmlを開き、以下の操 作を実行してください。  divの子供のrectをすべて選択して、console.logで その中身を確認する。 • サンプルのd3_select.htmlを開き、以下の操 作を実行してください。  真ん中の赤い円の半径を3倍にする  赤い円に黒い縁を付ける  bodyに新しいdiv要素をつけたし、その中に Hello,worldの文字を入れる。
112. Selection.attrの謎 • 実はSelection.attrの第二引数には即値だけ でなく関数を入れることができる。 var arr = [1, 10, 30]; d3.select("svg") .selectAll("rect") .data(arr) .enter() .append("rect") .attr({ x: function(d, i){return 40*i}, y: 0, height: function(d, i){return 10*d;}, width: 30, fill: "#000" });
113. Selection.data • 肝は4行目の.data()である。ここでarrの各 要素とhtmlの要素をひとつずつ紐づけして いる。 • そしてxとheightに指定した関数では各要素 に紐づけされた配列の要素とそのインデッ クスを受け取り、属性に反映している。
114. Selection.data • 下のenter()や存在しない要素へのselectAll を理解するにはstageの概念が必要である。 var arr = [1, 10, 30]; d3.select("svg") .selectAll("rect") .data(arr) .enter() .append("rect") .attr({ x: function(d, i){return 40*i}, y: 0, height: function(d, i){return 10*d;}, width: 30, fill: "#000" });
115. Selection.data • stageの概念はd3.jsを使いこなすには必須で あるが、当面のところ棒グラフを作ったり、 散布図を作る際には理解せずとも大丈夫な ので一回目では触れないこととする。 • 理解のためには以下のページを参照のこと。 • http://ja.d3js.node.ws/document/tutorial/ circle.html
116. 練習問題 • d3_bar_chartを改変してそれぞれの棒の色 を変えてみましょう。色はfill属性の値を変 更することで変えられます。
117. まとめ • 皆さんの気力が残っているならば2回目に続 く。
118. 出展 • Wikipedia-tan:  CC-BY-SAで配布されています。  Wikipe-tan  User:Lokisis  User:Malyszkz/gallery  File:Neko Wikipe-tan.png • 猫のイラストは全てPublic Domainで配布さ れています。