Re* Programming

Thoughts, stories and ideas.

勉強会とか

プログラマー向けデザイン勉強会を開催しました

9/21(土)にプログラマー向けデザイン勉強会を開催しました。 「プログラマー向けデザイン勉強会」 http://connpass.com/event/3086/ 開催内容 8月にデザイナー向けプログラミング勉強会(DmP)を開催しましたが、今回はその逆バージョンです。 PmDは座学形式で開催するということもあり最終的に60人弱に参加頂きました。 もともと東京で @satococoa さんが主催されている P4D というイベントがあるのですが、この勉強会はそこで行われた P4Dを パク・・・参考にさせて頂き開催しました。 私が第二回の D4P (プログラマ向けデザイン勉強会) に参加した経緯もあり、それを大阪でやってみたいというということから実現しました。 開催に伴い P4Dの @ken_c_lo さんにセッションを持ってもらうことになったのですが、それをきっかけにP4Dの他のメンバーが数人大阪まで遠征してくれることになり、@machida さんにも話して頂くなど普段あまり関西で見ることの無いセッションの内容となりました。 また、こちら(PmD)側の主催メンバーである @yokotak0527

  • kamiyam
    kamiyam
Node.js

Sails.js v0.8.9 の 各オブジェクトへのアクセスをまとめてみた

Sails.js の最新版 (記事作成時v0.9.3) が結構変わっているようなので、今まで使っていた v0.8.9 のtips(というには大げさですが)をまとめておきます。 Sails.js v0.8.9 0.8.x Documentation 導入については過去記事を参照のこと Sails.js オブジェクト sails オブジェクト global["sails"] すべての sails 環境下で sailsオブジェクトが取得できる express オブジェクト sails.express sails がラップしている express オブジェクト sails.

  • kamiyam
    kamiyam
勉強会とか

プログラマー向けデザイン勉強会を開催します #pmd01

9/21(土) に プログラマー向けデザイン勉強会(PmD)を開催します。 PmD? PmDは、Programmer meets Design の略です。 プログラマーがデザインを勉強したり、気軽に自サービスのデザインについて相談したりする会を目指しています。 今回は、デザイナー視点の話をセミナー形式で聞く会にしようと思っています。 プログラマー向けデザイン勉強会 http://connpass.com/event/3086/ DmP? 先日、デザイナー向けプログラム勉強会(DmP)を開催しました。 こちらはプログラムを勉強したい人向けにワークショップ形式で行ないました。 第1回目は 外部サイトのRSSをJavaScriptで取得してサイトに表示してみようという内容でした。 勉強会の開催情報等はFacebookページなどで随時更新していきます。 DmP Facebook ページ https://www.facebook.com/dmposaka 次回以降、色々なパターンで開催していこうと思っていますので、こちらもよろしくお願いします。

  • kamiyam
    kamiyam
勉強会とか

第14回 リクリセミナー 「Web制作の未来、あなたの未来」でLTをしてきました

7/27 第14回 リクリセミナー 「Web制作の未来、あなたの未来」でLTをしてきました。 こもりさんのメインセッションから始まり、色々な立ち位置で仕事をしている6名のLTということで参加者としても非常に楽しみな内容でした。 こもりさんのお話ですが、Web制作の未来ということでデザイン寄りな内容に終始するかと思いきや、それだけにはとどまらずフロントサイドの開発手法・ツールの紹介など150分めいっぱいいろんな話を聞くことが出来ました。 他の5名のLTも非常に面白い内容でした。 私はプログラマとしての立場でLTをする予定だったのですが、もう話す内容が無いんじゃないかと思うくらいでした(笑) もはや与えられた8分というLTの時間すべてをメインセッションで紹介されたツールのデモで実演する方が良いかと思ったりもしたのですが、いやいやここは笑いを取らなければ・・・と(違)、きっちり (少しオーバーして? ) 話をして来ました。 スライドとLTで話す内容がリンクしないと、解釈が色々できるスライドなのですが紹介したいと思います。 知っているつもりで実は知らない 拾う技術捨てる技術 from kamiyam . (実は登壇側から見て奥行きのある部屋を想定していたので、いままでのものと比べて字が非常に大きいです。。。) フロントサイドの開発においてGruntなどのツールを利用してSass、CoffeeScriptをコンパイルしてFTPなどで自動デプロイするその方式は、Javaなどで利用されるMavenなどと同じように、プログラマのワークフローに似通って来ています。 それ故に便利なツールを有効に利用して開発を効率良く進めることが非常に大事なのではないかと考えています。 また、使えないことで開発に関われないという事案が必ずしも無いわけではありません。 便利なツールはぜひ使わないともったいないし、今のプログラマにおけるGitの存在のようなものがいずれ出てくるのではないかと思います。 ですので、根を詰めない程度に楽に開発出来る環境づくりが大事ですし、一度は気になる技術を使ってみようというお話をさせて頂きました。

  • kamiyam
    kamiyam
