2019-01-03

【HackDay2018】HackDayに参加して、アクセサリーのデザイン・オーダーメイドサービス「ASYMER」をローンチしました

手芸 Web

こんにちは、れいじです。

昨年12月15-16日に行われた「HackDay2018」に参加していました。

今回は助っ人として機械学習エンジニアをメンバーに迎え、3人でハッカソンに取り組みました。

結果は受賞ならずといったところでしたが、シンプルながらビジネス展開もできそうなサービスが作れたこと、審査員コメントで「すぐにサービスとしてリリースができそう」といったものが目立っていたことから、自分たちが作ったサービスも早めにローンチしてみようということで年末にいろいろ動いておりました。

何を作ったのか

「ASYMER(あしめあ)」というWebサービスを作りました。

https://asymer.info/

片方だけ無くしてしまったイヤリングやピアスをアシンメトリデザインのアクセサリーとして蘇らせるサービスで、スマートフォンで撮影したアクセサリーの画像を元に、色調やモチーフ検出を行うことでピッタリのアシンメトリーデザインをサジェストします。

材料をすべて手芸店で購入可能なので、ハンドメイドが好きな人はレシピをもとに自作することができます。

もちろんオーダーメイドも可能で、手頃な価格から自分だけのアクセサリーを手に入れることができる・・・といった内容です。

こちらHackDayで開発して、12月20日頃からリリースに向けて準備して、1月2日でめでたくリリースと相成りました。

昨年Hackday #hackdayjp で制作した「ASYMER」をリリースしました！https://t.co/YFqOn2GaQv
片方だけなくしたイヤリング、デザインに飽きてしまったピアスをアシンメトリーなアクセサリーとして生まれ変わらせるサービスです！気に入ったらそのままオーダーメイドもできます #つくるってたのしいね
— れいじ@10/22~vvvv本発売 (@reiji1020) 2019年1月2日

ASYMERを使用すれば、画像のようなアシンメトリーなピアスやイヤリングを作成する事ができます(左：入力されたピアス・右：左のピアスを元にASYMERが提案したデザインとカラーで作成したピアス)。
今後いろんなテイストのデザインやパーツをどんどん追加していく予定です！https://t.co/YFqOn2GaQv pic.twitter.com/Zq0blE4kQM
— れいじ@10/22~vvvv本発売 (@reiji1020) 2019年1月2日

リリースするにあたって

UIについて

HackDay後に31日か1日に出そうという話をしていたので、ほぼ2週間ないくらいでリリースまでこぎつける必要がありました。なんでこの時期に出したかったかというと、年末年始でローンチすれば何かとインパクトあるんじゃないかと思ったからです。

HackDayで作ったUIをそのままAWSに乗せてリリースするという方向性もあったのですが、全てReactでフルスクラッチで書き直しています。デザインも(ロゴ等を除き)すべて刷新を行いました。

技術選定については完全に「自分たちができる技術」を使うことにしました。ライブラリの選定諸々は少し冒険しましたが、本業がフロントエンジニアで、Reactを使った仕事をしていることもあり、特に何を話し合うわけでもなくReactでやろうといった感じになりました。

決済について

本サービスではオーダーメイドサービスを取り扱っているので、金銭のやり取りが発生します。まだ無名のサービスですし、我々自体もまぁ無名なので独自の決済形式ってやっぱり不安がある。リリースまでの時間もまぁ短いし。

ということで実際の商品注文に関してはBASEに寄せることにしました。

thebase.in

ASYMERが担当するのはあくまでアクセサリーのデザインとパーツのサジェストだけで、あとの注文に関するやり取りは外部サービスに任せちゃおうと。

BASEでは取引に手数料がかかるので、売上金額の数%はBASE側に持っていかれてしまうのですが、逆に「その数%払えば金銭周りのリスクが回避できるならまぁいいかー」ということでこういう形にしています。もしサービスが成長してきたらちゃんとPaypalなり何なり使うかもしれないです。。。

あとはハンドメイド作家の販売ツールとしてBASEがかなり一般的なサービスであることも選択した理由の一つです。一点物アクセサリーを購入したり、あるいは好きなアーティスト、クリエイターのグッズを買うためにBASEを使用したことがある方はそんなに少なくはなさそうでした。

