社内で機械学習勉強会をやりました
こんにちは、システムチーム淺倉です。
10月にプロモ―ションチーム＋システムチームで機械学習勉強会を行いました！
時間は木曜日の15時～16時半で、お題は
システムチーム＝画像認識
プロモチーム（佐々木君）＝アソシエーション分析
で行いました。
心強いことに、18新卒の吉村君が大学時代に機械学習やAIを専攻していたため、講師役としてサポートしてもらいました！
今回は佐々木君のアソシエーション分析の成果をご報告します！
非エンジニアマーケター佐々木くんがアソシエーション分析をやってみた
アソシエーション分析とは？
マーケットバスケット分析とも呼ばれ「商品Aを購入する人は商品Bも買う傾向がある」といったように、2つ以上のアイテムの関連性ルールを探るための手法。分析結果から、どの商品が一緒に買われるかなどの併売傾向や、どの商品を販売促進すべきかといった洞察を得ることができる。 たとえば、POSデータなどの大量データから「顧客がポテトフライを購入するとき、その約42％は同時にクラッカーも購入する」といったルールを漏れなく効率的に発見できる。アイテム間の関連性の強さは、信頼度（Confidence）、支持度（Support）およびリフト（Lift）という数値によって測ることができる。
※マーケティング・アナリティクス・ゼミナール様の用語集より引用
「おむつを買う人は、ビールを買う傾向がある」という例がよく使用されます。
一見すると関係ないように見える商品も、購入データを分析することで相関性が見えるのでそこに対してアプローチをかけよう、ということですね。
佐々木君の軌跡
やるぞ！と決めたからと言ってすぐにうまくいくわけではありません。
佐々木君がアソシエーション分析に成功するまでの軌跡を聞いてみました。
Orangeをダウンロード
データ生成のためにエクセルで作成
エクセルを読み込んだらクラッシュしたのでRを使用することに
Rで頑張る
とにかくデータが重くて大変だったそうです。
成果報告会の様子です
苦労の末・・・
今回佐々木君は実際の購入データを基に試していたようです。
商品id,商品idのcsvを作成して、RGuiでこのcsvを読み込み…
支持度、確信度を指定し、処理をさせると・・・・
相関図のグラフを作成できました！
結果
佐々木君「商品Aと商品Bを一緒に買っている人が多いという分析結果が得られました。」
（具体的な商品名は避けます…！）
吉村先生のコメント：
今回はセット商品の注文情報でやったので単品買いが多いという結果になりましたが、サイズ別や色とかで出したら面白いと思います。
データとしては十分な量でしたが、セット商品も多かったので商品ごとの相関は見づらかったですね。
佐々木くんの感想：
Excelが重くてつらかった。
次は別の相関がでそうなデータでやりたい。
最初の成果はデータの質の問題もありちょっと物足りなかったようですが、その後別のデータをもらってやってみたところいい感じの相関が出たと喜んで送られてきたのがこちらです。
おお！図の左下のほう、相関が増えています。
これは今後の戦略にも生かせそうです。
部署またがったメンバーで勉強会をすることで、お互いの知識や技術で新しいことができるのは素晴らしいですね！
次の成果物が楽しみです。
GoogleHomeを使ってみた
システムチームの平川です。
2017年10月6日に日本でも発売となった「Google Home」を購入したので、さっそく自宅で使ってみました。
Chromecastと連携して動画の再生とかできるようなので、今回はGoogleHomeとChromecastの連携まで試します。 ちなみに自宅にChromecastはないのですが、、今回GoogleHomeと合わせて購入です。
某電気店でGoogleHome本体14,000円、Chromecastとセットで14,000円！？で販売しておりました。 ＊Chromecastは無料で付いてくるイメージですね。
では、さっそくセットアップしましょう。
GoogleHomeのセットアップ
まずは本体に電源ケーブルを接続して、コンセントにさします。
するとGoogleHomeが起動して、「アプリをダウンロードしてセットアップして！」と言われるので、言われるがままにアプリをダウンロードしましょう。
ダウンロードが終わったら、自宅のWifiへ接続、加えてGPSをONにしておきます。＊セットアップ中にONにすることになるので先に。
アプリのGoogleHomeを起動して、画面の通りにセットアップを続行。
GoogleHomeを使う
「Ok,Google」
「音楽を流して」というと、無事GoogleHomeから、音楽が流れました。。。流れてきた音楽はわかりませんでしたが。。
「○○（アーティスト名）を流して」と言えば、GooglePlayMusic、もしくはSpotifyにあれば曲を流してくれます。 もちろん「○○（アーティスト名）の△△（曲名）を流して」とか「△△（曲名）」と言えば、曲があればその曲を流してくれます。
「音楽を止めて」と言えば止まるし、「音量を上げて/下げて」と言えば音量の調整も可能です。
Chromecastをセットアップする
セットアップはGoogleHomeのセットアップとほぼ変わりません。 1. Chromecastの電源ケーブルを接続して、コンセントにさし、Chromecastをテレビにさします。
テレビでChromecastをさしたHDMIの映像を表示しておきましょう。
アプリのGoogleHomeを起動します。
サイドのメニューからデバイスを選択してセットアップをクリックしてセットアップを行う。あとは基本的に画面通り。
リンクが行われると、アプリ常に４桁のコードが表示されます。このコードがテレビに表示されるコードと同じであれば、 セットアップしているChromecastは自分のChromecastです。もしコードが表示されていなかったり、コードが違う場合は、他のChromecastとリンクしている可能性があるので、セットアップを中断しましょう。
ChromecastのWifiの設定等が終わると、Chromecastのアップデートが始まります。
アップデートと再起動を数回繰り返し、しばらくすると起動するはずです。
私はここでインターネット環境が悪いせいか、時間がかかり、アプリ場でエラーが表示されました。
画面のとおりしばらく待っていましたが、テレビではChromecastのアップデートも終わっていましたが、私の場合は何も変化がなかったので、一度セットアップを中止しましたが、正常にセットアップは終わってました。
どうやらセットアップは終わっていたようなので、GoogleHomeと繋がっているか確認しましょう。
GoogleHomeから動画をChromecastで再生する
「Ok,Google」
「○○（アーティスト名）の動画を流して」というと、Youtubeに動画があればChromecastで再生してくれます。＊Netfilixを契約していれば映画を再生したりもできると思うのですが、契約していないので今回は試していません。
「動画を止めて」と言えばもちろん、動画の再生は止まります。
音楽の再生と同じで簡単ですね。
これでGoogleHomeとChromecastの連携はできましたね。。。。。
使ってみた感想
- セットアップはすごく簡単
- アプリのGoogleHomeで連携も簡単にできるので、特別な面倒はない
- Line MusicとかAmazonのPrime Musicをメインで使用している人が音楽聞くのは不便なのかも。＊そもそもGoogleHomeと同様の機器を各社出してるし。。
- マイクが広範囲で拾ってくれるので、近くで「Ok,Google」とか言わなくていいし、軽く話すくらいの感覚で喋れば良いのは楽。近くのスマホより、遠くのGoogleHomeのほうが拾ってくれます。
- 人によって違うと思いますが、、GoogleHomeの最低の音量が思ったより大きい。今まで使ってたBluetoothのスピーカがしょぼいせいか、ちょっと音が大きいかなと感じました。
- Androidのスマホを使いながら、GoogleHomeに「Ok,Google」と言うと、持ってるスマホのGoogleアシスタントも同時に起動するのは、予想してましたが、まぁ仕方ないですね。
- 朝のニュースとか、当日の天気とか、予定とか気になったことを声だけで調べられるのは便利です。
今回はGoogleHomeを音声で試していましたが、、 もちろんスマホのアプリGoogleHomeから再生する音楽や動画を指定することもできます。。
そういえばもう一つ、、、うちのテレビではこのような表記でしたが、、HDMIの機器(Chromecast)と連動してテレビが起動するにしました。
こうすると、「Ok,Google」「○○の動画を流して」と言えば、テレビがついていなくても、テレビも自動で起動して動画が再生されます。 便利ですね。。正直今まであまりGoogleアシスタントを使ったりネットの動画をみることはなかったのですが、これを機に少しは使うようになるかも??
エンジニアが言う「勉強会」って何？
こんにちは、システムチーム淺倉です。
今回も社内アンケートで頂いた質問に答えます。
質問は
「エンジニアさん、よく外部の勉強会とかやっているイメージありますが、どういうことをしているんですか？(ほかの人の開発の話をきく？一緒になにか開発している？なんか全然イメージがつきません･･･)」
とのこと。
確かに、「勉強会行ってきます」「セミナー行ってきます」とかって、実際何やってんの？って思うかもしれません。
私もエンジニアになって実際に勉強会に行くまでは、「なんかすごい人が集まって難しい話ばっかりしてるのでは？」と思っていました…。
ので、今回は実際に弊社制作メンバーが良くいく勉強会を参考に、エンジニアがどんなことを外部で勉強しているのか説明していきます！
「勉強会」の方式
「勉強会」と一言でまとめていますが、実際にやることは色々です。
大きく分けると、「もくもく勉強会」「ハンズオン」「LT会（ミートアップ）」で分かれるのではないでしょうか。
聞きなれない単語もあると思うので、一つずつ見ていきましょう。
もくもく勉強会
もくもく会とも言います。
みんなで一か所に集まるものの、各自好きなことを「黙々と」勉強するものです。
黙々と、といっても実際はパソコン触りながら周りの人としゃべりながらやることが多いです。
淺倉はフロントエンドもくもく会や、php関連のもくもく会に参加することがありますが、主催グループによっては自己紹介してから始めたり、メンターさんがいたり、わっと集まってもくもく勉強して、懇親会でやっとみんなと話したり、スタイルは色々です。
ちなみに、制作部は金曜日の18時～19時は「もくもく会」と決め、各自やりたい勉強を行う時間をとっています。
ハンズオン
ハンズオンとは、実際に作ってみよう！というものです。
もくもく勉強会が自分の好きなことを好きなようにやるのに対し、ハンズオンは大体主催者の方がテーマや作るものを決めてくれていますのでそれに沿ってやっていきます。
最近では、わたしはチャットボットを作ったり、swiftアプリを作ったりしています。
エンジニアになりたての頃はサーバー構築のハンズオン（一日かかってホームページをサーバー立ち上げるところから作ります）をやったりしました。
だいたいメンターの方がいろいろと教えてくれるので、初心者の方でも安心です。
他には、OSSという、ソースコードが公開されているもの（全世界に向けて「このプログラム自由に使ってね！」と公開されているもの）を他の人たちと一緒に開発したりという活動をしている人もいます。
こちらは本当にエンジニア！という感じで、ソースコードを見て「ここ直したほうがいいよー」と指摘したりという活動です。
ちなみにこれが以前作ったLINEのチャットボットです。
今のところはオウム返しをするだけですが、返事を返すときに某アツい男の画像を返すようにしました（肖像権の関係からモザイクをかけています）。
私の先輩である杉木さんたちはswiftの勉強会に参加して、アプリを一つ作り上げたようです！
それはこれからきっとapp storeに登録されると思うので、公開されたら製作記を書いてもらいましょう。
LT会/ミートアップ
エンジニアが大好きなLT（Lightning Talks）会です。5～10分くらいの軽い発表をしたり聞いたりします。
「ミートアップ」と呼ばれる、みんなで集まって交流するようなものもプログラムの中にLTが入っていることが多いので一緒にしてしまいましたが、厳密にはちょっと違います。。
が、どちらも興味を同じとする人たちが集まってわいわい話す会という感じです。
LTのテーマは色々ですが、「○○を使ってみた」とか「こんなプログラムしてみたよ」とか、聞いてて面白いものばかりです。
色々な人が集まり著名な方が来ることも多いので、「あの本書いた人だ…！」とか「あのプログラミング言語作ってる人だ…！」とかよくあります。
色々な会社がLT会やミートアップのために場所を提供しているので、他社のオフィスにお邪魔できるのもとっても楽しいですね。
だいたいお酒が出ます。
他にはPHPカンファレンスといった技術カンファレンスに行ったりもします。
常に新しい技術を追っていかないといけないエンジニアにとって、外部の勉強会は本当に大事な機会です。
面白い人と会えるし、役に立つ情報も満載だし、「この技術あのサービスで使いたい！」というものに出会うときもあります。
また、勉強会などが盛んなので同じ興味を持つ人、同じ悩みを共有する人と集まれる機会が多くあるのがエンジニアの良いところかもしれませんね！
このブログでも、これから勉強会レポ等発信していきたいと思います！
制作部の仕事とは？エンジニア編
こんにちは、システムチーム淺倉です。
前回の「制作部の仕事とは？デザイナー編」に続き、今回はエンジニア編をお送りいたします。
エンジニアの切り分けとは？
一言で「エンジニア」といっても種類がいくつかあります。
同じように「エンジニア」と呼んでいても会社によって定義が違ったりするので、今回解説するのは一例と思ってください。
エンジニアは、大きく分けると3つに分類されます。
フロントエンドエンジニア
ブラウザで見えるものを扱うエンジニアです。ページの装飾をしたり、渡ってきたデータを整えてページに表示したりします。
言語としては、HTML,CSS,Javascriptなどを使用します。サーバーサイドエンジニア
見えない裏側での処理を扱うエンジニアです。データベースからデータをとってきて計算したり、表示に使えるように整えたり、ユーザーがファイルにアクセスするときの処理をしたりします。
「プログラマ」と言った時のイメージはサーバーサイドエンジニアが近いかもしれません。
言語としては、PHPやJava,C言語などを使用します。インフラエンジニア
webサーバーを構築し、プログラムが動くように環境を整えます。サーバーの負荷を考えていろいろ調節したりします。
インフラがしっかりしていないと、上記のエンジニアが頑張ってもうまく動かなかったりするので、基礎の基礎を作り運用してくれるエンジニアです。
仕事の流れ
エンジニアの仕事の流れは、こんな感じです。
要件定義
・やりたいことなどを聞いて、どんな機能が必要か、どんな風な画面が良いか、などをまとめます
↓
調査・設計
・実際にどんな機能をどうやって作るか設計します
・どんなやり方でやれるか調査したり、影響範囲を洗い出したりします。
↓
開発・レビュー
・設計を基に、プログラムを書いたりサーバーを組んだりします。
↓
テスト
・作ったものがちゃんと動いているかどうかをテストします。
・場合によっては要望に沿ったものになっているかどうかも確認してもらいます。
↓
リリース
・作ったものを実際にみんなが使えるようにリリースします。
大まかにいえばこんな感じです。他にも、マニュアルやドキュメントを作成して次に開発する人が困らないように文書や図を残したり、外部サービスを使用する場合は他の会社の方に問い合わせしたり打ち合わせしたりという機会もあります。
エンジニアといえばコードを書いているイメージがあるかもしれませんが、コードを書くよりもコードを書くまでの設計などに時間をかけているかもしれませんね。
どう仕事を頼まれたらやりやすいですか？
最も質問が多かった項目です。
「どのくらい細かい仕様まで考えて持っていけばいいの？」「どういう仕事の頼み方をされると嫌なの？」という質問が多く見られました。
こちらは実際に制作部の皆さんにアンケートを取ってみました！
デザイナー含め、制作部で「どんな依頼が良いか」という質問に対して共通していたのは
・目的と、そこに至るまでの経緯がはっきりわかること
でした。
「目的・経緯がはっきりしていて、データで出してくれる。希望の参考サイトを提示してくれるとやりやすい」
「やりたいことと、その背景だけまとまっていればOK。あとは相談する感じで来てもらうと、一緒に作っていけるのでやりやすい」
「目的を簡潔に伝えてもらえて、だいたいのやりたいことを伝えてくれる。また詳細を詰める際に技術者と一緒につめるMTGがあるとなお良い」
という回答が得られました。
制作者はいつも「事業部が達成しようとしているこの目的をかなえるためには…」と考えながら作っています。
「これ作ってください」とだけ言われると、「本当に必要なの？」「他のやり方ではダメなの？」となってしまうので、「こういう経緯でこういう目的のために、こんなものがほしいけどどう？」と聞かれたほうが「その目的を達成するのであれば、こんなやり方もできますよ」という提示がしやすくて良いですね。
まとめると
どのような目的を達成したいか
どのような経緯でそうなったか
もしあれば、現時点でどんなふうにやるのが良いと考えているか
の3点があると、話が進みやすいと思います。
細かすぎるところまでは考える必要はなく、やりたいことや経緯がわかればこちらからどのようにやっていくかの提示や話し合いをしながら考えていけるのでとってもやりやすいですね。
制作者・技術者が働きやすい職場とは？
こちらもアンケートを取りました。
・作業環境が整っていること
「サクサク動くハイスペックなPCが使える」「自分が使いやすいキーボードが選べる」「腰や肩へ負担をかけない椅子と机がある」
・制作に集中できること
「場所にとらわれず、個人が集中しやすい環境で仕事ができること」「一人になれる空間があること」
→気持ちよく楽しく制作するために、PCやキーボードにはこだわりたいですね。
あとは差込等のない環境で作業したいときもあるので、そういう時に自席を離れて一人でできる空間があるととても良いです。
・新しい技術や知識を追い求める風土やメンバーがいること
「新しい技術を習得することや、切磋琢磨していける土台、風土があること」「技術・知識を共有できるチームメンバー」
・質を追い求められること
「質を求めることができること」「一緒に良い物を作り上げる気持ちがあること」
→技術は日々移り変わり進化するもの。それをどんどん学んでいき挑戦できる環境があると、制作物の質もぐんと高まっていきます。 それができる風土があったりメンバーがいたりすると満足のいく制作現場ができていくのではないでしょうか。
・その他
「周りのメンバーがよく褒めてくれること」「口頭ベースになりすぎずデータに残すこと」
→お互いに認め合う雰囲気や、しっかりとデータに残して言った言わないの問題を防いだり、後から技術的な共有がしやすい資料が残っているようにしておくことも大事ですね。
以上、制作部の仕事とは？エンジニア編でした！
制作部の仕事とは？デザイナー編
こんにちは、システムチーム淺倉です。 以前社内で新卒2年目までを対象に「制作部に聞きたい事」アンケートを取らせていただきました（回答してくれた皆さんありがとうございます！） 色々質問をいただいたのですが、「エンジニア・デザイナーってどんな種類があるの？」「エンジニア・デザイナーってどんな感じで仕事してるの？」という質問が多かったので、エンジニア編/デザイナー編に分けて答えていきたいと思います！
今回は、デザイナー編ということで、弊社のデザイナー土橋さんに書いていただきました！
webデザイナーの切り分けとは？
webデザイナーの定義は結構曖昧です。 なので、”ここから、ここまでの仕事がwebデザイナーである”という区切りはありません。 人によって「デザイン制作のみ」だったり「デザイン制作＋コーディング」だったりです。 しかも「デザイン制作」「コーディング」という言葉も、分解すると人によっては作業内容が異なります。
webデザイナー周りの職種
コーダー
コーディングのみをする仕事です。 webデザイナーが作成したデザインをHTML＋CSSでレイアウトを行います。
こちらもコーディングが仕事になりますが、ただ単にデザイン通りにコーディングするコーダーとは違って、自ら考えてデザインを最適化する仕事です。文書構造、デザイン、SEOなど、あらゆる用途のHTMLコーディングを行うエンジニアです。
フロントエンドエンジニア
Webにおいてフロントエンドとは、ユーザー対して最も前面にある環境のことで、フロントエンドエンジニアとはユーザーとシステムを繋ぐ役割を担っています。
デザイン要素を中心に考えるのではなく、実際に閲覧・使用するユーザーの思考を考慮したコーディングを行います。したがって、HTMLだけではなくJavaScriptやjQueryなどのプログラミング言語も頻繁に使用します。
参考：http://rabbit-punch.com/web/539
作業の手順が知りたい。どういうところから手をつけているんだろう？
主な仕事の流れ
ヒアリング・打ち合わせ
↓
（ワイヤーフレーム）ラフ作成
↓
デザイン作成
↓
コーディング
↓
テスト
↓
リリース
↓
確認
これは、自分が思う一番ベーシックな流れです。 ただし、仕事の流れは案件によって様々です。その時・その担当にあった流れで進めていきます。 シーコネの場合は、ラフは運営スタッフが用意してくれる事が多いのでデザイン作成～が一番多いかもしれません。 人によっては、0から全部任せていただいてワイヤーから作成することももちろんありますが、これがやりにくいとも一慨には言えませんし、逆にラフをいただけるからやりやすいとも言えません。
どう仕事を頼まれたらやりやすいですか？
案件の内容にもよりますが、目的や意図・経緯・目指したいゴール・（もしあれば）個人的にその時点で思っていることを明確にして伝えていただけるとやりやすいなと思います。
これらがはっきりしていると、0からでも、デザインからでも作成しやすいですし、担当の意向を踏まえた上で、ユーザーに対するアプローチ方法を考えられます。
また、担当が見逃していた「あ！これも必要だった！」、いわゆる追加案件をこちら側で事前に気付くことができるかもしれません。
あとは、簡単なデザイン業務を運営スタッフが担う場合は、制作の区切りや分担を明確に伝えていただきたいなと思います。業務のバッティングや漏れを防ぐためです。
・・・と、ここまで書いて思いましたが
最終的に一番重要なのは、依頼内容をテキストに起こして共有していただくことかもしれません。
どんなに内容が完璧でも、記録がない事には漏れや言った言わない、二重三重確認が発生しますから・・・・。
中国語の繁体字と簡体字を簡単に変換するJavaScript
こんにちは、システムチーム淺倉です。
弊社のippin mallは、世界16か国を対象とした越境ECのため、多言語対応をしています。 今は英語、中国語、日本語に対応していますが、中国語には繁体字と簡体字があるのでユーザビリティを考えて繁体字と簡体字を変換する機能をリリースしました！ 今回は繁体字↔簡体字の変換を簡単に行うJavaScriptを中国人マーケターさんが教えてくれたので紹介します！
実装までの手順はたった3ステップ。
1. ‘tw_cn.js'ファイルをダウンロードし、適当なフォルダに置く。
→GitHubからダウンロードできます。
2. 変換ボタンを表示したいところに以下のようなボタンを作成するソースコードを入れます。
<a id="translateLink" href="javascript:translatePage();">切り替えボタン</a>
3. javascriptを読み込むところに以下のソースコードを貼り付けます。
<script type="text/javascript" src=".../js/tw_cn.js"></script> <script type="text/javascript"> var defaultEncoding = 2; //ホームページに使用されている漢字の様式：1-繁体字，2-簡体字 var translateDelay = 0; //遅延時間,100=100ms,デフォルト=0 var cookieDomain = "サイトのドメイン"; //Cookieアドレス var msgToTraditionalChinese = "繁體"; var msgToSimplifiedChinese = "简体"; var translateButtonId = "translateLink"; translateInitilization(); </script>
これでボタンを押すだけで繁体字と簡体字が切り替わります！簡単ですね。
ちなみに、javascriptファイルの中身を見ると、漢字がずら――――っと並んでいます。 マッピングをしているということなのでしょうか…？
中国語の対応をしている方はお試しください。
シーコネクトTech Blog始めます！
こんにちは、シー・コネクトシステム開発チームの浅倉です。
この度、シー・コネクトではエンジニア・デザイナーによるテックブログを始めることになりました。 システム開発って何するのか、シー・コネクトの制作部ってどんなことをしているのか、皆様に広く知ってもらうきっかけになれればなと思います。
この記事では簡単に
シー・コネクト制作部の紹介
シー・コネクトの事業の紹介
を書いていこうと思います！
シー・コネクト制作部とは
シー・コネクトには現在3名のシステムエンジニア（+1名の情シス）と、1名のデザイナーが在籍しています。 業務内容は主にシー・コネクトの運営するECサイトの開発や保守です。
エンジニア経歴は様々で、ベテランエンジニア、専門で学んでからエンジニアになった中堅エンジニア、文系新卒2年目エンジニアといった感じで和気あいあいとやっています。
シー・コネクトの事業の紹介
シー・コネクトは現在3つの主要事業を持っています。
インク革命.COM
互換インクの通販サイトです。Webサイトの運営はもちろん、商品の買い付け、販売から発送、アフターサービスまですべてを自社で行っています。
nunona
女性用の布ナプキンを専門に扱う通販サイトです。不妊や生理痛などの悩みを抱えている女性たちに体の内側から健康になってもらいたいという想いからスタートしたサービスです。
Ippin mall
Ippin mallは、”Made in Japan”だけにこだわらず、Produced in Japan,Popular in Japanなど、”Japan Quality”の食品、ファッションアイテム、コスメ、子供用、電化製品をはじめとした幅広い商品を、中国、東南アジアを中心とした世界17ヶ国に向けて簡単に販売することができる越境ECサービスです。