grunt

PhpStormからCakePHPをGrunt.jsで起動する

先日、第7回PHP関西勉強会でLTをさせて頂きました。 PhpStormとGrunt.jsで作るCakePHP快適開発環境 from kamiyam . 私の中ではLTの構成として GruntとCakePHP PhpStormとGrunt という二部構成だったのですが、まぁこれが5分で終わるはずもなくほどんど解説すること無く終わってしまったので、フォロー記事を書いてみました。 PhpStorm 6.0.3 GruntとCakePHP まずは第一部、GruntとCakePHPの構成についてです。 ・CakePHPのフォルダ構成などに合わせたビルド実行 ・CSS/JS/PHP(CTP)の変更監視・LiveReload ・PHP -Sを使ったサーバ起動(PHP5.4 <) ・Apache・nginxへのリバースプロキシ(<PHP5.3) という処理をGrunt.jsを使って実行させる。という内容です。 Gruntfile.js 一式 https://gist.

  • kamiyam
    kamiyam
Node.js

Node.js勉強会 in 大阪 を開催しました

5/25 に (第二回)Node.js超初心者勉強会と、通常版の(第一回) Node.js勉強会を開催しました。 Node.js 超初心者勉強会 in 大阪 http://atnd.org/events/39286 Node.js 勉強会 in 大阪 http://atnd.org/events/39288 午前の超初心者向けのセッションもあったので、準備でいっぱいいっぱいでしたがなんとか無事開催することができてよかったです。 午前のセッション 本当に超初心者向けのセッションということで、インストールセッションを行ないました。 Node.jsを使う人が増えるといいなということと、使う人が増えてむしろ教えて貰いたい(?)ということで開催しています。 詳しい説明ではありませんが、Github にまとめていくことにしています。 Node.js超初心者勉強会

  • kamiyam
    kamiyam
勉強会とか

スーパーハッカソン2013に参加しました

5/11 大阪グランフロント内の イノベーションハブ で行われた スーパーハッカソン2013 に参加しました。 参加しましたというか、5/18まで参加していました。 スーパーハッカソン 2013 http://super-hackathon.net/2013/ 行き場を無くした動物たちの問題を解決する1画面のサービス「pitto」 今回のスーパーハッカソンで完成したみなさんの作品の一覧は、非常に良いまとめ記事があることもあり、この記事ではその一週間の参戦記ということでまとめてみました。 ハッカソンとはなんぞ? ハッカソンという言葉を説明すると、 ある決められた一定期間の間、個人・あるいはチームを組み、プロダクトを完成させるというもの。 ハッカソンを行う期間は1大体日〜3日という場合が多いのですが、スーパーハッカソンでは前回同様一週間という形式になっています。 (内々ではスッパソンと呼ばれていました) チーム制とパーティ このハッカソンでは、チーム参加が必須となっていてそのチームも最大5人までというルールとなっています。 1人で参加しても必ず誰かとチームを組む必要があります。 当日までのチームの組み方としては、ドラクエのパーティととある酒場的なものをイメージすると伝わるかと。 しかし、前回同様、開会日よりも前に仲間を見つける会があったのですが、参加者が本当に少なかった。(私も含め5人しかいなかった) 前回は仲間を探す会では20人前後はいたように思ったのですが、今回はしっかりチームを組んでからの参加を決めるというパターンが多かったようですね。

  • kamiyam
    kamiyam
Node.js

5/25(土) に第1回 Node.js 勉強会 in 大阪 を開催します。