ASYMERに関しては、ある程度の期間までは購入する人が知ってるサービスを使うことで、注文への心理的不安が軽減できればいいのかな、と思っています。

セキュリティについて

投げ銭サービス「Osushi」、開設直後にセキュリティなど不具合露見運営は一時停止のうえ全額返金対応 - ねとらぼ

ちょうど昨年の2月にセキュリティ面に問題があって騒がれたサービスがあって

https://speakerdeck.com/shibe97/osushinijian-ruhurontoendofalsesekiyuritei?slide=8

「早く世に出して仮説検証したかった」というのが先行しすぎた結果諸々炎上しちゃったという例があります。

やっぱり自分で作ってるうちは気づかないんですよね、こういうの。とくにクレジットカードの扱いとかは本当に怖いです。まだまだ自分は未熟だし、このあたり自分で実装できる気がしない。

さいごに

今後はデザインや使用パーツを増やしたりして、様々なテイストのピアスやイヤリングが入力されてもピッタリのデザインを提案できるようにデータの数を増やして行きたいと思っています。

また、材料の購入元であるパーツクラブさんや貴和製作所さんともコラボして新作パーツを使用したデザインの考案などもできたらいいなあと思っています。持ち込みするのめっちゃ緊張するけど・・・

シンプルですが、オシャレなサービスが作れたんじゃないかと思っています。

ぜひ使ってみてもらえればと思います。

ではでは～

www.kiwaseisakujo.jp

www.partsclub.jp

2018-12-31

【React】axiosを使用してmultipart/form-data形式の通信をする

Web JavaScript

こんにちは、れいじです。

年末なので趣味の開発に時間をつぎ込んでいます。Webサービスを作っているのですが、あまり複雑なシステムではないのでreduxなどは導入せずにシンプルに作っています。

APIとの通信に使用するモジュールとしてはredux-sagaとかredux-thunkとかまぁいろいろあるわけですが、上述の通りreduxは導入しないのでこれらは候補に入りません。

なので最近ナウいと噂のaxiosを使用してAPI通信を実装したいと思います。

github.com

やりたいこと

ReactAppでAPI通信をする。今回は画像を受け取り、APIに投げる処理を実装したい。
画像をポストする場合の通信形式はmultipart/form-dataとする。
通信メソッドはPOST。

ボタン側

※UIデザインにmaterial-uiを使用しています。そのあたりの記述はうまく読解してもらえればと

material-ui.com

<div>
    <input accept="image/*" multiple type="file" className="input" id="upload-img" onChange={this.uploadFile.bind(this)} />
    <label htmlFor="upload-img">
        <Button variant="contained" component="span" color="secondary" aria-label="Add" className="uploadIcon">
              <CameraIcon />
              UPLOAD
         </Button>
    </label>
</div>

ボタンを押すとファイル選択用ブラウザが開きます。画像を選択した後は、取得した画像をAPIにポストします。

画像を受け付ける部分(uploadFile())

 uploadFile(e) {
    this.setState({
      file: e.target.files[0],
    }, () => {
      this.sendFile();
    });
  };

最新の画像をStateに保持・更新した後にAPIに画像を送ります。

画像をAPIに送信する部分(sendFile())