概要 Node.jsの勉強会(第1回) を 5/25(土) に午前と午後の2部構成に分けて開催します。 名前が安直なんですが、 Node.js 超初心者勉強会 (午前) http://atnd.org/events/39286 午前は、Node.jsのインストールから始めたい デザイナー・コーダー・プログラマなど 超初心者向けの内容です。 そのため、Node.jsのインストールから始めます。 Node.js 勉強会 (午後) http://atnd.org/events/39288 午後は、Node.jsのことをもう少し深く知りたい方が対象となる内容です。 Node.jsに関わる方に色々お話して頂く内容です。 今回は、

  • kamiyam
    kamiyam
勉強会とか

PHPカンファレンス関西2013にNode.js界隈の人として出演します

6/1(土)に大阪で PHPカンファレンス関西2013 が開催されます。 その会場 Aにて「多言語パネルディスカッション」(13:20〜14:20)というセッションがあるのですが、そこでNode.jsの人として出演することになりました。 セッションプログラム http://conference.kphpug.jp/2013/program/ 難しいながらも Node.js を続けてきて、声を掛けていただけるのは非常にありがたいことですし、嬉しい限りです。 PHPカンファレンスは普段PHPで開発しない私がなぜか毎年LTをしたり、遠方から来られるPHPに関わる方々と久しぶりに会えるイベントなので非常に楽しみにしています。 まだ募集は開始していませんが、興味がある方はぜひ参加してみてください。 200人規模のイベントは最近参加していないので緊張しそうですね。。。 (2013.5.1追記) 参加登録が始まったようです。 http://conference.kphpug.jp/2013/information/

  • kamiyam
    kamiyam
Node.js

Node.js の MVCフレームワーク Sails.js が良さげなので少し試してみた

Sails.js はNode.jsのフルスタックMVCフレームワークです。 Railsを意識しているフレームワークのようで、Node.js環境において非常に簡単にWebアプリを構成できそうです。 記事作成時の環境です。 Node.js v0.10.1 npm npm v1.2.15 インストール では早速導入 globalインストールでSails.jsをインストールします。 $ npm install -g sails@0.8.9 (2013.5.7 修正) npm install -g sails → npm install -g sails@0.8.9

  • kamiyam
    kamiyam
grunt

Yeomanでフロントエンドとバックエンドサーバを一緒に開発する

先月、HTML5など勉強会に参加した時、雑談タイムで 「 yeoman を使ってバックエンドの開発とかできないですか? 」 という内容に対して、フォローとして 「 gruntでリバースプロキシ使えますよ 」 っていうお話をした。 そのまま記事に書かずじまいで申し訳ないなーと思っていたら、@bathtimefish さんがブログをアップされていた。 その記事、 YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 でリバースプロキシを使った手法が挙がっていたのですが、gruntのモジュールを使うともう少し楽ができそう。 私は、easymock を知らなかったですし、やはりyeoman 使ってる人が周りにあまりおらず、前回の勉強会は非常に勉強になったので、ここは一つ御礼の意味を込めてブログを書こうと思います。 ということで、yeoman(grunt) を使ったバックエンド開発のもう一つの手法を書いておきます。 さてここからが本題。 ベースとなる手順は元の記事を見ていただきつつ、途中まではだいたい同じです。 Yeomanは使える環境が整っているのが前提。 使えない場合はYeoman 導入編を参照してみてください。 まず REST APIサーバのモックが簡単に作れる easymock をインストール $ npm install -g easymock Node.

  • kamiyam
    kamiyam
Node.js

WindowsでNode.js(npm)触るならnodistを使うといいかもしれない

たまにWindowsでもNode.jsを使いたい時無いですか? 私はnode.js(と言うよりnpm)を使ってツールをインストールしたい場合があり、一応(?)Node.jsをインストールしています。 ただNode.jsはバージョンが上がるのが早いので(公式の便利なインストーラがあるとはいえ)都度更新しなければなりません。 ある時ふとしたきっかけでWindows用の便利なバージョン管理ツール「nodist」を見つけてからそれを使うようにしています。 nodist https://github.com/marcelklehr/nodist nodistはWindowsのみで使えるNode.js用のバージョン管理ツールです。 下記環境でテストしてみました。 Windows7 Professional 64bit nodist v0.3.5 まず、nodistコマンドを使えるようにします。 任意の場所に zip ファイルをダウンロードするか、git clone git://github.com/marcelklehr/nodist.

  • kamiyam
    kamiyam
お知らせ

meteorworks(メテオワークス)として独立することになりました

一応、技術ブログ(のつもり)ですが、今回はご報告ということで。 私、@kamiyam は4月2日よりmeteorworksという名前で、フリーランスとして独立することになりました。 このブログは今後も meteorworks のブログとして続けていくつもりです。 以前、私が何をしている(何が出来る)人かわからないという話があったので、自己紹介も兼ねて少し整理したいと思います。 Java、C#, PHP, Node.js でWeb関連のサービスのバックエンドを得意とするエンジニアです。 WordPressサイトやSNSのAPI連携、サーバインフラ周りをすることが多いと思います。 最近、特に力を入れているのは Node.js です。 Socket.io の面白さ、楽しさをそのまま伝わるような仕組みづくりを行なって行きたいと思います。 あと、大阪の勉強会で技術的な発表させて戴く機会が多くなってきました。 ただ 「知っている」ということと「人に伝えられる」ということは、まったく意味が違っていて自分の技術向上に対して非常に大きな活動になってきています。 ということで、まだ諸処準備不足な所もありますが、

  • kamiyam
    kamiyam
grunt

grunt 管理下で Express(Node.js)を開発できるgrunt-init-express を公開しました

gruntで Expressを使った開発を行う環境を生成するgrunt-initテンプレートを公開しました。 grunt-init-express https://github.com/kamiyam/grunt-init-express 概要 grunt を使うとSass、LESSのコンパイルやWebSocketを使ったLiveReload、ファイルの圧縮など様々なことがことができますが、grunt-init コマンドを使うことでscaffoldingな構成を簡単に生成することができます。 すでに提供されているテンプレートを使用することもできますが、今回のようにベースとなるテンプレートを自分で作成することもできます。 公開されている grunt-init の 他のテンプレートについては過去記事を参照してください。 grunt-init-express はこんな機能があります。 gruntからNode.jsを実行 Node.jsをgruntのプロセスで管理するため gruntコマンドを使用します。Node.jsはsupervisorコマンドを使用しています。 SassとCoffeeScriptのコンパイル SassからCSSへ、CoffeeScriptからJavaScriptへ自動でコンパイルします。 HTML、CSS、JavaScript、View(ejs/jade)ファイルのファイル変更監視 public(private)フォルダのHTML、CSS、

  • kamiyam
    kamiyam
grunt

Grunt.js 処理中にsayコマンドを実行すると開発も気持ちスピーディに!?