いよいよaxiosが出てくる部分です

  sendFile() {
    // show loading modal
    this.setState({isLoading: true});
    const params = new FormData();
    params.append('file', this.state.file);
    axios
      .post(
        'https://api/upload',
        params,
        {
          headers: {
            'content-type': 'multipart/form-data',
          },
        }
      )
      .then((result) => {
        this.setState({
          isLoading: false
        });
      },
      )
      .catch(() => {
        console.log('upload failed...');
        this.setState({
          isLoading: false
        });
      });

axiosでPOST通信をするときのTipsとして、paramsをそのままjson形式で送信すると通信メソッドを.postで定義していてもOPTIONになってしまいます。

参考：

qiita.com

ここではパラメータをURLSearchParams()で定義してあげているのですが、今回私はmultipart/form-dataでデータを送りたいので、

const params = new FormData();
params.append('file', this.state.file);

と指定しています。

さらにヘッダーにも

{
    headers: {
        'content-type': 'multipart/form-data',
    },
}

をつけてあげます。これでOK。

f:id:yomoyamareiji:20181231112904p:plain

いいかんじにpostできました。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

作者:穴井宏幸,柴田和祈,石井直矢,三宮肇
翔泳社

Amazon

2018-12-19

【vvvv Advent Calendar 2018】vvvvの薄い本を3冊書いて技術書典4/5で頒布していました

vvvv Advent Calender

こちらの記事は「vvvv Advent Calendar 2018」の19日目の記事です

qiita.com

こんにちは，れいじです．

2018年は割とvvvvをあれこれやってた年でして，具体的には本書いてました(Not 商業誌)

2017年末にHackDay 10th Aniv.で受賞→YJTC2018でShakeを支える技術という本を無料配布していたので，これを皮切りに執筆やり始めたっていう流れです．

詳しくはこちら↓ reiji1020.hatenablog.com

書いたもの

vvvvでCGプログラミングやってみる本ービジュアルプログラミングことはじめー

4月に行われた技術書典4でこちらを頒布しました．

https://gyaopan.booth.pm/items/824607gyaopan.booth.pm

vvvvのハンズオン本です．そもそもvvvv知らないっていう人から若干知ってる～くらいの人まで多くの方に手に取っていただきました．

頒布時点で最新バージョンのvvvvのインストール～vvvvでのビジュアルプログラミングを行うための基本的なところ～実際にCGを作ってみる部分までを解説しています．

私のブースで立ち止まってくれる方はどの方もオシャレというか，「あっクリエイターさんかな？」って感じで割と同業っぽい感じがすぐわかる方が多かった気がします．

冊子版は完売してしまって再販の予定がないのですが，電子版はBoothにてワンコインで買うことができます．

vvvvでCGプログラミングやってみる本ーSpreadをマスターしてステップアップ！ー

2冊目は10月に行われた技術書典5で頒布しました．

gyaopan.booth.pm

こちらはvvvvのインストール～Spread周りを中心に解説，実際にCGを作る部分を通して本格的なパッチングに挑戦するための本でした．

ステップアップと題したこともあり，もともとvvvvについて少し知っている方向けに書いていますが初心者でも大丈夫です(大丈夫な感じに書いたつもりでした…！)

比較的新しいvvvv(vvvv50系以降)ではSpreadの種類が増え，様々なSpreadを簡単に作ることができるようになりました．これらの使用方法や実際のCGでの活用方法などを1冊にまとめた本でした．

こちらは冊子版・電子版ともにBoothより通販が可能です．

vvvvでCGプログラミングやってみる本ーマイクやKinectを使ってみよう！ー

こちら3冊目ですが，同じく10月に行われた技術書典5で頒布しました．

gyaopan.booth.pm

こちらは実際に外部接続機器を使用してCGを作ってみるTipsの詰め合わせ本になります．

余談ですが1冊目がグレースケール印刷だったのに対し，2冊目と3冊目はフルカラー印刷です．

USBカメラの他，MIDIキーボードの扱い方についても記述しています．

こちらも冊子版・電子版ともにBoothで通販を行っています．

vvvv本は反響があったか

正直ハンズオン本はかなり売れましたが，その後のステップアップ本まで進んでくれる方はまだまだ少ないです．

そろそろ「vvvvをはじめるための動機付け」が必要なのかなーと思っています．vvvvの使い方を提示するのではなくて，「vvvv使うとこんなことできるよー」的な感じ．

そもそも学ぶ動機がないとやってみよう！ってならないですよね．そのためにも採用実績とかは公開していった方がいいのかなーとか思います．

最近は世界中のパッチャーの作品やイベントでの採用実績などの報告が多く(結構有名どころのメーカー・イベントがvvvv，VLを使ったりしている)，vvvv公式サイトのブログは頻繁に覗くようにしているのですがまだまだ日本は実績が少ない…！日本でもガンガン実績作って知名度上げていきたいですね．弊社コラボしてくれ頼む…

と思ってたら地味にHackDay2018の弊社ブースでvvvvで作った作品が体験できたのだった．シルエットでダンスを楽しむ「VANCE」という作品を展示していました．ヤフーブースだけどちゃんとCANDY CHUPS Lab.名義で出してもらったよ．

hackday.jp