はい、ネタです。みんな大好き sayコマンド。 MacOSではターミナルで say hogehoge と実行すると喋ります。 $ say hello world !! 「hello world!!」 出来ましたよね。 話は代わって、Grunt.js では grunt-exec を使うことでシェルコマンドが実行出来ます。 よくGruntの処理が終わったらGrowlで結果を表示したり、処理に応じていろんな出力を行っています。 そこでGrunt実行中に処理の内容をsayコマンドで喋らせれば面白いんじゃないかと思い、やってみました。 手順 ベースはこのgrunt-contrib-livereloadの記事です。 (今回の分もgistに一式おいてあります。) 流れとしては次の通りです。 grunt-exec をロード execで使用するsayコマンドを記述 各タスクごとに設定したコマンド処理を埋め込む package.json package.jsonに grunt-exec を追加します。 $ vim package.json { "name"

  • kamiyam
    kamiyam
grunt

grunt-init を使えば色々なプロジェクトのひな形の生成が簡単に

grunt-init を使うと色々なプロジェクトのひな形を簡単に自動で生成してくれるようになります。 Project Scaffolding http://gruntjs.com/project-scaffolding ここでいう色々なプロジェクトとは 次の項目を開発する際のパッケージのことです。(grunt公式から引用) grunt-init-commonjs Create a commonjs module, including Nodeunit unit tests. grunt-init-gruntfile Create a basic Gruntfile. grunt-init-gruntplugin Create a Grunt plugin, including Nodeunit unit tests. grunt-init-jquery Create a jQuery plugin, including QUnit unit tests. grunt-init-node

  • kamiyam
    kamiyam
grunt

matchdepを使ってGrunt.jsのプラグインを自動ロードする

Gruntが0.4系になってGruntのプラグインが細分化されました。 名称が grunt-xxx となるものが非常に多くなりましたね。 また、細分化された分 Gruntfile.js でロードするプラグインの数が多くなっています。 packege.json にこのような記述があったとしましょう。 { "name": "grunt-plugin-auto-load", "version": "0.1.0", "Dependencies": {}, "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-connect"

  • kamiyam
    kamiyam
Node.js

Node.js 超初心者勉強会を開催しました

3/8 Node.js を使って開発をしたことが無い、あるいは触ってみたいという方を対象に勉強会を開催しました。 Node.js 超初心者勉強会 in 大阪 http://atnd.org/events/37147 私は大阪Node学園(モード学園ではない)という Node.js の勉強会の運営スタッフをしているのですが、今回はそのNode学園とは別枠で開催する事となりました。 Node.jsは「インストール」するまでの敷居が高くてなかなか使うに至らない場合が多く、普段は別の言語を使っているプログラマ / サーバーサイドの処理を知る一歩としてNode.jsを触ってみたいデザイナー を対象にしようというのが今回の勉強会の趣旨でした。 また、ワークショップの性質上あまり多くの方を見ることはできないので 「npm install」 などのコマンドを知っている方はなるべく参加しないで欲しい(サポート役として参加なら可)としてみました。 当日のツイートは Togetter にもまとめて頂いています。 平日、しかも金曜日の19時〜というスケジュールにもかかわらずキャンセル待ちが出る状態で、

  • kamiyam
    kamiyam
javascript

jQuery公式PluginRegistryに自作プラグインjqKeycodeBinderを登録したよ

概要 2013年1月17日、jQuery公式プラグイン・レジストリが公開されました。 The jQuery Plugin Registry http://plugins.jquery.com/ いままでの jQuery プラグインは、そのソースコード・実行ファイルが 作成者自身のサイトや Google Code / github などいろんな場所に置いてありました。 良さげな jQueryプラグインを見つけたその場でダウンロード出来ればいいのですが、時間が経って 「あのプラグインを紹介していたサイトはどこだっけ?」 みたいな話になることが多く、探すのも一苦労でした(よね?) jQuery公式でプラグインのインデックスを作って検索できるようにしよう。というのがこのサイトの目的だと思います。 実際のプラグイン本体はjQueryのサイトに配置せず、github に登録された Repository から指定されたファイルの内容を読み取り表示する。 というスタイルを取っています。 プラグインの開発者はプラグインを github の Repository にコミットし、任意のバージョンを指定するタグ(git

  • kamiyam
    kamiyam
grunt

Yeomanを使ってSass/LESSをもっと簡単スピーディに 〜導入編〜

概要 解説編でも書きましたが、Yeomanはビルドツールです。 ファイルの変更を監視してブラウザのリロードをかけたり、Sass LESSのコンパイルを行い、最終的に実行ファイル(プレーンなHTMLやCSSファイル)を出力したりする機能があります。 今回は Yeoman1.0 (beta) のインストールについて書きます。 (※ 2013/02/21時点で安定版 はv0.9.6、v1.0.0は beta の開発版です) Yeoman インストール Yeoman を利用するために、以下3つをインストールします。 $ npm install -g yo grunt-cli bower yo Yeoman本体です。 v0.9まで yeomanコマンド ですべて実行していたのですが、yoコマンドに変更されました。 grunt-cli

  • kamiyam
    kamiyam
grunt

grunt-cli (grunt.js v0.4.x)で LiveReload を試してみた

GRUNTのバージョンがv0.4.0になり、記述・利用方法が一新されました。 Grunt 0.4.0 released 主な変更点と言えば、 grunt-cli をグローバルインストール gruntを各プロジェクトごとにローカルインストール プラグイン(contrib-xxxなど)は細かく細分化された (プラグインはpackage.json に記述し npm install でインストール) Yeomanも1.0から grunt-cli をインストールする形になっています。 手順 今回はLiveReloadを試してみたいと思います。 grunt-contrib-livereload Sass,lessの自動コンパイルなどは無しで。 ファイル一式(gist)https://gist.github.com/kamiyam/4996713 □□□□□□□□□□□ grunt をインストールして作業用のフォルダを作成する もし、0.

  • kamiyam
    kamiyam
tool

Yeomanを使ってSass/LESSをもっと簡単スピーディに 〜解説編〜

以前、勉強会で発表したスライドがあるのでこちらのほうが概要は理解しやすいかもしれません。 WEBアプリケーションビルド・ テストツール YEOMAN from kamiyam . Yeomanとは Yeomanは簡単に言うとビルドツールです。 もしかすると、一般的にビルドっていう言葉は聞きなれないかもしれません。 サーバサイドの言語を書くプログラマなどを例にします。 大雑把ですが、プログラマは 「人が読み書きできるソースコードを書いて、PCが理解できる実行ファイルに変換する」 という作業をおこなっています。 (例外はありますが・・・) つまり、 ・JavaやC#などのコードを書いて実行ファイルに変換(コンパイル) ・使っているライブラリなどとに関連付ける(リンク) これがビルドです。 とは言え、今はコードを書く際 IDE (VisualStudio、ecripse、aptanaなど) が 自動で実行ファイル(Windowsなら.exeファイルなど)に書き出してくれています。 一方、フロントサイド... 今まではHTMLとかCSSなどテキストエディッタで編集したファイルをそのままFTPなんかでアップすればブラウザに表示されていたと思います。 でも、最近はそうもいかない。 HTMLであればJade、CSSならLESSやSass、JavaScriptならCoffeeScript。

  • kamiyam
    kamiyam
eclipse

「第二回 JetBrainsユーザーグループ in 大阪」 で WebStormについて発表してきました

1/30 「第二回 JetBrainsユーザーグループ in 大阪」 で WebStormについて発表してきました WebStormでできること from kamiyam . WebStorm (とそれを含むIntelliJ IDEA)は HTML,CSS,JavaScriptのコード書くのに非常にいいよね。という内容です。 特にJavaScriptに対してが非常によく、私はNode.jsでサービス作るときにWebStormを使っています。 5分LTということであまり多くは伝えられなかったのですが、まぁ細かい所はまた別の機会に。 ともあれ、@yusuke さん、@aa7thさん、参加者の皆さんありがとうございました。 全体の流れは #jbugj で追ってみてください。 以下、フォローアップということで css/Sass/LESSの色設定 #xxxxxx と言ったRGBカラーが左端にそのまま表示されるので非常に便利で、なおかつSass・LESSで変数設定した色もちゃんと追従してくれるので非常にありがたい。 $color変数の色を変更 他の$color変数の色も変わる

  • kamiyam
    kamiyam
勉強会とか

2012 発表振り返りと 2013 新たな世界へ

年が明けてしまいました。おめでとうございます。 昨年もいろんな方にお声掛けを頂き充実した一年でした。 (若干遊びすぎた感もありますが・・・) まずは去年各勉強会で発表させていただいた資料など。 2012 勉強会スライド 大阪Node学園 1時限目 Socket.IOとリアルタイムなナニか 大阪Node学園 3時限目 Socket.IOハンズオン プレゼン勉強会 勉強会での発表がきっかけでこんなにもモテ男になった俺 知っておいて欲しい開発知識・開発ツール」懇親会LT モノとモノとをつなぐ 3つの「れんけい」 「パンダの会」その七 JavaScriptを使って気軽にゲームを作ってみよう ハッカソン脳を鍛える勉強会 とあるWEBエンジニアが スーパーハッカソンで知り得たこと 大阪Node学園 4時限目 WEBアプリケーションビルド/テスト・ツール YEOMAN HighTechOsaka WEBアプリケーションビルド・テストツール YEOMAN 自分が思っていた以上に多方面で発表させていただきました。 「引っ込み思案な目立ちたがり屋」と自負していますので、こういった機会がないと前に立つといったことがありません。 発表前日などは「

  • kamiyam
    kamiyam

消えていく儚さを演出するjQueryプラグイン jdtElementVanish

誰得プラグインは儚いです。一瞬の煌きの為に生まれては消え去っていきます。そんなプラグインたちを表すかのようなプラグインが完成しました、儚いですね。 使い方 jQueryとjdtelementvanishを読み込んで、実行します。儚いですね。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jdtElementVanish.js"></script> <script type="text/javascript"> jQuery(function($) { //プラグイン実行(bodyを選ぶとより儚いですね)

  • kamiyam
    kamiyam