tag:blogger.com,1999:blog-9883859957040663702023-11-23T19:13:35.710+09:00SHANON Engineer's Blog株式会社シャノン 技術ブログkmthttp://www.blogger.com/profile/00284970260032462549noreply@blogger.comBlogger307125tag:blogger.com,1999:blog-988385995704066370.post-89342409411995900672019-04-24T10:51:00.001+09:002019-04-24T11:33:39.237+09:00Selenium Conf Tokyoにいってきました!<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBxCe6DvdgmcVcysjqggCwtJULJ_YU7PMTDrJLXTeeHXYvdUgfClwuUnD4LgvIIz8EcbPK8q6V0uTFmAfs4R0TNaz1faqMZm7z0gTkDkxceau3K9zp7g0NmFVQOxHz36B_xAzvEzDx94/s1600/IMG_8715.jpg" imageanchor="1"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBxCe6DvdgmcVcysjqggCwtJULJ_YU7PMTDrJLXTeeHXYvdUgfClwuUnD4LgvIIz8EcbPK8q6V0uTFmAfs4R0TNaz1faqMZm7z0gTkDkxceau3K9zp7g0NmFVQOxHz36B_xAzvEzDx94/s400/IMG_8715.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
</h2>
<div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial";"><span style="white-space: pre-wrap;">生産性チームのkmt です。</span></span><br />
<span style="font-family: "arial"; white-space: pre-wrap;">4/18~19に東京で</span><a href="https://conf.selenium.jp/" style="font-family: arial; white-space: pre-wrap;">SeleniumConf</a><span style="font-family: "arial"; white-space: pre-wrap;">が行われ、弊社の</span><span style="font-family: "arial"; white-space: pre-wrap;">inomata、kzhirataと参加してきました。</span><br />
<span style="font-family: "arial"; white-space: pre-wrap;">今日は、その模様をお伝えできればと思います。</span><br />
<div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
</div>
</div>
<div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial";"><span style="white-space: pre-wrap;"><br /></span></span></div>
<div>
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">基調講演1:State of the Union(Day1)</span></h2>
<b id="docs-internal-guid-9f297807-7fff-cf8a-ddbb-c6d91f2645d6" style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Seleniumプロジェクトのリードであり、コア開発者の一人であるSimon Stewartさんが</span><span style="font-family: "arial"; white-space: pre-wrap;">Seleniumのこれまでとこれからを雪の結晶をモチーフに話してくださいました。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">Selenium4がでる予定ですが、互換性は保たれるとのことなので一安心です。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">ただし、非推奨のものは引き継がれないので注意が必要です。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;">Selenium4では、Friendly Locatorが追加されるそうで、それによってIDがランダムな</span><span style="font-family: "arial"; white-space: pre-wrap;">Locatorの取得が比較的簡単になるとのことでした。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">テスト影響分析 ~パイプラインを整理しテスト実行時間を削減~(Day1)</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">テストの実行をいかに早くするかという話。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">テストが早く実行できなければ、開発から</span><span style="font-family: "arial"; white-space: pre-wrap;">リリースまでを早くすることをはできません。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">自動テストの戦略のプラクティスとして、テストピラミッドの話がありますが、</span><span style="font-family: "arial"; white-space: pre-wrap;">スピーカーのチームでは、数字の上ではピラミッドの構造を成していた。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">しかし、実行時間を見るとピラミッドが逆向きになってしまっていたとのこと。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">そこでの施策として、</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> 1.修正したコードがどのテストに関連するかをマッピングして、コードとテストの</span><span style="font-family: "arial"; white-space: pre-wrap;">関連性を分析する。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> 2.今後修正したコードに対してピンポイントでテストを実行する</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">として、これにより実行時間を短縮させることに成功したという内容でした。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">修正コードに関連するテストをピンポイントで行うといのはGoogleでも同じアプローチを</span><span style="font-family: "arial"; white-space: pre-wrap;">とっていたと思います。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">自動テストの戦略として、今後日本でもはやりそうな話でした。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">私は如何にして心配するのを止めてレコード・アンド・プレイバックツールを愛するようになったか(Day1)</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">新しくなったSeleniumIDEの特徴、およびIDEのプロダクトポリシーに関する講演です。 </span><br />
<span style="font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">講演では、<a href="https://techbeacon.com/app-dev-testing/10-features-every-codeless-test-automation-tool-should-offer">10 futures codeless</a> にあるコードレスツールの10個特徴を参照しながら、</span><br />
<span style="font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">各特徴について、IDEがどのような対応をしているのか話していました。</span><br />
<span style="font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"> Seleniumに限らず、コードレスツールの維持管理は非常に厄介です。</span><br />
<span style="font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">簡単だと思って導入すると維持管理で痛い目に遭います。旧SeleniumIDEがまさにそうでした。</span><br />
<span style="font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">新しくなったIDEは、繰り返し処理や条件分岐、クロスブラウザ対応など、旧SeleniumIDEにない機能を備えています。 </span><br />
<span style="font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">気軽にRecord and Playbackできるツール、でかつ維持管理しやすいIDEになってほしいと思います。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ヘッドレスでSeleniumのテストを高速化(Day1)</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ヘッドレスブラウザでのテストをPullRequest直後に実施して問題を早期に発見する。
dev QAが連携して、Agileで、継続的にテストすることが重要である。 という内容の講演でした。
JavaScriptで描画したHTML、モバイルなどブラウザ・デバイスの種類が増加したことに伴いフロントエンドでのテストが大変になっています。
開発者が要求を満たすデバイスで動作確認すること自体非現実的だし、統合環境に入れてからQAがテストを開始するのは、手戻りのリスクが高く生産性が落ちます。
ヘッドレスブラウザでのテストを、PR直後に実施するのは合理的であると思いました。ヘッドレスブラウザでのテストは、実ブラウザでのテストを代替えするものではなく、問題を早期発見するための手段という考え方にも共感できました。
逆に言えば、PCで使う業務アプリケーションの部分は、この仕組みはそれほどすぐに必要とはされないだろうと思います。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ありがとう、Selenium(Day1)</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">手動テストが時間かかりすぎて、つらすぎるのでSeleniumを導入したという話でした。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Seleniumを導入した結果として、マニュアルテストの実施コストが半分になった。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">さらに今まで手付かずだった改善タスクの消化率が4倍になった(すごい)。</span><span style="font-family: "arial"; white-space: pre-wrap;">という結果が出たそうです。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">seleniumを導入して余裕が出てきた分、今までやりたかったが実施できたことが最大の結果という話でした。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">クライアントサイドの音声認識のテスト(Day1)</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">どのようにして音声のテストをするのか?と興味があったのですが、</span><span style="font-family: "arial"; white-space: pre-wrap;">PulseAudioとdockerコンテナを使って、音声認識テストのテストをされていました。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">この手法を使えば、アクセントのある音声ファイルを準備すれば、かなりのバリエーションの音声テストが</span><span style="font-family: "arial"; white-space: pre-wrap;">自動ででき品質の向上に役立つと思いました。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Seleniumってこんなテストにも使えるんだ、幅広いなと思いました。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">基調講演2:動作するきれいなコード - どうたどり着くか(Day1)</span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">動作するきれいなコードを書くためには、どのようにしていけばいいか。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">あらかじめ設計をとことん考えて、うごくものを作るのか?</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">あるいは、ある程度考えて、うごくものを作りながら考えるのか?</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">現在のシステム開発というのは、何もしなくても周りが進歩していくので、何も修正を加えないといつか</span><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;">動かなくなる。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">設計を考えに考えてするよりも考えながら作成したほうがいいとのことでした。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">そこにいかにリファクタリングをいれていくか。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">あとでリファクタリングをするとなると工数がとれなくなり、結局やらないタスクとなる。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">リファクタリングのサイズを細かく分解して、日々の開発とともにまわしていくということが大事だと</span><span style="font-family: "arial"; white-space: pre-wrap;">おっしゃっていました。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Seleniumの未来~WedDriver W3C標準とテスト自動化のディープな話~(Day2)</span><span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black;"><a href="https://github.com/intuit/karate" style="text-decoration: none;"><span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Karate</span></a><span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">というRest APIのテストツールを紹介していただきました。</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">APIのテストをする場合、様々な機能を備えているのでとても便利そうでした。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: black;"><a href="https://cucumber.io/docs" style="text-decoration: none;"><span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">cucumber</span></a><span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">を使っていて、レポートが充実していました。</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">また、</span><a href="https://github.com/Microsoft/WinAppDriver" style="text-decoration: none;"><span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">WinAppDriver</span></a><span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">を使うと、Windowsのアプリに対しても自動テストができるということで、</span><span style="font-family: "arial"; white-space: pre-wrap;">Windowsの計算機のデモを見せていただきました。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">自動化の幅がひと昔前に比べて格段にひろがってきたなあと思います。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">エッジ・オブ・ピラミッド(Day2)</span><span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">本来ならUnitテスト、インテグレーションテスト、UIでピラミッド型になるのが理想ですが、</span><span style="font-family: "arial"; white-space: pre-wrap;">その逆のアイスクリーム型になっていた場合、どのようにしてピラミッド型にしていったらよいかという</span><span style="font-family: "arial"; white-space: pre-wrap;">セッションでした。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">1. 常に新しいツールを探してUnitテストやインテグレーションテストが作成できないか考える。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2. ペアテスティングを行って、開発者とコミュニケーションをとりUIテストではなくUnitテストやインテグレーションテストでできるものはそちらでやる。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ということを心掛けるとよいとのことです。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">また、バグがあった場合、Unitテストやインテグレーションのどこが不足して発生してしまったかを考え、</span><span style="font-family: "arial"; white-space: pre-wrap;">不足しているところを追加するとよいとおっしゃっていました。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">オープンソースソフトウエアとの協調~私がオープンソースへの貢献を始めた経緯と、あながた貢献すべき理由~(Day2)</span><span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">誰かの役に立ちたい、学習をしたい、問題を直したい、キャリアアップにつながるなどオープンソースへの</span><span style="font-family: "arial"; white-space: pre-wrap;">貢献理由は様々あるが、その理由のどれもが正しくよいことである。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">最初は何をしていいか、どうやったらいいか、怖かったりするかもしれないが、自分の経験からいうと失敗も</span><span style="font-family: "arial"; white-space: pre-wrap;">あったが、コミッターの人たちがやさしく迎え入れてくれたので、</span><span style="font-family: "arial"; white-space: pre-wrap;">ぜひオープンソースに貢献してほしいとおっしゃってました。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;">ドキュメントやコミュニティを助けるなどプログラムの作成や修正だけでなくても貢献できることはある。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">時間がなければ寄付も立派な貢献であるとのことでした。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">どこに貢献するか?最初は、自分が今使っているものなどがよいとおっしゃってました。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">感じの悪い人がいないか?といわれると全くそうではないが、そのときはそのコミュニティを去ればいい、</span><span style="font-family: "arial"; vertical-align: baseline; white-space: pre-wrap;">自分を温かく迎えてくれるコミュニティを選ぶとよいと</span><span style="font-family: "arial"; white-space: pre-wrap;">実際に貢献されている人ならではのお話でした。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">WindowsブラウザをDockerコンテナで動かすには(Day2)</span><span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">WindowsのイメージをdockerにコピーしてWindows環境をたてることで、ライセンスさえあれば</span><span style="font-family: "arial"; white-space: pre-wrap;">Windows環境を簡単にたてられるといセッション。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">VDAライセンスを使えば、4つまでたてることができる。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">スペックは最低2cpuは必要とのことでした。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">複数Windows環境をたてたい場合はすごく便利だと思いましたし、upgradeしてもとにもどしたいときも</span><span style="font-family: "arial"; white-space: pre-wrap;">すごく便利そうです。</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">この匂いはなに?~テストコードをキレイにしよう~(Day2)</span><span style="background-color: transparent; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></h2>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">具体的なコードを元にテストコードをきれいにしていくセッション。</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">なぜここを一つにまとめるとよいのか?</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial"; white-space: pre-wrap;">ここはやりすぎなのでやらないなど、</span><span style="font-family: "arial"; white-space: pre-wrap;">1つ1つ丁寧に解説してくださったので非常にわかりやすかったです。</span><br />
<span style="font-family: "arial"; white-space: pre-wrap;"><br /></span>
<span style="font-family: "arial"; white-space: pre-wrap;"><br /></span>
<br />
<h2 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial";"><span style="font-size: 14.6667px; white-space: pre-wrap;">最後に。。。</span></span></h2>
<span style="font-family: "arial";"><span style="white-space: pre-wrap;">2日間にわたって東京で行われたSeleniumConf。</span></span><br />
<span style="font-family: "arial"; white-space: pre-wrap;">普段なかなか聞けない海外の登壇者のセッションをたくさん聞くことができて、大変貴重な経験でした。</span><br />
<span style="font-family: "arial"; white-space: pre-wrap;">実行委員会の皆さん、スポンサーの皆さん、登壇者の皆さんには本当に感謝しかありません。</span><br />
<span style="font-family: "arial"; white-space: pre-wrap;">ありがとうございました!!!</span><br />
<span style="font-family: "arial"; white-space: pre-wrap;"><br /></span>
<span style="font-family: "arial";"><span style="white-space: pre-wrap;">もっとちゃんと知りたい方は、<a href="https://www.youtube.com/results?search_query=Selenium+Conf+Tokyo+2019">YouTube</a>でみることもできますので是非どうぞ!</span></span></div>
<div>
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><br /></span></div>
kmthttp://www.blogger.com/profile/00284970260032462549noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-45847712093526337012018-12-25T21:31:00.000+09:002018-12-26T02:34:22.997+09:00LINE の Bot と Dialogflow を使って友達を人体錬成し,クリスマスを最高の日にしよう!<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
<img alt="「パーティー フリー素材 いらすとや」の画像検索結果" class="irc_mi" height="528" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhntfNQEcu0KUkgVDAU-q7uWEoSSYSKFlVTRScXSXF1YUuVo6S2DKDf8pW9h8HK3CyekZRj1rWaOqh3-EUHsJElFEE9WCULceZO8pkqdWWhb5g_M4E86hYGEwe5aCmSbucpNOlfDE4O99pg/s640/party.png" style="margin-top: 0px;" width="640" /></div>
<br />
<br />
こちらは <a href="https://qiita.com/advent-calendar/2018/shanon">Shanon Advent Calendar 2018</a> の25日目の記事です.<br />
こんにちは Tado56 です.
<br />
みなさん,クリスマスですね.<br />
誰とお過ごしでしょうか? 家族,友達,恋人?<br />
そうですよね,一人ですよね.とてもわかります.<br />
<br />
別にクリスマスに一人だからなんだって話だし,そんな世間の空気に惑わされるような人間ではないし別に何も気にしていないしなんなら一人の方が好きなまであるしいっそのくぁwせdrftgyふじこlp<br />
<br />
そうですよね,なんだかんだ何もないのも寂しいですよね.<br />
でも恋人もいないし,家族はすぐに会いに行ける距離にいないし,遊んでくれる友達もいない・・・<br />
でも今日何かしたという痕跡がほしい・・・.そこで考えました.友達を作ろう!<br />
<br />
<h2>
LINE のチャットボット と Dialogflow で友達を作る</h2>
今回は,LINE の Messaging API と, Dialogflow を使って友達から飲み会に誘われる,というチャットボットをコードを書かずに作ってみようと思います.<br />
<br />
<h3>
LINE Messaging API で bot を作る</h3>
Messaging API とは, LINE が公開している,ユーザとの双方向コミュニケーションを実現する API です.<br />
<br />
この API を利用するには, <a href="https://developers.line.biz/ja/" target="_blank">LINE Developer コンソール</a> にログインします.<br />
初回ログイン時には開発者登録をする必要があります.項目を埋めて進んでください.<br />
<br />
<br />
<ul>
<li>次にプロバイダーを作成します.これは作成する bot の提供元になります.画像ではすでに存在していますが,「新規プロバイダー作成」をクリックします.</li>
</ul>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-AVW4sw3Qs6M/XCH56UNDYxI/AAAAAAAAUh8/lyDZQv0ptpkxsep_qW_263_k-Bjp_HNgACLcBGAs/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="316" data-original-width="1065" height="187" src="https://1.bp.blogspot.com/-AVW4sw3Qs6M/XCH56UNDYxI/AAAAAAAAUh8/lyDZQv0ptpkxsep_qW_263_k-Bjp_HNgACLcBGAs/s640/1.png" width="640" /></a></div>
<br />
<br />
<ul>
<li>プロバイダー名を入力して完了します.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-JYYX6j-qbJw/XCH6j5L2USI/AAAAAAAAUiE/WbbRvIxdeyouzZunhvJeNEKsLN7cTL-twCLcBGAs/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="511" data-original-width="1017" height="320" src="https://2.bp.blogspot.com/-JYYX6j-qbJw/XCH6j5L2USI/AAAAAAAAUiE/WbbRvIxdeyouzZunhvJeNEKsLN7cTL-twCLcBGAs/s640/2.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<ul>
<li>プロバイダが作成できたら,次はチャネルを作ります.今回は Messaging API を使用するので, Messaging API を選びます.</li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-Ko91u2RySdY/XCH67hcoYGI/AAAAAAAAUiM/f_Q4RAreEQMKbVZ2gbeTBFAV4yUx35qjACLcBGAs/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="591" data-original-width="967" height="391" src="https://2.bp.blogspot.com/-Ko91u2RySdY/XCH67hcoYGI/AAAAAAAAUiM/f_Q4RAreEQMKbVZ2gbeTBFAV4yUx35qjACLcBGAs/s640/3.png" width="640" /></a></div>
<div>
<br /></div>
<br />
<br />
<br />
<ul>
<li>入力画面に遷移しますので,必要な情報を入力します.</li>
<ul>
<li>アプリ名: <span style="box-sizing: inherit;">任意(これが利用者に表示される名前になります)</span></li>
</ul>
</ul>
<br />
<ul><ul>
<li style="box-sizing: inherit; margin: 0px; padding: 0px;">アプリ説明: <span style="box-sizing: inherit;">任意</span></li>
<li style="box-sizing: inherit; margin: 0px; padding: 0px;">プラン: <span style="box-sizing: inherit;">Developer Trial</span></li>
<li style="box-sizing: inherit; margin: 0px; padding: 0px;">大業種: 任意</li>
<li style="box-sizing: inherit; margin: 0px; padding: 0px;">小業種: 任意</li>
<li style="box-sizing: inherit; margin: 0px; padding: 0px;">メールアドレス: 自分<span style="box-sizing: inherit;">のメールアドレス</span></li>
</ul>
<li>入力をして作成すると,チャネルが作成されます.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-U_rq_Y0XfWw/XCH8CwBiWdI/AAAAAAAAUiU/oeeiwM6p3GQbj3DBzcAAEVLRKA6621l-gCLcBGAs/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="515" data-original-width="551" height="598" src="https://3.bp.blogspot.com/-U_rq_Y0XfWw/XCH8CwBiWdI/AAAAAAAAUiU/oeeiwM6p3GQbj3DBzcAAEVLRKA6621l-gCLcBGAs/s640/4.png" width="640" /></a></div>
<div>
<ul>
<li>作成したチャネルをクリックして,「チャネル基本設定」の設定を行います.</li>
<li>「メッセージ送受信設定」の「アクセストークン」の「再発行」ボタンをクリックします.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-HsmyI3u2bu8/XCH8veiAI4I/AAAAAAAAUic/T8vESzn6fZogzo4xnyKPiknSmU-4ry6lgCLcBGAs/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="427" data-original-width="670" height="406" src="https://2.bp.blogspot.com/-HsmyI3u2bu8/XCH8veiAI4I/AAAAAAAAUic/T8vESzn6fZogzo4xnyKPiknSmU-4ry6lgCLcBGAs/s640/5.png" width="640" /></a></div>
<div>
<br /></div>
</div>
<div>
<ul>
<li>そのまま再発行します</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-QZ654k8KnmU/XCH9ABsb2ZI/AAAAAAAAUik/boe7LebNQqYTGlSrpE3FhCLd50E7WDJtgCLcBGAs/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="406" data-original-width="553" height="468" src="https://1.bp.blogspot.com/-QZ654k8KnmU/XCH9ABsb2ZI/AAAAAAAAUik/boe7LebNQqYTGlSrpE3FhCLd50E7WDJtgCLcBGAs/s640/6.png" width="640" /></a></div>
<div>
<br /></div>
</div>
<div>
<ul>
<li>ほかの項目</li>
<li>メッセージ送受信設定</li>
<ul>
<li>Webhook送信: 利用する</li>
</ul>
<li>LINE@機能の利用</li>
<ul>
<li>自動応答メッセージ: 利用する</li>
<li>友達追加時あいさつ: 利用する</li>
</ul>
<li>友達追加時のあいさつを有効にすると,友達に追加した瞬間にメッセージを送ることができます.今回はこれを使って,「向こうから連絡をしてきてくれた感」を演出したいと思います.</li>
<ul>
<li>設定メッセージ: よう!元気? (ニッコリ絵文字)</li>
</ul>
</ul>
</div>
<div>
<ul>
<li>いったんここまででLINE側の設定を終わらせて,次は返答メッセージを作っていきます.</li>
</ul>
<div>
<br /></div>
</div>
<h3>
Dialogflow を使って対話させる</h3>
<div>
言語解析エンジンです.</div>
<div>
自然言語処理って面倒ですが,これを使えば面倒なところを大幅に削減できます.</div>
<div>
今回はこれを使ってユーザとの会話を成り立たせるようにしたいと思います.</div>
<div>
<br /></div>
<div>
まずは <a href="https://dialogflow.com/" target="_blank">Dialogflow</a> にアクセスしてアカウントを作成します.</div>
<div>
アカウントを作成したら, Agent を新規作成します.項目を入力したら「CREATE」で作成します.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-_s91ssSPI6c/XCH_4LqyylI/AAAAAAAAUiw/tX3JIVJ9ais4l7DloUndCtD5zBQPRoVTQCLcBGAs/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="321" data-original-width="694" height="296" src="https://1.bp.blogspot.com/-_s91ssSPI6c/XCH_4LqyylI/AAAAAAAAUiw/tX3JIVJ9ais4l7DloUndCtD5zBQPRoVTQCLcBGAs/s640/7.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<ul>
<li>作成したら,Entity を登録します.</li>
</ul>
<div>
「よう!元気?」 これにはいろいろな返答の仕方があります.(元気!,あんまり元気じゃない,よう!等)</div>
</div>
<div>
こういう時に「hello」というEntityを作っておいて,それらの返答の仕方のバリエーションを登録しておくと,挨拶の返答を理解してくれるようになります.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-TqITgNXAMRk/XCIZtaTCsqI/AAAAAAAAUi8/jw_6OKBeIq8LamRdIiqsAqv4o0WPlfGeACLcBGAs/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="281" data-original-width="688" height="260" src="https://1.bp.blogspot.com/-TqITgNXAMRk/XCIZtaTCsqI/AAAAAAAAUi8/jw_6OKBeIq8LamRdIiqsAqv4o0WPlfGeACLcBGAs/s640/8.png" width="640" /></a></div>
<div>
<ul>
<li>Intent の作成をします.</li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-VnlGaGfijjQ/XCIa2UiX_PI/AAAAAAAAUjE/Fij5XRUWmAU3peujGRBed-T3ydLrTa4YQCLcBGAs/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="933" data-original-width="1145" height="521" src="https://3.bp.blogspot.com/-VnlGaGfijjQ/XCIa2UiX_PI/AAAAAAAAUjE/Fij5XRUWmAU3peujGRBed-T3ydLrTa4YQCLcBGAs/s640/9.png" width="640" /></a></div>
<div>
<br /></div>
<div>
こんな画面になります.お好きな intent name を付けて,最初は「ADD TRANING PHRASES」をクリックします.</div>
<div>
ここには「よう!元気?」に来るであろう返答の例文を入れてあげて下さい.</div>
<div>
ここの例文が増えれば増えるほど,挨拶の返答を理解できるようになります.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-QrMiahU8TnE/XCIdMNG5SxI/AAAAAAAAUjQ/8FjtQR42mcAERanSO2YVNMreEdbeWQDiACLcBGAs/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="423" data-original-width="872" height="310" src="https://3.bp.blogspot.com/-QrMiahU8TnE/XCIdMNG5SxI/AAAAAAAAUjQ/8FjtQR42mcAERanSO2YVNMreEdbeWQDiACLcBGAs/s640/10.png" width="640" /></a></div>
<div>
このハイライトは,Entity に該当する単語が見つけることができたため,この例文が hello entity であると検出されています.</div>
<div>
<br /></div>
<div>
<ul>
<li>レスポンスを設定する</li>
</ul>
「ADD RESPONSE」でレスポンスの設定をします.</div>
<div>
ここで設定した内容が,LINEでユーザに変身されることになります.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-o4JUCYgRa_s/XCIeGP_3c6I/AAAAAAAAUjY/4_9VtXv3Va0Wxrnj_NkZYYSVEPD5CMQ6wCLcBGAs/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="349" data-original-width="645" height="346" src="https://4.bp.blogspot.com/-o4JUCYgRa_s/XCIeGP_3c6I/AAAAAAAAUjY/4_9VtXv3Va0Wxrnj_NkZYYSVEPD5CMQ6wCLcBGAs/s640/11.png" width="640" /></a></div>
<div>
最後に右上の「SAVE」をクリックして完了です.</div>
<div>
<br /></div>
<div>
<ul>
<li>LINEと連携する</li>
</ul>
LINEと連携できます.左のメニューから「Integrations」 をクリックします.</div>
<div>
そこには,様々なアプリのアイコンがずらりと並んでいますが,LINEのアイコンを見つけて,スイッチを有効にしてください.デフォルトは無効になっています.</div>
<div>
有効にすると,LINE のチャネル情報を入力するダイアログが表示されます.ここに,作成した bot の情報を入力します.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-sUQLZzPE3BU/XCIfMbpXy_I/AAAAAAAAUjk/h_hztxhQj8YXoawVxraXADStg6hGSKLBACLcBGAs/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="764" data-original-width="815" height="598" src="https://1.bp.blogspot.com/-sUQLZzPE3BU/XCIfMbpXy_I/AAAAAAAAUjk/h_hztxhQj8YXoawVxraXADStg6hGSKLBACLcBGAs/s640/12.png" width="640" /></a></div>
<div>
<br /></div>
<div>
チャネルID等は,LINE Developers コンソール の「チャネル基本設定」にあります</div>
<div>
Channel ID:Channel ID</div>
<div>
Channel Secret: ChannelSecret</div>
<div>
Channel Access Token: 「メッセージ送受信設定」の「アクセストークン」</div>
<div>
<br /></div>
<div>
そして, 「Webhook URL」 をコピーして, LINE Developers コンソール の「メッセージ送受信設定」の「Webhook URL」 にペーストしてください.</div>
<div>
接続確認が成功すれば連携が完了したことになります.</div>
<div>
<br /></div>
<h3>
友達が作れた!!!</h3>
<div>
コンソールにQRコードがあるので,LINE で QRコードを読み込んで友達追加します.</div>
<div>
<br /></div>
<div>
先ほどまで設定した会話ができるようになりました.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-ogDvVZX7PSI/XCJqAT1WZdI/AAAAAAAAUjw/_ONklrxbdHUQ6-leZE3N_zDhv8XSkwOlgCLcBGAs/s1600/iOS%2B%25E3%2581%25AE%25E7%2594%25BB%25E5%2583%258F.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1136" data-original-width="640" height="640" src="https://3.bp.blogspot.com/-ogDvVZX7PSI/XCJqAT1WZdI/AAAAAAAAUjw/_ONklrxbdHUQ6-leZE3N_zDhv8XSkwOlgCLcBGAs/s640/iOS%2B%25E3%2581%25AE%25E7%2594%25BB%25E5%2583%258F.png" width="360" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
</div>
<div>
<br /></div>
<div>
あとは「友達から飲み会の誘いを受けた」というシナリオを作り,友達と会話をしてみたいと思います.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-k4MZjlm9cEw/XCJqFRuy6uI/AAAAAAAAUj0/1UZGNHJrIH8jXEKCtCK7RzW_VyhZ8OwzACLcBGAs/s1600/iOS%2B%25E3%2581%25AE%25E7%2594%25BB%25E5%2583%258F%2B%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1136" data-original-width="640" height="640" src="https://2.bp.blogspot.com/-k4MZjlm9cEw/XCJqFRuy6uI/AAAAAAAAUj0/1UZGNHJrIH8jXEKCtCK7RzW_VyhZ8OwzACLcBGAs/s640/iOS%2B%25E3%2581%25AE%25E7%2594%25BB%25E5%2583%258F%2B%25281%2529.png" width="360" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h2>
<span style="font-size: x-large;">・・・はい</span></h2>
<br />
<br />Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-91071532937873097892018-12-25T14:58:00.000+09:002018-12-26T15:37:01.834+09:00Why Serverless? (ShanonAdventCalendar2018・22日目)皆さんこんにちは。シャノンの開発エンジニア輝です。<br />
<br />
AWS の lambda をご存知でしょうか?<br />
<br />
AWS のサービスとして lambda を提供し始めてから、serverless architecture がますます話題になってきました。「AWS lambda はサーバーをプロビジョニングしたり管理する必要なくコードを実行できるコンピューティングサービスです。」という定義になり、最初はNodejs、あとはJava/Pythonなどの言語をサポートするようになりました。 nodejs でコードを書いて、リソースを作って、イベントが飛んでくるときに、予め作っておいたAWS lambda アプリケーションを AWS で実行できます。実行完了になったら、リソースが解放されます。lambda の実行は実行時間(timeout)と最大メモリ消費量の制限があります。なぜこのような制限されたサービスはこんなに人気がありますか?私が把握している限り、理由は3つがあり、1:安い、2:インフラの管理が不要、3:スーパースケール能力 のためです。<br />
<br />
<h3>
lambda を使ってイベント駆動仕組みを実現する</h3>
サーバー・サイドでは、多くの処理はイベントを処理するものです。<br />
<br />
例えば:<br />
・URIに対するリクエスト(ウェブページを開き、ボタンを押す)<br />
・ユーザがログインした時にメールアドレスにメールを送信する<br />
・ユーザがアップロードした画像ファイルのサイズを調整する<br />
・ログファイルに 500 internal error が連続で発生した時に指定したメールアドレスに送信する<br />
・データベースにデータが変更した時に実行する処理<br />
<br />
実際に、イベントを処理する時に、また新しいイベントを発行する場合もあります。システムを設計する場合、データの流れとイベントの流れ、及びそれを処理するプロセスを整理できれば基本設計ができると思います。ウェブシステムでイベント駆動の分散システムを設計する場合、MQをベースにするものが多いです。既存のインフラの上に、イベントを管理・処理するBroker(MQ)とWorker(イベントを処理するプロセス)を追加する必要があります。もし AWS のサービスを使用している場合だと、SQS を Broker として、EC2 を Worker とする仕組みを作成できます。このような仕組みでは、もしイベントの生成するスピードが消化する処理スペードより遥かに速い場合、auto scaling groupを使ってqueueのサイズをscale up / downしたりする必要があります。これは面倒くさいだけではなく、一部のリクエストのDelayに対して特に厳しい場合は、EC2の起動時間が長すぎて向きません。<br />
lambda を使用すれば、このような問題を解決できます。lambda は container の中で実行するため、起動スピードはとても速くて数十ms/数百msで済みます。あと、それがあるイベントでトリガーできるため、異なるコンテキストでも呼び出すことができます。MQ + worker の代わりに SNS(kenisis) + lambda を使って実現できます。<br />
<br />
そのため、サーバー・サイドのイベント処理仕組みは下記のように改造できます:<br />
<br />
・URI に対するリクエスト(ウェブページを開き、ボタンを押す)<br />
API gateway + lambda<br />
・ユーザがログインした時にメールアドレスにメールを送信する<br />
メール送信処理は lambda で実現する<br />
・ユーザがアップロードした画像ファイルのサイズを調整する<br />
S3 の Object Create Event の受けて lambda で画像を処理する<br />
・ログファイルに 500 internal error が連続で発生した時に指定したメールアドレスに送信する<br />
kinesis でログを管理する場合、lambda で kinesis stream を使う<br />
・データベース(例:dynamodb)にデータが変更した時に実行する処理<br />
dynamodb + lambda<br />
<br />
<br />
<h3>
lambda を使ってビッグデータを処理する</h3>
<br />
lambda のオートスケール能力を生かして、大量データの map/reduce を実現できます。ある lambda 関数から別の lambda 関数にデータをアサインできるので、大量の同じ実装のlambda 関数を実行できます。例えば、S3 に過去の一年間に一時間毎に生成したログ・ファイルを保存しています。これらの大量データを(security auditのためとか)集計する場合に、一日分のログ・ファイルを10個の lambda 関数で同時に実行してやれば、数百の lambda 関数を同時に実行して、一分以内で完了できます。もしこの作業を EC2 でやれば色んな設定が必要ですごく面倒な作業になってしまいます。<br />
<br />
<br />
<h3>
A Serverless Framework</h3>
<br />
最後に、1つの Serverless Framework をご紹介します。どうぞお試しください。<br />
https://github.com/serverless/serverlessAnonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-59391480167592284262018-12-23T10:00:00.000+09:002018-12-23T12:29:11.083+09:00お昼休みにもおすすめ!技術部ボードゲームセレクション~2018~(ShanonAdventCalendar2018・23日目)こちらは <a href="https://qiita.com/advent-calendar/2018/shanon" target="_blank">Shanon Advent Calendar 2018</a> の23日目の記事です。<br />
こんにちはtitoです。<br />
<br />
今回はタイトルの通り、技術部内で人気の高かったボードゲームをいくつか紹介したいと思います。<br />
会社のお昼休みなど、短い時間でも楽しめるようなものを紹介しますので、交流を深める為に遊んでみるのも良いかと思います。<br />
<br />
・ペンギンパーティ<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJGDEJsBFVHamUI5WkDByhuJPEOZGmIaGBMIQzykogQEHHpSBkrDhfyYbjMNZhKtqpG5igBU6YNyGHOhJl9t_x0OBEULMMhxtLToV9Qr8dH-Phj8pW3Vz23wCaTnqPJ17fu6RxHaXngbFB/s1600/penguin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJGDEJsBFVHamUI5WkDByhuJPEOZGmIaGBMIQzykogQEHHpSBkrDhfyYbjMNZhKtqpG5igBU6YNyGHOhJl9t_x0OBEULMMhxtLToV9Qr8dH-Phj8pW3Vz23wCaTnqPJ17fu6RxHaXngbFB/s320/penguin.jpg" width="320" /></a></div>
<br />
このゲームは、ペンギンが描かれたカードをみんなでピラミッド状に並べていくゲームです。<br />
最初に配られた手札を全て並べられた人が勝ちなのですが、カードに書かれた色によってカードを並べる事ができたりできなかったりします。<br />
いかに自分の手札のカードが出せる状況が続くように考えてカードを出していく事がミソです。<br />
時には他の人がカードを出せないように邪魔をするようにカードを並べるのも醍醐味のひとつですよ。<br />
比較的ルールが単純なので、説明に時間を取られずにすぐに始められるのも良いところです。<br />
<br />
・クク21<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFnJshohPtYjiYMkJ0Pr5YhIuWguNWYsETq2RFHTGWC93YPWXKBrHeUzAdSrEZCUkkqfDrl0dRHUZ8Hsgi_suw6xImgjoioYA0CuOynOaa5dmDrfUeW7pxZdb1mVaGhrxPbjztQs9Dv6oJ/s1600/cucco21.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFnJshohPtYjiYMkJ0Pr5YhIuWguNWYsETq2RFHTGWC93YPWXKBrHeUzAdSrEZCUkkqfDrl0dRHUZ8Hsgi_suw6xImgjoioYA0CuOynOaa5dmDrfUeW7pxZdb1mVaGhrxPbjztQs9Dv6oJ/s320/cucco21.jpg" width="320" /></a></div>
<br />
1〜21の数字が書かれたカードを1人1枚ずつ配り、一番低い数字を出した人が負けになってしまうゲームです。<br />
ただし、1度だけ隣の人とカードを交換するチャンスがあります。交換する相手が自分より高い数字のカードを持っているのか見極めるのがポイントです。<br />
また、カードには特殊な効果がついている場合があり、交換を求めてきた人を強制で負けにするカードや、全員の交換を好きなタイミングで中断させるカードなどがあったりします。<br />
強制で負けにする効果などを使うには、「汝、滅びよ」などのセリフを言う必要があり、そのセリフをドヤ顔で言ったりするのが個人的にはとても楽しいです。(性格悪い)<br />
<br />
・ペッパー<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4YSaQQuw3goBzmhhZ_mJxA5JFXS_m_zWLcPu_dBJGKqLSuH6qpUDZ3UiiqiYYt5xyT8_oLU5iYB7jHyf6p8VsqOQIS_W41zUTVN2E5M1klirbpMlWjEfHRN0JaXr_uO888MksmZbJ_sT_/s1600/pepper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1200" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4YSaQQuw3goBzmhhZ_mJxA5JFXS_m_zWLcPu_dBJGKqLSuH6qpUDZ3UiiqiYYt5xyT8_oLU5iYB7jHyf6p8VsqOQIS_W41zUTVN2E5M1klirbpMlWjEfHRN0JaXr_uO888MksmZbJ_sT_/s320/pepper.jpg" width="240" /></a></div>
<br />
6色の1〜18の数字が書かれたカード(1のカードはペッパーカードと呼ばれます)を手札として配り、全員が1枚ずつカードを出して、色や数字の大小によってカードを押し付け合うゲームです。<br />
押し付けられたカードは手札とは別の場所に置いておき、最後の得点の計算に使用します。<br />
得点の計算の際、ペッパーカードを持っていた場合、ペッパーカードと同じ色の押し付けられたカードの枚数だけ得点がマイナスされます。<br />
つまり、ペッパーカードをいつ出すのか、というのがとても重要なゲームです。<br />
ペッパーカードを持っていると爆弾をかかえているような急かされる気持ちになりますが、うまく押し付けられた時は気分爽快な、ハラハラドキドキなゲームです。<br />
<br />
いかがでしたでしょうか?<br />
今回紹介したものは、1回遊ぶのに比較的時間が短くて済むゲームばかりなので年末年始で人が集まった際にもおすすめです!<br />
<br />
それでは引き続き <a href="https://qiita.com/advent-calendar/2018/shanon" target="_blank">Shanon Advent Calendar 2018</a> をお楽しみ下さい。titohttp://www.blogger.com/profile/03615703002903704308noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-18379823551147274422018-12-19T10:53:00.001+09:002018-12-19T10:53:07.647+09:00おじさん Product Manager が今後のキャリアパスを考えてみた (ShanonAdventCalendar2018・19日目)<div>
このエントリーは、<a href="https://qiita.com/advent-calendar/2018/shanon" target="_blank">SHANON Advent Calendar 2018</a> の19日目と、<a href="https://qiita.com/advent-calendar/2018/productmanager" target="_blank">Product Manager Advent Calendar 2018</a> の19日目を兼ねた記事です。<br />
<br /></div>
<h2>
はじめに</h2>
<div>
皆さんこんにちは。シャノンでプロダクトマネージャー職を務めております gacky です。</div>
<div>
IT・ネット業界で働くこと20年、今年ついに本厄を迎えてしまった、<span style="font-size: xx-small;">年齢的に</span>シニアなプロダクトマネージャーです。</div>
<div>
<a href="http://shanon-tech.blogspot.jp/2016/12/product-manager-ojisan.html" target="_blank">一昨年</a>、そして<a href="http://shanon-tech.blogspot.jp/2017/12/product-manager-ojisan.html" target="_blank">昨年</a>の投稿に続き、今年もおじさんプロダクトマネージャーの生き残り戦略について考えてみようと思います。</div>
<div>
今年のテーマは「<b>プロダクトマネージャーのキャリアパス</b>」。プロダクトマネージャーの皆さん、製品ロードマップは描けても、自分のロードマップは描けていますか?<br />
<br />
<span style="font-size: x-small;">※おおげさなタイトルですが、所詮はおじさんPdMのポエムなので、あまり実用性は期待しないでください。</span><br />
<br /></div>
<h2>
プロダクトマネージャーの「その先」にあるものとは?</h2>
<div>
現在、プロダクトマネージャーを務めている皆さん。</div>
<div>
そして、これからプロダクトマネージャー職を目指そうとしている皆さんに質問です。</div>
<div>
<br /></div>
<b>「皆さんは将来、プロダクトマネージャー職を経た先、どんな姿になりたいですか?」</b><br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-9A7BYsTBCHo/XBiwiuDELbI/AAAAAAAAAUM/OYIWhb13mT8zT5u0pOib_XZnUP13C9ubgCLcBGAs/s1600/life_wakaremichi_businessman.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="685" height="320" src="https://4.bp.blogspot.com/-9A7BYsTBCHo/XBiwiuDELbI/AAAAAAAAAUM/OYIWhb13mT8zT5u0pOib_XZnUP13C9ubgCLcBGAs/s320/life_wakaremichi_businessman.png" width="274" /></a></div>
<div>
<br /></div>
<div>
まだまだ会社ごとに違いはありますが、日本でもプロダクトマネージャー職の定義や役割に対する共通認識が形成されつつあり、大手 IT・ネット系企業を中心に<a href="https://speakerdeck.com/mizukitanno/pmconf2018-keynote-speech?slide=11" target="_blank">求人も確実に増えています</a>。</div>
<div>
「業界で長年もがき続けた結果、気が付いたらプロダクトマネージャーをやっていた」おじさん世代の汗と涙と苦労をよそに(?)、あちこちから輸入されたフレームワークやスキル群を組み合わせて「知の高速道路」の建設が急速に進んでいます。その結果、プロダクトマネージャーになるための大まかなキャリアパスも、次第に見えてきたような印象があります。</div>
<div>
<br /></div>
<div>
しかし、<b>プロダクトマネージャー職から「先」のキャリアパス</b>を意識している方は、まだ少ないのではないでしょうか。</div>
<div>
<b>プロダクトマネージャー職は、キャリアのゴール地点とは限りません。</b></div>
<div>
まだ歴史が浅い職種であり、周囲はおろか社外でもロールモデルが見つからないのが当たり前。そんな中で、将来自分がプロダクトマネージャーの「先」に進んだ姿をイメージするのは、とても難しいと思います。</div>
<div>
ましてや、担当プロダクトのことを四六時中考え抜き、常に不確実性と向かい合うことを強いられる仕事です。「目の前の担当プロダクトだけでも手一杯なのに、自分のキャリアまで考える余裕なんてないよ!」などと愚痴のひとつもこぼしたくなるでしょう。</div>
<div>
<br /></div>
<div>
でも、「不確かな未来に挑む」という点では、プロダクト開発もキャリアパスも同じ。</div>
<div>
そして、キャリアパスやロールモデルの問題は、業務経験年数が長い世代ほど、より喫緊で切実な課題です。ここはおじさんプロダクトマネージャーたちの頑張りどころです。<br />
<span style="font-size: x-small;">シャノンのプロダクトマネージャー陣はおじさんだらけですし。</span><br />
<br /></div>
<div>
<h2>
このテーマを考えてみようと思ったきっかけ</h2>
<div>
実は、このテーマを考えてみようと思ったのは、11月に開催された <a href="https://2018.pmconf.jp/" target="_blank">Product Manager Conference 2018</a> の参加者アンケートがきっかけです。</div>
<div>
参加者アンケートの中に、こんな設問がありました。
</div>
<div>
<br /></div>
<b>
「尊敬している・目標にしているプロダクトマネージャーについて教えてください」
</b><br />
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-iSnG0D7N76E/XBixDbVrapI/AAAAAAAAAUU/uHB0gjrtkkUFgxWuaFtas2P2K6w0TGp9ACLcBGAs/s1600/pmconf_2018_enq.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="418" data-original-width="672" height="199" src="https://4.bp.blogspot.com/-iSnG0D7N76E/XBixDbVrapI/AAAAAAAAAUU/uHB0gjrtkkUFgxWuaFtas2P2K6w0TGp9ACLcBGAs/s320/pmconf_2018_enq.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">個人的に結構しびれたアンケート設問</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
日本のプロダクトマネージャー界において、みんなが尊敬し、目標とするような「スター選手」って、誰でしょうか?
</div>
<div>
また、プロダクト名とのセットで世に広く知られているプロダクトマネージャーって、誰でしょうか?</div>
<div>
<b>私は結局「コレだ!」という回答を思いつくことができませんでした。</b></div>
<div>
<br /></div>
<div>
例えば、みんなが名前を挙げるであろう及川さん。プロダクトマネージャーの必要性を説くエバンジェリストとして大活躍され、私も心から尊敬しておりますが、プロダクトマネージャーの枠に括ってしまうことが憚られる「雲の上の存在」。もはや完全に別格です。</div>
<div>
また、プロダクトマネージャー界で知られた人物の名前はいくつか挙げられますが、どちらかといえば監督やコーチのような印象で、スター選手 (=プレーヤー) のイメージとはちょっと違う気がするんです。</div>
<span style="font-size: x-small;">※実際にはプレーヤーとしても活躍されていると思うんですが、社外からだとイメージしにくいですよね</span><br />
<div>
<br /></div>
<div>
目標となる人物像がはっきりしていれば、現状 (As-Is) と理想像 (To-Be) のギャップは明らかにしやすくなるので、目標に至るまでのロードマップを描きやすくなります。</div>
<div>
しかし、目標とする人物がはっきりしないと、理想像との間に横たわるギャップも不明瞭になりますから、自分の今後の成長ロードマップを描きにくくなるのは当たり前。</div>
<div>
もし、私に限らず、<b>多くのプロダクトマネージャーたちが今後のキャリアパスの不確実性に悩んでいるようであれば、それは憂慮すべきこと</b>ではないでしょうか?</div>
<div>
</div>
</div>
<div>
<br /></div>
<div>
<h2>
3つのキャリアパスを勝手に提案してみる</h2>
<div>
ゴールから逆算するという手法が使えないのであれば、仮説に基づいていくつかの道筋を引き、実際に試してみるしかありません。</div>
<div>
現在のプロダクトマネージャーたちがこれから通る「けもの道」のいくつかが、次第にキャリアパスとして認知され、将来のプロダクトマネージャーたちが通る道になっていくのでしょう。</div>
<div>
そして<b>「けもの道」を開拓していくのは、おじさん世代の果たすべき義務</b>でしょう。<br />
<span style="font-size: x-small;">※自分がその義務を果たせるかどうかは相当怪しいですが...</span></div>
<div>
<br /></div>
<div>
まずは個人的な経験に基づき、プロダクトマネージャーのキャリアパス案として、以下の3つを勝手かつテキトーに提案してみたいと思います。<br />
<br /></div>
<h3>
その1. 出世の道</h3>
<div>
エンジニアの場合、最近は以下のようなキャリアパスをよく見かけます。</div>
<div>
<ul>
<li>技術寄り : <b>Tech Lead</b> → <b>Chief Architect</b> → <b>CTO</b></li>
<li>組織寄り : <b>Engineering Manager</b> → <b>VP of Engineering</b> → <b>CTO</b></li>
</ul>
</div>
<div>
これに倣うと、以下のようなキャリアパスが描けると思います。</div>
<div>
<ul>
<li><b>Product Manager</b> → <b>VP of Product</b> → <b>CPO (Chief Product Officer)</b></li>
</ul>
</div>
<div>
<br /></div>
<div>
CTO や VPoE とともにプロダクト開発組織の「三役」を担う VPoP は、プロダクトマネージャーの上位職種と考えて差し支えないでしょう。また、会社によっては、さらに上位の CPO 役を置くことがあるかもしれません。海外の大手 IT 系企業を見ても、だいたいこんな感じの職階が組まれているように感じます。</div>
<div>
これらの職種へのステップアップは比較的自然で、特に大きな組織体においては、プロダクトマネージャー職の経験者が歩む「王道」となるかもしれません。</div>
<div>
<span style="font-size: x-small;">※Head of Product や Director of Product Management, Group Product Manager などの肩書きも、類似職種と考えてよい...ですかね?</span><br />
<br /></div>
<h3>
その2. 事業への道</h3>
<div>
プロダクトマネージャーの仕事を続けていると、プロダクト開発を超えた周辺領域まで手がけたくなる (or 自ら手がけざるを得なくなる) 機会に遭遇することがあります。</div>
<div>
その結果、製品を包含するサービス全体のマネージャーに変わっていくケースが考えられます。</div>
<div>
さらに、担当製品やサービスの売上・収益まで見るようになれば、事業部長のような事業責任者への道につながっていくでしょう。</div>
<div>
<ul>
<li><b>Product Manager</b> → <b>Service Manager</b> → <b>事業部長</b> → <b>事業担当執行役</b></li>
</ul>
</div>
<div>
また、プロダクトマネージャーが持つ製品アイデアや解くべき課題が社内で解決できない場合は、<b>独立起業</b>という道も考えられます。</div>
<div>
もともとプロダクトマネージャーは "mini-CEO" と評される職種ですし、スタートアップの CEO はほぼ例外なくプロダクトマネージャーとしての機能を兼ねます。よって、<b>プロダクトマネージャー経験者が「自分の製品」を作るために起業するのは、極めて自然</b>な流れだと思います。</div>
<div>
今後、プロダクトマネージャー職の経験者が増えれば、スタートアップ予備軍が増えていくのかもしれませんし、プロダクトマネージャー職出身の有名起業家が増えれば、将来の起業を目指す層がプロダクトマネージャー職を志望するようになるかもしれません。<br />
<br /></div>
<h3>
その3. 職人への道</h3>
<div>
ITエンジニアの世界には、周囲から "Geek" と評される職人・達人たちがいます。彼らは、ある特定分野において卓越した知識と技術を有し、周囲から尊敬を集める存在です。</div>
<div>
ならば、<b>プロダクトマネージャーにも "Geek" に相当するような職人・達人がいてもよい</b>はずです。</div>
<div>
また、プロダクトマネージャーたちの中には、「プロダクトを作り出し、ユーザーに価値を届ける」という行為自体に喜びを感じ、金銭的な報酬よりは愛と好奇心によってドライブされる層が存在します。彼らもまた、プロダクトマネージャーをキャリアの通過点とせず、「愛されるプロダクト」を作り続けることにこだわる、一種の職人・達人 (あるいは修行僧?) なのだと思います。</div>
<div>
モチベーションの源泉は様々ですが、そんな職人・達人 (・修行僧) たちのことを、ここでは敬意を込めて <b>"Product Guy"</b> (仮) と呼びたいと思います。</div>
<div>
<br /></div>
<div>
いずれ、こうした "Product Guy" たちの中から、活躍の場を変えながら様々なプロダクトを世に送り出し続ける <b>"Rock Star" 的なプロダクトマネージャー</b>が出現するかもしれません。</div>
<div>
今後、日本のプロダクトマネージャー界が "Rock Star" を多数輩出できれば、先述のアンケートでも様々な人物名が挙がるようになるでしょう。<br />
<br /></div>
<h3>
他にはないの?</h3>
<div>
実はこれ以外に「<b>4. 出戻りの道</b>」と題して、プロダクトマネージャーになる前の職種に戻って専門性を発揮するキャリアパスもありえるかな~と思ったのですが、</div>
<div>
<ul>
<li>一度プロダクトマネージャー職を経験してから、元の職種に戻りたいというモチベーションは働くか?</li>
<li>元の職種に戻ったとき、プロダクトマネージャー職での経験は活きるのか?</li>
</ul>
</div>
<div>
という2点がイマイチしっくりこなかったので、いったん候補からは外しました。</div>
<div>
それでも、「やっぱりコード書きたい」とか「やっぱりUX突き詰めたい」とか「やっぱりグロースハック極めたい」という選択肢があってもいいんじゃね?...というのが私の意見です。</div>
</div>
<div>
これまでの経験からざっくり考えた3案ですので、まだ他にあるかもしれません。<br />
<br /></div>
<div>
<h2>
さて、自分はどの道を進む?</h2>
<div>
海外のプロダクトマネージャーたちは、いくつもの会社を渡り歩きながらプロダクトを手がけたり、自分のプロダクトで独立起業するほか、プロダクトマネジメント界隈のエバンジェリストやコンサルタントに転じる方も多いようです。</div>
<div>
私の周囲のプロダクトマネージャー経験者は、大きな組織で事業責任者や製品開発責任者に転じるケースが多く、独立起業に至るケースはごくわずかです。</div>
<div>
そして私の場合、スタートアップで働いた経験が何度もある関係で、昔の仲間からは絶えず「起業しないの?」と聞かれます。でも、私はあまり頭がよくないので、今のところ「人生を賭けてでも解きたいほどの課題」を見つけられていません。</div>
<div>
まだしばらくの間は、愛と好奇心を原動力に、人々から愛されるかもしれないプロダクトを作り続ける <b>"Product Guy" を目指して精進を続けたい</b>と思います。</div>
<div>
<br /></div>
<div>
皆さんはこれから、どんなキャリアパスを歩みたいですか?</div>
<div>
年末年始の機会を利用して、ぜひ考えてみてください。</div>
<div>
<br />
<br />
<br />
<br />
<br />
<br /></div>
<div>
</div>
</div>
<div>
<br />
<h2>
おまけ:愛で測ろう</h2>
<div>
そういえば、<a href="https://2018.pmconf.jp/" target="_blank">Product Manager Conference 2018</a> のテーマは「<b>愛されるプロダクトを創ろう</b>」でした。</div>
<div>
皆さんが担当しているプロダクトには、いろんな KPI が設定されていると思います。<br />
新規顧客獲得数、DAU や MAU、継続率、売上、利益...。</div>
<div>
でも、「愛」はどうでしょうか?</div>
<div>
ユーザーから、社内・関係者から、あなたのプロダクトは愛されていますか?</div>
<div>
そして何よりも、あなた自身がプロダクトと、その先にいる人々を愛していますか?</div>
<div>
<br /></div>
<div>
ちょうど年末ですし、ミュージカル「RENT」の名曲 "Seasons of Love" に乗せて結びたいと思います。</div>
<div>
<b><i><span style="font-family: inherit;">"Measure Your Product in Love."</span></i></b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/tGdyBLWO-Sw/0.jpg" src="https://www.youtube.com/embed/tGdyBLWO-Sw?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
<br /></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-22861641581911320772018-12-18T19:18:00.000+09:002018-12-18T19:18:39.833+09:00BtoB SaaS を支える人を支える〜地味だけど大切なプロダクトマネジメントの役割〜<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="color: #999999;"><span style="background-color: white; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">※ この記事は <a href="https://qiita.com/advent-calendar/2018/shanon" target="_blank">Shanon Advent Calendar 2018</a> の 18日目の記事です</span></span><br /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">こんにちは。シャノンに複数人いる、おじさんプロダクトマネージャーのひとり、 chappie です。おじさんですが、プロダクトマネージャーとしてはまだへっぽこの半人前です。がんばります。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">そろそろ2018年も終わりということで私自身をふりかえってみると、今年はどちらかというと過去にリリースしたサービスの運用面を強化するための取り組みが主な仕事でした。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">そういえば、プロダクトマネジメントに関する情報やブログ記事などは年々増えてきている印象がありますが、「どんなプロダクトをどう作るか(企画・開発からリリースまで)」については語られることが多い一方、「作ったプロダクトをどのように提供するか(リリース以降の運用から改善)」という運用面については比較的情報が少ないような気がします。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">今回は、プロダクトそのものからは一歩ひいて、BtoB SaaS プロダクトを支える人たちのためにプロダクトマネージャーができることについて少し整理してみようと思います。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br /><br />
<h3>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"><span style="font-size: large;">サービス体制</span></span></h3>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">BtoB サービスの購買フローは、一般的に BtoC の場合よりと比較して長期化しやすい傾向があり、またその過程でサービス提供を支える人も多くいます。<a href="http://shanon-tech.blogspot.com/2016/12/shanonadventcalendar2016-11.html" target="_blank">以前書いた記事</a> </span><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">ではただ漠然と「様々なステークホルダーがいる」と書いていましたが、もう少し具体的にそれぞれの関係者に対してプロダクトマネジメントの立場から何ができるか記述してみます。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">顧客のサービス購入から利用までのフェーズを「プリセールス」「オンボーディング」「ポストセールス」と分けると、それぞれのフェーズで中心となる部門が存在します。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><a href="https://3.bp.blogspot.com/-V3Ru0Kg7r1M/XBjC0xjnkdI/AAAAAAAAFic/0qFk0SSrpCoOv8b4bPDxpgNF9rwCnb98QCEwYBhgL/s1600/serviceprovidingorg_cut.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="641" data-original-width="729" height="561" src="https://3.bp.blogspot.com/-V3Ru0Kg7r1M/XBjC0xjnkdI/AAAAAAAAFic/0qFk0SSrpCoOv8b4bPDxpgNF9rwCnb98QCEwYBhgL/s640/serviceprovidingorg_cut.png" width="640" /></a><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・<u>プリセールス</u>のフェーズでは<b>新規担当の営業</b>や、<b>外部のセールスパートナー</b>が販売活動を行い受注を獲得します。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・<u>オンボーディング</u>では<b>導入担当</b>や外部の<b>導入パートナー</b>が、初期設定や必要な周辺ソリューションの構築を実施し、顧客がサービスを利用できるようにします。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・<u>ポストセールス</u>では<b>サポート</b>部門や<b>既存顧客担当の営業</b>が、問い合わせに対応したりアップデート情報を提供したり、顧客ニーズの発展に応じてアップセルを提案したりします。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">さらに、これらの顧客と直接対話する部門の後方支援として、以下のような役割が存在します。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・<b>経理</b>が受注チェックや契約管理を行います</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・<b>製品運用</b>が、機能やサービスのアクティベーションなどを行います</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・<b>機能担当</b>や<b>開発会社</b>が、問い合わせ対応やログ調査、不具合修正などを行います</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br />プロダクトマネジャーはさらに<br /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><h3>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"><span style="font-size: large;">各ステークホルダーに対する支援</span></span></h3>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">このような役割分担から、 BtoB ビジネスではプロダクトマネージャーが直接顧客との接点を持ちにくい反面、各フェーズ・各部門に対して支援を行うことで、間接的に顧客へ価値を届けられるようにする必要があります。</span><br />
<br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" />
<h4>
<span style="background-color: white; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"><span style="color: #666666;">プリセールス=販売・新規営業を支える</span></span></h4>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・サービスや機能の利用イメージや効果、メリットが分かりやすいようにしておく</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・利用に必要な条件・制限事項やプロセスが分かりやすいようにしておく</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・デモ環境を整備しておく</span><br />
・申込手続きを整備しておく<br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br />
<h4>
<span style="background-color: white; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"><span style="color: #666666;">オンボーディング=導入を支える</span></span></h4>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・機能のアクティベーションフローを整備しておく</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・他社サービスの仕入れが必要な場合はその手続きを明確にしておく</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・導入時のトラブルシュートやFAQをまとめる</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・導入開始時の社内手続きや必要な申請・期間などを明確にしておく</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・導入時に知っておくべき技術的詳細情報や制限事項を明確にしておく</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><h4>
<span style="background-color: white; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"><span style="color: #666666;">ポストセールス=運用・継続利用を支える</span></span></h4>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・運用中のトラブルシュートやFAQをまとめる</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・問い合わせ対応のフローや役割を整理しておく</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・問題が起きた場合の調査方法や各種ログの見方などをまとめる</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・機能の裏のアーキテクチャや仕組みを説明しておく</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">・開発会社(委託先)が対応できるように保守契約を手配する</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><h3>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"><span style="font-size: large;">人的サービスも含めてプロダクトの価値を届ける</span></span></h3>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">このように、 BtoB SaaS では 営業・導入・サポートなどの人的サービスも含めて「プロダクト」であると言えます。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">プロダクト自体の機能や UI を改善して顧客価値を高めることができればベストですが、それには当然大きな開発コストがかかります。 BtoB の世界では特に、顧客のやりたいことが何かしらの方法でできるようになっていることが、実際に購入&継続利用してもらえるかどうかに大きく影響します。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">機能の至らない点も含めて、各部門のメンバーにきちんと情報提供できていれば、彼/彼女らも自分たちのミッションやポリシーに則って、最大限の価値を顧客に届けるように努めてくれます。それは単にプロダクトの欠点を埋めあわせてもらうというだけではなく、各部門のメンバーによる付加価値も含めてプロダクト全体の価値を最大化する、と考えることができます。(もちろん、多大な人的コストを発生させたり、事故につながるようなミスを誘発したりするような仕様などは製品として撲滅しておく必要がありますが)</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">近年、 SaaS ビジネスにおけるカスタマーサクセスの重要性についての認識が広まると同時に、オンボーディングから定着までのフェーズの重要性や、継続利用およびアップセルによる顧客あたりの LTV (Life Time Value)をいかに高めるか、という観点が特に重要視されるようになっています。単に買ってもらって終わり、ではなく、あらゆるタッチポイントが価値を生む源泉となります。</span><br />
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">特に顧客単価の高い場合は、ハイタッチ=人的リソースを多く割いて顧客フォローにあたる割合が多くなります。</span><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">そこに関わる人達をサポートすることが、顧客の成功につながると信じて、マニュアル作成や社内フローの整備などの地味な仕事であっても、着実に実施していくことがプロダクトマネージャーとして自覚しておくべき大事な仕事のひとつかなと思う今日このごろです。</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">皆さんの力を最大限活かしながら顧客に価値を届けられるよう、今後も精進したいと思います。</span>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-28764440315791815032018-12-16T14:50:00.000+09:002018-12-16T14:50:23.207+09:0012月25日って誰の誕生日だっけ? という貴方におすすめする重力の祭ShanonAdventCalendar2018 ・16日目の記事をお届けします。<br />
<br />
16日目ということで12月25日もずいぶん近づいてきましたね。<br />
ところで多くの人は12月25日はクリスマスを祝うことにしていると思いますが、その同じ日に別のことを祝っている人がいることはご存知でしょうか。<br />
彼の名前は<span style="background-color: white; color: #222222; font-family: sans-serif; font-size: 15.104px;">Richard Matthew Stallman</span>。頭文字をとってRMSと呼ばれる彼は、12月25日には「grav-mass」のお祝いをすることを提唱しています。<br />
<br />
クリスマスだとイエス・キリストの生誕を祝うことになりますが、grav-mass は12月25日がニュートンの誕生日であることに因んでいて、物理法則の存在を祝う行事です。<br />
お祝いの仕方の詳細はこちらをご覧ください。<br />
<blockquote class="tr_bq">
( <a href="https://stallman.org/grav-mass.html">https://stallman.org/grav-mass.html</a> )<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-3j7kTppjlv4/XBXbGCpMjlI/AAAAAAAAVYI/OugWojbC1iEuGPFUiYwZ_azwJMqBDwh2ACLcBGAs/s1600/grav-mass.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="450" height="320" src="https://4.bp.blogspot.com/-3j7kTppjlv4/XBXbGCpMjlI/AAAAAAAAVYI/OugWojbC1iEuGPFUiYwZ_azwJMqBDwh2ACLcBGAs/s320/grav-mass.png" width="240" /></a> </div>
<br />
grav-massを祝う方法は、リンゴなどの果物でツリーを飾りつけることです。ただその際に、あまりしっかりと木に果物をとめないようにしておいて、時々それらの果物が落ちてしまうようにしましょう。危険がないように、飾り付けの位置は2フィート以下にします。こうした飾り付けをすることで子どもたちが物理的な世界を科学的に学ぶプロセスに触れることができるでしょう。<br />
<br />
別の方法として、ボールや果物などを自分の周りに放り投げることでもgrav-massを祝うことができます。<br />
<br />
何人かでのお祝いの時は、 科学的な知識と理解についてお互いに話したり、どのような試みによって世界の未解決の問題に答えられるか話し合うことが、grav-massのお祝いになります。</blockquote>
<br />
簡単に祝うだけであれば、とりあえず何らかのものを落下させるだけでできるので、興味のある方は身近なものでお祝いされてはいかがでしょうか。<br />
<br />
<br />
さて、RMSはコピーレフトの推進者で、フリーソフトウェアライセンスのGPLを作った人物としても有名です。<br />
<br />
ここでは詳解しませんが、GPLは配布されるソフトウェアが、利用・改変・再頒布ができることを保証するライセンス形態で、またいわゆるコピーレフトのライセンスでもあるため、例えばGPLで配布されているライブラリを組み込んで新しいソフトウェアを作成したら、その新しいソフトウェア自体もGPLを継承して配布しなくてはいけません。<br />
つまり、商用のソフトウェアにGPLのライブラリを含んでしまうと、作成したソフトウェアのバイナリだけをコピーして販売するというビジネス(=要は普通のパッケージソフトウェアの販売)はやりづらくなってしまいます。<br />
自分も以前パッケージソフトの開発に携わっていた時に、GPLというととにかく仕事で使えないので、要注意の配布形態として認識しているところがありました。<br />
<br />
とはいえ、パッケージソフトの販売業者という限られた視点で見てしまうとGPLの悪い面ばかりしか見えません。<br />
一方でコピーレフトであるGPLが適用されているソフトウェアは、それがどれだけ改変されて利用者が増えていったとしても、ずっと万人にとって公開された(コードが読める状態にされた)ままで居続けることができます。ソースコードが公開されているということは、誰もがそこから学べて、利用できて、その正しさの検証ができるということでもあります。<br />
<br />
RMSのWebサイトのホームページ ( <a href="https://www.stallman.org/">https://www.stallman.org/</a> ) には、彼が使わないようにしているWebサービスのリストがあるのですが、ほとんどの人が日常的に使用しているようなWebサービスがそこには列挙されていますから、はっきりいってRMSは一般的な「ITを使いこなしている人」の像からはズレているでしょう。<br />
間違っているのが彼のほうか私たちのほうかの簡単に結論を出すことはできませんが、知識が万人に公開されていて、検証可能であることをとても大切にするRMSの姿勢には共感できるところがあると思います。<br />
<br />
RMSがgrav-massで祝っていることは重力そのものではなくて、その物理法則が万人に適用されていて公開されていて検証可能であること自体です。<br />
前述した彼が提案するgrav-massの祝い方を見ると、それがよく伝わって来るように思います。<br />
<br />
最後にRMSが grav-mass を祝っている動画がありますので、リンクを載せておきます。<br />
<a href="https://stallman.org/video/rms_merry_grav-mass.ogv">https://stallman.org/video/rms_merry_grav-mass.ogv</a><br />
<br />
皆様がうまく重力法則の検証ができるようにお祈りしています。<br />
Merry Grav-Mass.<br />
<br />Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-83660591680277027032018-12-16T11:54:00.000+09:002018-12-22T10:15:12.372+09:00Hello, WorldMap! ~GoogleMapAPIにふれたよ~<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
こんにちは。新卒3年目でインフラエンジニアのsawakです。<br />
もう日付変わっていますが、12/15は古代ローマの暴帝ネロの誕生日だそうです。<strike>FGOじゃないよ</strike><br />
1世紀の人間の誕生日がちゃんと記録残ってるんでしょうか。<br />
<br />
この記事は <span style="background-color: white; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica neue" , "hiragino kaku gothic pron" , , "meiryo" , sans-serif;"><a href="https://qiita.com/advent-calendar/2018/shanon">Shanon Advent Calendar 2018</a> </span><span style="font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica neue" , "hiragino kaku gothic pron" , , "meiryo" , sans-serif;">の15日目の記事です。</span><br />
<br />
私は旅行が趣味で、今年は3回海外旅行してしまったのでかなりの金欠です。<br />
もやし料理が得意になるほどの金欠です。<br />
それでも旅行がしたくて、愛用のロードバイクで自宅から安く行ける旅行先を模索して<br />
Googleマップと数時間にらめっこしている時もあります。<br />
<br />
ということで今回はGoogleMapのAPIで少しだけ遊んでみたいと思います。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-189UP_CqHeI/XBVeZZAcoAI/AAAAAAAAGpc/WvCgDHsQujYxy1N0PZ3GkbgIvGQSJ13BgCLcBGAs/s1600/unnamed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="96" data-original-width="96" height="200" src="https://2.bp.blogspot.com/-189UP_CqHeI/XBVeZZAcoAI/AAAAAAAAGpc/WvCgDHsQujYxy1N0PZ3GkbgIvGQSJ13BgCLcBGAs/s200/unnamed.png" width="200" /></a></div>
<br />
GoogleMap、APIが使えます。<br />
そのほかGoogleの様々な機能のAPIが200種類以上公開されています。<br />
Google翻訳とかカスタム検索とかYoutube関連とか使ったら面白そうです。<br />
<br />
Googleアカウントを持っていれば、利用開始まではかなりサクサクです。<br />
<a href="https://cloud.google.com/maps-platform/">https://cloud.google.com/maps-platform/</a><br />
<br />
画面に従って、<br />
使いたい機能を選択(例えばMapsなら、地図・ストリートビューなど関連APIが一括有効化される)-><br />
GCPのプロジェクトを作成-><br />
請求情報の登録(300ドルの無料枠がありますが、後で請求アラートやAPIコール制限を設定しておきましょう)<br />
ここまでするとAPIキーが発行されるので、<br />
<br />
<pre br="" class="prettyprint"><!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Hello, Worldmap!</p>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.643925, lng: 139.743576},
zoom: 18
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<b>YOUR_APIKEY</b>&callback=initMap"
async defer></script>
</body>
</html>
</pre>
<br />
↑のように呼び出します。<br />
(APIはGoogleだけどWebサーバはAWSだよゴメンネ)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-G9_53d9KVc0/XBVM_86UYPI/AAAAAAAAGog/S2KZC-acrc0xTUSw0YuYdjPQDwSlsNE8QCLcBGAs/s1600/map.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="937" data-original-width="898" src="https://1.bp.blogspot.com/-G9_53d9KVc0/XBVM_86UYPI/AAAAAAAAGog/S2KZC-acrc0xTUSw0YuYdjPQDwSlsNE8QCLcBGAs/s1600/map.PNG" /></a></div>
<br />
弊社が表示されます。<br />
ってどれなんだ。。例の赤いピンは立たないのか。。。<br />
調べたところちゃんと出せました。(カスタムピンも作れるようです)<br />
scriptをちょいとこうして、、、<br />
<br />
<pre br="" class="prettyprint"> <script>
var map;
var marker;
var myLatLng = {
lat: 35.643925,
lng: 139.743576
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 18
});
marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello my pin!'
});
}
</script></pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-n3cXydxstYs/XBVReBXvt9I/AAAAAAAAGo0/yHMPUNewyAoBwkNG39HBqRGhee1hTHfPgCLcBGAs/s1600/pin.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="353" data-original-width="410" src="https://1.bp.blogspot.com/-n3cXydxstYs/XBVReBXvt9I/AAAAAAAAGo0/yHMPUNewyAoBwkNG39HBqRGhee1hTHfPgCLcBGAs/s1600/pin.PNG" /></a></div>
<br />
こうじゃ!<br />
centerで座標を指定し、zoomでズームレベルを指定します。<br />
見たところ0~22までで、大きいほど拡大します。<br />
1つの建物を指定するなら17~19くらいがよさそうです。<br />
任意の地点の地図をとりあえず出す、ということは簡単に出来そうですね。<br />
<br />
使ったAPIキーですが、発行直後は全然制限がかかっていませんので、<br />
ドメイン、IPなどで制限をかけておきましょう。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-IyIJ5uJ_0dY/XBVVX4USUlI/AAAAAAAAGpI/WrbmBNRftp8dJRMFo9YUyWsMzF4G_25CACLcBGAs/s1600/apikey.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="412" data-original-width="663" src="https://2.bp.blogspot.com/-IyIJ5uJ_0dY/XBVVX4USUlI/AAAAAAAAGpI/WrbmBNRftp8dJRMFo9YUyWsMzF4G_25CACLcBGAs/s1600/apikey.PNG" /></a></div>
<br />
もう少し遊びたかったですが、今日はこのくらいにさせていただきます。<br />
応用として、<br />
「一連の事件は、全てこの場所から5km地点で起きていたんです!」的な遊びが出来そうかなと思います。<br />
数学的に、座標を3つ渡すと一意な円が描けた気がするので、その中心を求める感じです。<br />
難事件の解決に一役買ってくれるはずです。<br />
<br />
逆に自宅を中心として、任意の半径の同心円を描ければ、<br />
例えば「片道10kmで行ける場所」のマップが出来るので、サイクリングコースの選定に役立ちそうです。それやればよかった。。<br />
<br />
それでは、残り2週間となった2018年、健康にお過ごしください。<br />
<br />
sawakAnonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-53794652154476171572018-12-11T09:37:00.002+09:002018-12-11T12:53:48.409+09:00OOUI から考えるオブジェクト指向とタスク指向(ShanonAdventCalendar2018・10日目)<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
この記事は <a href="https://qiita.com/advent-calendar/2018/shanon" target="_blank">ShanonAdventCalendar2018</a>・10日目の記事です<br />
<div>
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGmgGXL8VuJSEpEchP889Mn1KC3JyubmaPWWsfPzjdQeDaL9JLyUgko2mA4kcXi3qRZgPEX9nqPmqjQgUZoxza2_m0Lc3x8kvZSvo1pZF5OjkQqkaefe7Re2BvD39O1yJDlDF0MD5e5f7/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="521" data-original-width="1000" height="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGmgGXL8VuJSEpEchP889Mn1KC3JyubmaPWWsfPzjdQeDaL9JLyUgko2mA4kcXi3qRZgPEX9nqPmqjQgUZoxza2_m0Lc3x8kvZSvo1pZF5OjkQqkaefe7Re2BvD39O1yJDlDF0MD5e5f7/s640/1.png" width="640" /></a></div>
<br />
<h2>
OOUI</h2>
こんにちは。ueharak です。最近、OOUI という言葉をよく耳にします。<br />
OOUI とは Object Oriented User Interface のことで、オブジェクト指向UI とも言います。エンジニアはこれを聞いて OOP、オブジェクト指向プログラミングを連想すると思いますが、インスタンス化されたエンティティが実体を持って目の前に現れたものと考えればこれらは表裏一体でもあるわけで、昨今の GUI プログラミングの多くは OOP による OOUI とも言えます。<br />
<br />
<h2>
タスク指向の業務システム</h2>
とは言え、OOP で作っても "OO" にならないものもあります。特に業務システムに顕著ですが、その原因をソシオメディアの上野学さんは「業務分析」によるタスクの洗い出しが要件定義として先行してしまうことが一因であると指摘( <a href="https://www.sociomedia.co.jp/7279">https://www.sociomedia.co.jp/7279</a> )しています。顧客の業務をそのままシステムに落とし込んだ結果、業務のメニューが一列に並んでしまうというわけです。私も思い当たるフシがありますが、この種のシステムはメニューを行ったり来たりして仕事することになります。これはタスク指向と呼ばれ、誰でも再現性の高い仕事ができる利点があります。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZO2GSXyi3Lmh6ZkbUBGgh3tI37uIZeu42Ldy1FXQ2WL1llvtK7BxTsj_qiyo9W7pR8aR8zayqsrGowjxETBpHZZAzxBJEbB3b1bZhFpa6rE_ttBrearZgwCw9Ef5H6MQJqbKIAZ_lZLsF/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br class="Apple-interchange-newline" /><img border="0" data-original-height="754" data-original-width="433" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZO2GSXyi3Lmh6ZkbUBGgh3tI37uIZeu42Ldy1FXQ2WL1llvtK7BxTsj_qiyo9W7pR8aR8zayqsrGowjxETBpHZZAzxBJEbB3b1bZhFpa6rE_ttBrearZgwCw9Ef5H6MQJqbKIAZ_lZLsF/s400/2.png" width="228" /></a></div>
<div style="text-align: center;">
(一列に並んだメニューの例)</div>
<div style="text-align: center;">
<br /></div>
<h2>
CUI とタスク指向</h2>
業務システムがタスク指向になる原因は先に挙げた業務分析だけでなく、CUI の影響も大きいと私は考えます。CUI はコマンドの集まりで、パイプやリダイレクションにより大きな仕事を表現できます。この概念をもとに業務をコマンドに分解し、順番に繋いでシステムを構築するとタスク指向になるわけです。バッチはまさに業務コマンドの連続です。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOip52DR7mGDifpfNthYPGIptdxxLwc7V01G-cmvyT5TGdZXcIgzs0TR3NgPJPMTkBD6_4kW9BBGHauQeaJ9T1e8LJ8-R9od6BR8dDASZanyCKWf_9wcY09oIo46GkNU_8zBa3h_iYmjl_/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="167" data-original-width="1000" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOip52DR7mGDifpfNthYPGIptdxxLwc7V01G-cmvyT5TGdZXcIgzs0TR3NgPJPMTkBD6_4kW9BBGHauQeaJ9T1e8LJ8-R9od6BR8dDASZanyCKWf_9wcY09oIo46GkNU_8zBa3h_iYmjl_/s640/3.png" width="640" /></a></div>
<div style="text-align: center;">
(シーケンシャルなタスクの例)</div>
<br />
<h2>
アプリ->データ</h2>
コマンドは動詞が名詞を指定する構造になっています。例えばアプリがファイルを開く場合、次のようになります。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0TJiTfR18wBXClV74WDBbP6mHMm618CivoiPYAvTzhp8qeCHspqjzZ-i-LcHO7ooKN3FQ7xMmwB91exh_ucddQgLM29kjMJbG-y0DicubOG_1CI-fPjOHbeQwPlsRaUkXBBuV-QVOAFj/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="80" data-original-width="388" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0TJiTfR18wBXClV74WDBbP6mHMm618CivoiPYAvTzhp8qeCHspqjzZ-i-LcHO7ooKN3FQ7xMmwB91exh_ucddQgLM29kjMJbG-y0DicubOG_1CI-fPjOHbeQwPlsRaUkXBBuV-QVOAFj/s400/4.png" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
最初にアプリを決めて、それが扱うデータを指定します。<br />
<br />
<h2>
データ->アプリ</h2>
一方オブジェクト指向はデータが主体となって処理を決定します。これは GUI で次のように表されます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFp8C5J2YKtSWe1ecczT0qaIWDe5ppBkZ6DowCkSZy6WqSaBINUUQF61dh3xHYOeAzyKlmMHzaUYjH3wgeTMXZBBsowoXUkBk2TAeJ0Uo6eibd2bs81dQgafxR8MaVFB2lRp0AfGTsfn7W/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="676" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFp8C5J2YKtSWe1ecczT0qaIWDe5ppBkZ6DowCkSZy6WqSaBINUUQF61dh3xHYOeAzyKlmMHzaUYjH3wgeTMXZBBsowoXUkBk2TAeJ0Uo6eibd2bs81dQgafxR8MaVFB2lRp0AfGTsfn7W/s400/5.png" width="300" /></a></div>
<div style="text-align: center;">
<br /></div>
コマンドとは逆で、まずデータ(オブジェクト)が先に来ます。データを選んだのち、そのデータで何をするのかを指示します。<br />
<br />
<h2>
デスクトップは OOUI</h2>
上記の画像をご覧の通り、オブジェクト指向 UI とデスクトップのメタファーは親和性が高いと言えます。文面を選んで印刷したりメールしたりといった所作は、いずれもデータが主体となるものです。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYUUAHpWqdixkrPb-YBWUAN189y1_tZMn51a08EgAYLSDNAk_7ft9SligqkAvBpY5Z22MfjJBgN0QD-Xdz_14qe3xVxTwf0Of5tMM4MZoh1i3N5Qwg-8esRw2Iunf6XPgfyfmMjnBnehe/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="740" data-original-width="1000" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYUUAHpWqdixkrPb-YBWUAN189y1_tZMn51a08EgAYLSDNAk_7ft9SligqkAvBpY5Z22MfjJBgN0QD-Xdz_14qe3xVxTwf0Of5tMM4MZoh1i3N5Qwg-8esRw2Iunf6XPgfyfmMjnBnehe/s400/6.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
スマホはタスク指向</h2>
スマホは基本的にファイルの存在を隠蔽することで世界をシンプルに保とうとしてきました。その結果、メッセージを送信したいと思った時、その手段をメールにするかSMSにするか事前に決めなければなりません。これはまさにタスク指向で、ホームからそれぞれのアプリ(メニュー)へ行ったり来たりする構造です。データはアプリで分断され、似たような機能は再発明され、体験はアプリの中で閉じています。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RuWYfe_AN9VQB3nV9AMwrDy05qW8yaAdxkN2hBnkCtzRJdKOmPZypTWVwmpvgoXXUJuq9y-jodaMHjezEfqouWewos2ziPlwPXO_e0aesJQsj_BXAoBlUze-WtToZqemXWOifMhKfOSR/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="192" data-original-width="348" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RuWYfe_AN9VQB3nV9AMwrDy05qW8yaAdxkN2hBnkCtzRJdKOmPZypTWVwmpvgoXXUJuq9y-jodaMHjezEfqouWewos2ziPlwPXO_e0aesJQsj_BXAoBlUze-WtToZqemXWOifMhKfOSR/s400/7.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
スマホで OOUI</h2>
スマホになって主役はデータからアプリへ移り、色々なアプリの微妙に異なるテキストボックスや編集ツールに個別最適化する世界になりました。しかし本当にそれがベストなのでしょうか?<br />
ここに一つのアプリがあります。ソシオメディアが提供する Textwell というアプリですが、起動するとテキストウィンドウが広がるだけのシンプルな画面が目に入ります。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisASi5_d64JQmUpq8_Z3Op_uyb2MCVe6dl8Yj12TZkLXiL9p-HKmz43Zy-rbrkMpcNjWqq_NBhQF6OogQWXEztyuCYrhr9EGabOWwDfLF3Nz_7mqoXlOvTZAkT67618mPtpp3cQ6VZy8QR/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1000" data-original-width="562" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisASi5_d64JQmUpq8_Z3Op_uyb2MCVe6dl8Yj12TZkLXiL9p-HKmz43Zy-rbrkMpcNjWqq_NBhQF6OogQWXEztyuCYrhr9EGabOWwDfLF3Nz_7mqoXlOvTZAkT67618mPtpp3cQ6VZy8QR/s640/8.png" width="356" /></a></div>
<br />
ユーザはここでテキストを作成します。ではその後どうするか?<br />
答えは「なんでも」です。左上のアイコンをタップすると「アクション」の一覧が現れます。これはデスクトップにおけるコンテキストメニューと同じもので、作成したテキストの処理を指示するものです。つまり最初にオブジェクトを作り、その次にメソッドを決定するという OO の構造になっているのです。<br />
<br />
<div style="text-align: center;">
<img border="0" data-original-height="1000" data-original-width="562" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPHJ6U6qbuxXiYWotSI4lxP4k0fh_xWHNev1SO5qDbBzjbN97pyXicXEIA3R7ofBkvkWn1pAVzPvb-QRc6mPlB8QqQT0mFtLUZv4Ce8mMn4OVpHzdcZHswv6nk3Y6JHJk5R5EiClHkHR07/s640/9.png" style="color: #0000ee; text-align: center;" width="355" /></div>
<br />
アクションは拡張することができるため、テキストを扱うアプリケーションのほとんどに対して Textwell はテキストエディット部を担うことができます。<br />
<br />
<h2>
オブジェクト指向とタスク指向</h2>
OOUI は自由度が高くカスタマイズが容易な反面、利用者を自由な空間へ「放り出す」面があります。一方タスク指向はメニューに存在しないことはできないため、選択肢が限られています。この記事がそれぞれの特徴を理解し適材適所で UI を作る際の参考になれば幸いです。<br />
<div>
<br /></div>
ueharakhttp://www.blogger.com/profile/13902767447392994148noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-83134749911472163702018-12-08T01:26:00.000+09:002018-12-08T18:38:22.729+09:00Slick でちょっと複雑なテーブルを定義して case class にマッピングする方法こちらは <a href="https://qiita.com/advent-calendar/2018/shanon" target="_blank">Shanon Advent Calendar 2018</a> の7日目の記事です<br />
tado56です<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-1pDHUL-8upY/XAqd-qCcXGI/AAAAAAAATLU/vMxqd6sMZzQiJqAcu9BbVIS4hGT22SYKQCLcBGAs/s1600/slick-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="100" data-original-width="233" src="https://4.bp.blogspot.com/-1pDHUL-8upY/XAqd-qCcXGI/AAAAAAAATLU/vMxqd6sMZzQiJqAcu9BbVIS4hGT22SYKQCLcBGAs/s1600/slick-logo.png" /></a></div>
<br />
最近,Scala で PostgreSQL を扱うことがあり,Slick を使いました.<br />
Slick でテーブルを定義して case class にマッピングする方法を,簡単なものから少し複雑なものまで順番に紹介します.<br />
<br />
<b><span style="font-size: large;">一番シンプルな定義</span></b><br />
一番単純なマッピングの方法です.<br />
<pre>case class Example( id: Int, name: String )
class ExampleTable( tag: Tag, schema_name: String, table_name: String )
extends Table[ Example ]( tag, Some(schema_name), table_name) {
def id = column[Int]("id", O.PrimaryKey, O.AutoInc)
def name = column[String]("name")
def * = (id, name) <> (Example.tupled, Example.unapply)
}
</pre>
<br />
自動採番される id と name カラムを持ったテーブルを定義できます.<br />
このままだと両方のカラムは NOT NULL制約を持っていますが,<br />
column[Option[String]] のように name を定義すると, NOT NULL 制約を外せます.<br />
<br />
<b><span style="font-size: large;">カラムとクラスを1対1でマッピングする</span></b><br />
case class のフィールドの型にクラスを持たせることができます.<br />
その時,単一のカラムであれば,MappedTo を使うことで通常のカラム型と1対1で紐づけることができます.<br />
<pre>case class ExampleId( value: Int ) extends MappedTo[Int]
case class Example( id: ExampleId, name: String )
class ExampleTable( tag: Tag, schema_name: String, table_name: String )
extends Table[ Example ]( tag, Some( schema_name), table_name) {
def id = column[ExampleId]("id", O.PrimaryKey, O.AutoInc)
def name = column[String]("name")
def * = (id, nanika) <> (Example.tupled, Example.unapply)
}
</pre>
<br />
<b><span style="font-size: large;">複数のカラムを case class にマッピングする</span></b><br />
上の例のように,単一ではなく複数のフィールドを持っていることの方が多いと思います.<br />
その時には, * と同じように <> を使って定義します.<br />
<pre>case class ExampleId( value: Int ) extends MappedTo[Int]
case class ExampleName( name1: String, name2: String )
case class Example( id: ExampleId, name: ExampleName )
class ExampleTable( tag: Tag, schema_name: String, table_name: String )
extends Table[ Example ]( tag, Some( schema_name), table_name) {
def id = column[ExampleId]("id", O.PrimaryKey, O.AutoInc)
def name1 = column[String]("name1")
def name2 = column[String]("name2")
def name = (name1, name2) <> (ExampleName.tupled, ExampleName.unapply)
def * = (id, name) <> (Example.tupled, Example.unapply)
}</pre>
ここまで作れれば,class のフィールドにclassの深さがいくら深くなっても基本的にはどのような定義が可能です.<br />
<br />
<span style="color: red; font-size: x-large;"><b>完全に理解した!</b></span><br />
<br />
<b><span style="font-size: large;">ですが・・・</span></b><br />
このようなクラスが存在することがあるかもしれません<br />
<pre>case class Example( id: ExampleId, name: ExampleName, Age: Option[Age])</pre>
この時 Age は Option なので値を持たないときがあります.<br />
このような時の実装でまず思いつくのが, Option だから NOT NULL 制約を外す必要があるんや!余裕やん!その時の書き方は・・・<br />
<pre>case class ExampleId( value: Int ) extends MappedTo[Int]
case class ExampleName( name1: String, name2: String )
case class Age( age: Int, birthday: String )
case class Example( id: ExampleId, name: ExampleName, age: Option[Age])
class ExampleTable( tag: Tag, schema_name: String, table_name: String )
extends Table[ Example ]( tag, Some( schema_name), table_name) {
def id = column[ExampleId]("id", O.PrimaryKey, O.AutoInc)
def name1 = column[String]("name1")
def name2 = column[String]("name2")
def name = (name1, name2) <> (ExampleName.tupled, ExampleName.unapply)
def age_num = column[Option[Int]]("age")
def birthday = column[Option[String]]("birthday")
def age = (age_num, birthday) <> (Age.tupled, Age.unapply)
def * = (id, name, age) <> (Example.tupled, Example.unapply)
}</pre>
このように書いてしまいがちです.(自分がそう書いたので他の人もそうだと決めつけます)<br />
ですがこれではコンパイルが通りません!<br />
<br />
以下のように tupled と unapply をカスタムしてあげる必要があります.<br />
<pre>object Age {
def fromOptions( age: Option[Int], birthday: Option[String] ): Option[ Age ] =
(age, birthday)match {
case ( Some(a), Some(b) ) =>
Some( Age( a, b ) )
case _ => None
}
def customTupled = (fromOptions _).tupled
def customUnapply( age: Option[ Age ] ): Option[ (Option[Int], Option[String]) ] =
age match {
case None => (Some(None, None))
case Some( x ) => age.map { a => (Some(a.age), Some(a.birthday))
}
}
}
</pre>
<br />
ここまでしてあげてようやく無事テーブルの定義を行うことができます.<br />
<pre>case class ExampleId( value: Int ) extends MappedTo[Int]
case class ExampleName( name1: String, name2: String )
case class Example( id: ExampleId, name: ExampleName, age: Option[Age])
case class Age( age: Int, birthday: String )
object Age {
def fromOptions( age: Option[Int], birthday: Option[String] ): Option[ Age ] =
(age, birthday)match {
case ( Some(a), Some(b) ) =>
Some( Age( a, b ) )
case _ => None
}
def customTupled = (fromOptions _).tupled
def customUnapply( age: Option[ Age ] ): Option[ (Option[Int], Option[String]) ] =
age match {
case None => (Some(None, None))
case Some( x ) => age.map { a => (Some(a.age), Some(a.birthday))
}
}
}
class ExampleTable( tag: Tag, schema_name: String, table_name: String )
extends Table[ Example ]( tag, Some( schema_name), table_name) {
def id = column[ExampleId]("id", O.PrimaryKey, O.AutoInc)
def name1 = column[String]("name1")
def name2 = column[String]("name2")
def name = (name1, name2) <> (ExampleName.tupled, ExampleName.unapply)
def age_num = column[Option[Int]]("age")
def birthday = column[Option[String]]("birthday")
def age = (age_num, birthday) <> (Age.customTupled, Age.customUnapply)
def * = (id, name, age) <> (Example.tupled, Example.unapply)
}
</pre>
<br />
ここら辺の定義ができればほとんどの構造の定義はできるのではないかと思います.<br />
以上です.<br />
<br />Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-62222614527881091782018-12-04T20:58:00.002+09:002018-12-04T20:58:26.901+09:00自動化をとめるな! ~最近自動化について思うこと~ (ShanonAdventCalendar2018・4日目)<br />
<div style="background-color: white; font-style: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">
<span style="font-size: small;"><span style="font-family: inherit;"><span style="background-color: white;">この記事は</span><span style="color: black;"><a data-saferedirecturl="https://www.google.com/url?q=https://qiita.com/advent-calendar/2018/shanon&source=gmail&ust=1544010490280000&usg=AFQjCNEdrG8qrHy5Fdi8Lot7rD1VXo9CoA" href="https://qiita.com/advent-calendar/2018/shanon" style="background-color: white; border: 0px none; font-stretch: inherit; line-height: inherit; margin: 0px; outline: medium none currentcolor; padding: 0px; vertical-align: baseline;" target="_blank">ShanonAdventCalendar2018</a><span style="background-color: white;">・<wbr></wbr>4日目の記事です。</span></span></span></span></div>
<br />
こんにちは。inomataです。<br />
<br />
最近はDockerをいじったり、AWS CloudFormationをいじったり、アプリを改修したりアプリのテストをしています。<br />
そんな中、何かを自動で行うということについて今一度考えてみたいと思いました。<br />
<br />
自動化は人的なコストの削減やオペミスを防止してくれるので大変便利なものです。<br />
しかし、いつしかその自動化は壊れたり、あるいはナニカを壊したり、飼い主にかみつくこともしばしばあります。<br />
そうならないためには、いったい何に気を付けなければいけないのでしょうか。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNpgMJvf5HnRThe-nxr1o_-Nsr73C4L6UF_Wu8PgJGNOT8umuWEL4Bhboysd0jEN00HTJiuYEc-AeuJ7O0_dbtvbeuxN3lHEucloApFw8ss2AAmQr-4ZfjSbQsl-BbXxUscB5u0EXexU0/s1600/haguruma.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="400" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNpgMJvf5HnRThe-nxr1o_-Nsr73C4L6UF_Wu8PgJGNOT8umuWEL4Bhboysd0jEN00HTJiuYEc-AeuJ7O0_dbtvbeuxN3lHEucloApFw8ss2AAmQr-4ZfjSbQsl-BbXxUscB5u0EXexU0/s320/haguruma.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<h3>
自動化は理想状態の収束を目指す</h3>
<br />
自動化は自動で何かをしてくれます。パッケージのインストールだったり、DBのデータを更新したり。データを集計したり。<br />
良くも悪くも毎回こっちの都合などお構いなしです。そこで気を付けなければいけないのは、自動化が実行される場所、あるいは対象の状態でしょう。<br />
簡単に言うと、"どういう状態で実行されてもその状態にする"ということです。つまりはべき等性の担保です。<br />
<br />
例えばapacheの2.4.37をインストールする自動化スクリプトがあるとします。その内容は、<br />
- apacheがインストールされていなければapache2.4.37をインストールします。<br />
- apache2.4.37をインストールされていれば何もしません。<br />
- apache2.3.0がインストールされていればapacheの2.4.37に更新します。<br />
という具合です。これならばこの自動化スクリプトを実行するだけで、対象のサーバにapache2.4.37がインストールされるということが保証されます。<br />
<br />
とはいえ、どんな場合でも無条件にスクリプトが実行できるとも限りません。その場合は"何もしなかったことにする"ということが上策でしょう。<br />
そうすれば、実行できない原因を排除して再実行することも簡単でしょう。<br />
<br />
<br />
<h3>
テストを定期的に行う</h3>
<br />
せっかく作った自動化スクリプトも、前述の通り無条件で実行できるわけがありません。月日が経つにつれ、いつ動かなくなるかわかりません。<br />
なので毎日動かしてテストするのが理想です。本番環境で実行されるべきものも、テスト環境を用意して毎日実行するのがよいでしょう。<br />
運用でたまにしか使わないスクリプトなんかもテストしておくとよいでしょう。そうすれば本番で実行する機会が訪れるたびに無用な緊張感がなくなります。<br />
少なくとも毎日は実行しなくても、状態が変わる前のタイミングでテストはしておくべきでしょう。<br />
<br />
<br />
<h3>
まとめ</h3>
<br />
結構当たり前だなーなんて思ったりしますか?しますよね?けど、例えばCI/CDで使うちょっとしたスクリプト(CDはヤバイ)、テスト環境で自動テストを動かすためのスクリプト、運用のための機能アクティベートのためのスクリプト。イマドキの開発プロセスでは、随所にスクリプトを仕込み定期実行する仕組みを用意しないと立ち行かないでしょう。<br />
インフラ構築のための自動化はChefやAnsibleなどのツールはべき等性を担保するのであまり気を使わないかもしてませんが、そういったツールを使うまでもない、あるいはデータ集計のバッチなど性質が異なる等の理由で自前で作ったスクリプト(実行する仕組みも含む)なんかはこういうことが疎かになりがちです。<br />
<br />
わかってる人もそうでない人も、<br />
- 自動化されたスクリプトは理想状態への収束を目指す<br />
- テストを定期的に行う<br />
これらを意識して今一度見直してみてはいかがでしょうか。<br />
飼い犬に手をかまれないためにも、最後まで気を抜かず安寧な自動化ライフを!<br />
<br />
<br />
P.S.<br />
"理想状態への収束"という言葉は以前サイボウズさんの勉強会に参加したときに聞いた言葉です。元ネタがあったりするのでしょうか?<br />
またサイボウズさんはCloudFormationのテストを毎日VPCから作りなおすと言ってました。すごすぎです。<br />
これらにリスペクトして今回書きました。inomatahttp://www.blogger.com/profile/13744753825842161516noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-10707900918527478312018-12-03T15:39:00.002+09:002018-12-03T15:39:24.260+09:00SMPから送信するメールが迷惑メールとされない為に(ShanonAdventCalendar2018・3日目)こちらは <a href="https://qiita.com/advent-calendar/2018/shanon" target="_blank">Shanon Advent Calendar 2018</a> の3日目の記事です。<br />
こんにちはtitoです。<br />
<br />
シャノンではShanon Marketing Platform(SMP)のメール周りの機能を担当したりしています。<br />
メール周りに少し詳しくなったので、今回はSMPから送信するメールが迷惑メールにされない為に<br />
どんなことをしているのか、一部紹介したいと思います。<br />
あまりメールが詳しくない方でも読んで頂ける内容になっていると思います!<br />
<br />
SMPでは、任意の送信元を設定しつつ大量の宛先にメール送信を行う事ができます。<br />
任意のものに設定してもらう事で、お客様の会社からメールを送信しているかのように振る舞う事ができます。<br />
ただ、シャノンのドメインとは違ったメールアドレス(ドメイン)を送信元にしてメール送信を行うと、<br />
受信側のメールサーバーでチェックした際に、メールを送信してきたIPアドレスと、<br />
送信元のドメインから取得できるIPアドレスが違っていて怪しまれてしまいます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRj8dfjTI-DMcBAn2Osv0KwktNR0kIkqb3SFzD58umwDE_MiWUih56EUSOafyznTtURSkzacl2-oxi4N2U_RWSbGxGg5dvIylbpmiq9MtP0Gku5kr5vrv2i0qnff0y4HUhwQhxjUQCIjrB/s1600/ayasii_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="749" data-original-width="1120" height="427" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRj8dfjTI-DMcBAn2Osv0KwktNR0kIkqb3SFzD58umwDE_MiWUih56EUSOafyznTtURSkzacl2-oxi4N2U_RWSbGxGg5dvIylbpmiq9MtP0Gku5kr5vrv2i0qnff0y4HUhwQhxjUQCIjrB/s640/ayasii_2.png" width="640" /></a></div>
<br />
<br />
そこで、シャノンではSender IDという仕組みを利用して、<br />
迷惑メールにされてしまわないように対策を行っています。<br />
Sender IDの仕組みをざっくり説明すると、送信元のドメインのDNSサーバーにSPFレコードという<br />
許可リストのようなものを用意しておいて認証を行う仕組みです。<br />
<br />
そのSPFレコードにシャノンのメールサーバーのドメインを情報を盛り込んでおく事で<br />
シャノンから送ったメールでも、送信元のドメインから送ったメールとして扱って良いよー<br />
という感じで認証をPASSしてもらえます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrAF4NjdHdkayJNWuk-REMuq58iT6-j5LpIKQK0-vL43wX6DuHtyvRoss7HE0SLvZd1IOOEMt480n-ettynQUgfPkbq5YneLyi4clNv9yWS4gwFvte_xA9mRhtIjHKEL5k-kM8on3d8fDM/s1600/ayasii_3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="749" data-original-width="1120" height="428" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrAF4NjdHdkayJNWuk-REMuq58iT6-j5LpIKQK0-vL43wX6DuHtyvRoss7HE0SLvZd1IOOEMt480n-ettynQUgfPkbq5YneLyi4clNv9yWS4gwFvte_xA9mRhtIjHKEL5k-kM8on3d8fDM/s640/ayasii_3.png" width="640" /></a></div>
<br />
<br />
今回は細かいところは省いて概要だけ、という形にさせて頂きましたが、<br />
他にもSMPでは迷惑メールにされない為に色々な仕組みを利用しています。<br />
こういった事を知る度にメールって簡単なように見えて奥深いのだなと実感します。<br />
<br />
それでは、引き続き <a href="https://qiita.com/advent-calendar/2018/shanon" target="_blank">Shanon Advent Calendar 2018</a> をお楽しみ下さい。titohttp://www.blogger.com/profile/03615703002903704308noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-25948055130717166142018-12-02T04:31:00.001+09:002018-12-02T04:34:32.068+09:00Voices of muscle 〜君はマッスルセンサーを知っているか〜 (ShanonAdventCalendar2018・2日目)<div style="-en-clipboard: true;">
<b>この記事はShanonAdventCalendar2018 ・2日目の記事として投稿している。</b></div>
<div>
今日は身体を鍛え健康的にクリスマスを過ごしたいと考えるエンジニアに広く読まれるべき内容として、<br />
マッスルセンサーを紹介をしたい。
</div>
<div>
<br /></div>
<div>
そもそも私がこのマッスルセンサーというものを手に入れようと考えたのは、趣味でやっている<a href="https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%96%E3%83%A9" target="_blank">タブラ</a>というインドの打楽器を叩くときに速度をあげて叩こうとすると手の筋肉がつったような感じになるため困っていたからだ。筋肉がどういう状態なのか切実に知りたかったが、筋肉に話しかけたところで答えが返ってくるはずもない。
</div>
<div>
<br /></div>
<div>
しかし会話ができないからといってコミュニケーションできないと考えるのは早計である。筋肉には筋肉の言葉がある。それは電気である。
</div>
<div>
筋繊維が興奮するときには、電位の変化が起こっている。つまり筋肉は絶えず声なき声を上げ続けているのだが、それが電気で発せられているので、いまいち私たちに聞こえていなかったのだ。
</div>
<div>
<br /></div>
<div>
彼らの声に耳を傾けるために、筋電計というものがあって、それを使うと筋繊維の状態を測定することができる。
</div>
<div>
とはいえ医療用に販売されている筋電計はそれなりに値が張るので簡単には入手できない。頭を抱えていたところ出会ったのが「<a href="https://www.sparkfun.com/products/13723" target="_blank">MyoWare Muscle Sensor</a>」だった。</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-JqirSsFpLpI/XALRt3wGUmI/AAAAAAAAT6o/ybMz7fHBwu8OET4Y4xGjHnjm1YnpAj0RACLcBGAs/s1600/4C2D54A1-1FD4-4902-9C77-9A4C88D44656.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="859" data-original-width="1145" height="240" src="https://1.bp.blogspot.com/-JqirSsFpLpI/XALRt3wGUmI/AAAAAAAAT6o/ybMz7fHBwu8OET4Y4xGjHnjm1YnpAj0RACLcBGAs/s320/4C2D54A1-1FD4-4902-9C77-9A4C88D44656.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
これであれば数千円で入手できるので、お手軽である。</div>
<div class="separator" style="clear: both;">
諸々準備して、最終的には以下の材料を使った。</div>
<div class="separator" style="clear: both;">
</div>
<ul>
<li><a href="https://www.sparkfun.com/products/13723" target="_blank">MyoWare Muscle Sensor</a></li>
<li><a href="https://www.sparkfun.com/products/12969" target="_blank">生物医学センサパッド</a></li>
<li><a href="https://store.arduino.cc/usa/arduino-uno-rev3" target="_blank">Arduino Uno</a></li>
<li><a href="https://www.marutsu.co.jp/pc/i/557424/" target="_blank">長めの電線</a>(マッスルセンサーは筋肉に貼り付けて使うので、よく使うジャンパワイヤーより長いものをおすすめする)</li>
</ul>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="336" data-original-width="572" height="187" src="https://1.bp.blogspot.com/-swzYEaaQI5I/XALSIVTCf-I/AAAAAAAAT60/3dOEqYUVcT8Sb4pseV03ymGc7pqxizhJACLcBGAs/s320/screenshot.png" width="320" /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: xx-small;">( <a href="https://cdn.sparkfun.com/datasheets/Sensors/Biometric/MyowareUserManualAT-04-001.pdf" target="_blank">https://cdn.sparkfun.com/datasheets/Sensors/Biometric/MyowareUserManualAT-04-001.pdf</a> )</span></div>
<div style="-en-clipboard: true;">
ちなみにこれらの材料はデータシートに記載がある一番簡単な構成で作成する場合のものになる。
</div>
<div class="separator" style="clear: both;">
<!--?xml version="1.0" encoding="UTF-8"?-->
</div>
<div>
あまりおすすめしない構成とのことだったが、自分の筋肉で試す分には問題なかった。</div>
<div>
<br /></div>
<div>
<!--?xml version="1.0" encoding="UTF-8"?-->
これらをつないで手に貼り付けた。<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-HtRuUBURnBI/XALS2T0TOfI/AAAAAAAAT7A/TPKUQXMlWaEm1bmanT2OwZrN2-cjfkB-wCLcBGAs/s1600/014129C1-59ED-4ABF-8224-BCE2688B1F46.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="718" data-original-width="538" height="400" src="https://4.bp.blogspot.com/-HtRuUBURnBI/XALS2T0TOfI/AAAAAAAAT7A/TPKUQXMlWaEm1bmanT2OwZrN2-cjfkB-wCLcBGAs/s400/014129C1-59ED-4ABF-8224-BCE2688B1F46.jpg" width="298" /></a></div>
<div>
<br />
そもそもの目的がインドの打楽器の技術向上なので、もちろん<a href="https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%96%E3%83%A9" target="_blank">タブラ</a>も用意している。</div>
<div>
<br /></div>
<div>
これにより得られた筋電図がこれになる。</div>
<div>
なおインドの楽器に詳しくないとあまりピンとこないと思うが、連続して「ta ta tirkit」というパターンを繰り返し叩いた測定結果になっている。</div>
<div>
(手の動きとしては、「右人差し指、右人差し指、右中指、右人差し指、左手、右中指」という順番)</div>
<div>
<br />
マッスルセンサーは筋肉に力が入っている時により大きい値を出力しており、最初の右人差し指を打つときに割と指を振りかぶっているような動きをしているので、それが定期的にとがっている山の部分になっている。</div>
<div>
あとうまく叩き続けられているときは、打っていないときは波が下がっていて筋肉がリラックスした状態になっていることがわかる。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-gl79FcD0zbk/XALTjNPUhYI/AAAAAAAAT7I/4A0re6s2YFw_-kQsCnh0uni4QNV3UXCEACLcBGAs/s1600/C2DD9B97-5313-4AFA-B933-F4BC77513A52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="602" data-original-width="884" height="433" src="https://3.bp.blogspot.com/-gl79FcD0zbk/XALTjNPUhYI/AAAAAAAAT7I/4A0re6s2YFw_-kQsCnh0uni4QNV3UXCEACLcBGAs/s640/C2DD9B97-5313-4AFA-B933-F4BC77513A52.png" width="640" /></a></div>
<div>
<div>
<br />
<br />
うまく叩けていない状態のグラフはこちらになる。叩いているパターンは同じなのだが、叩くペースを上げて叩き続けた時のグラフだ。</div>
<div>
うまく叩けている時と比較すると、筋肉がリラックスしているタイミングが少なくなってしまっていて、筋肉の緊張が高まった状態になっている。</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-fqoEk-FVCfM/XALTzb0h3BI/AAAAAAAAT7Q/Ts2iY2mXQaYsZfZHvdrLBVkgoIc8nbFQgCLcBGAs/s1600/81931AAB-D7A5-4DCF-BD4B-39537A33D8BE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="602" data-original-width="884" height="433" src="https://2.bp.blogspot.com/-fqoEk-FVCfM/XALTzb0h3BI/AAAAAAAAT7Q/Ts2iY2mXQaYsZfZHvdrLBVkgoIc8nbFQgCLcBGAs/s640/81931AAB-D7A5-4DCF-BD4B-39537A33D8BE.png" width="640" /></a></div>
<div>
<div>
<br />
センサー使って観察することで、指が動かなくなっているときには筋肉が緊張した状態が続いてしまっていることがわかった。こうして計測することで、筋肉をリラックスさせながら同時に速く演奏するような練習をしていくことができそうだ。</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
あと、タブラの練習を日常的に行なっている方は少数派だと思うから、もう少し一般的なユースケースも想定して、大腿直筋にマッスルセンサーを貼り付けてスクワットを行ったグラフも載せておく。</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-JeiTy6XeowI/XALUGeOphzI/AAAAAAAAT7o/dP5pjAJ066caOAmbD3xMlP0Hut9Lxe-3QCLcBGAs/s1600/BC92D16D-17CE-4157-9D2E-CB3AC28E210C.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="602" data-original-width="878" height="436" src="https://3.bp.blogspot.com/-JeiTy6XeowI/XALUGeOphzI/AAAAAAAAT7o/dP5pjAJ066caOAmbD3xMlP0Hut9Lxe-3QCLcBGAs/s640/BC92D16D-17CE-4157-9D2E-CB3AC28E210C.png" width="640" /></a></div>
<div>
<div>
こちらは見ればわかると思うが、台地みたいな波形になっている最初のところがしゃがみこんだところで、台地が終わるところが立ち上がり切ったところだ。どのタイミングで負荷がかかっているか、負荷がどのくらいの時間継続しているかということが容易にわかる。<br />
<br />
<br /></div>
<div>
こうしてマッスルセンサーを使ってみると、頭で筋肉への負荷を勝手に推量することがいかに自己中心的な態度であったかと感じる。筋肉トレーニングは自分が一方的に筋肉を酷使するような利己的なものであってはいけない。筋肉と対話をして彼らの思い、考えを理解しながらともに深い会話の世界にはいりこんでいくべきである。</div>
<div>
<br /></div>
<div>
なお、今回のコードは下記する。ぜひ各自で筋肉との出会いを楽しんでもらいたい。</div>
<div>
<br /></div>
<div>
それでは次回のアドベンドカレンダーもお楽しみに。</div>
</div>
<div>
<br /></div>
<div>
<div>
Arduino</div>
</div>
<pre><code>int onboardLED = 13;
int voltageThreshold = 400; // any reading higher will trigger an action
void setup() {
Serial.begin(9600);
pinMode(onboardLED, OUTPUT);
}
void loop() {
int currentVoltage = analogRead(A0);
Serial.print(currentVoltage); // processingに渡すためにセンサーの結果をシリアル出力する
//入力値が高すぎるときにLEDをつける
if(currentVoltage > voltageThreshold){
Serial.println("CONTRACTION!");
digitalWrite(onboardLED, HIGH);
} else {
Serial.println("");
digitalWrite(onboardLED, LOW);
}
delay(200);
}
</code></pre>
<div>
<br /></div>
<div>
<!--?xml version="1.0" encoding="UTF-8"?-->
Processing</div>
<div>
<pre><code>
import processing.serial.*;
Serial port;
int[] values = new int[100];
int screen_size_x = 800;
int screen_size_y = 500;
int base_height = screen_size_y - 50;
void settings() {
size(screen_size_x, screen_size_y);
}
void setup() {
frameRate(100);
smooth();
String[] ports = Serial.list();
for (int i = 0; i < ports.length; i++) {
println(i + ": " + ports[i]);
}
// portはそれぞれの環境で適切なindexを入れる
port = new Serial(this, ports[3], 9600);
}
void draw() {
background(color(255));
int x_stroke_length = screen_size_x / 100;
// gridline
fill(#95a5a6);
textAlign(RIGHT);
stroke(color(#ecf0f1));
for (int i = 0; i < 10; i++) {
int h = i*50;
line(0, base_height - h,
screen_size_x, base_height - h);
text(h, 25, base_height - h);
}
// baseline
stroke(color(#34495e));
line(0, base_height,
screen_size_x, base_height);
// maxline
stroke(color(#e74c3c));
int max_value = base_height - max(values);
line(0, max_value,
screen_size_x, max_value);
// value text
fill(#2c3e50);
textAlign(LEFT);
text("MAX=" + max(values), screen_size_x - 80, 25);
text("MIN=" + min(values), screen_size_x - 80, 40);
// graph
stroke(color(#e67e22));
for (int j = 0; j < 99; j++) {
line(x_stroke_length * j, base_height - values[j],
x_stroke_length * (j + 1), base_height - values[j + 1]);
}
}
void serialEvent(Serial p) {
if (p.available() > 0) {
try {
String input = p.readStringUntil('\n');
if (input != null) {
input = trim(input);
println(input);
values = append(subset(values, 1), int(input));
}
} catch (RuntimeException e) {
}
}
}
</code></pre>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-86322876097269139002018-12-01T23:43:00.000+09:002018-12-01T23:49:18.480+09:00obnizとAlexaでメリークリスマス!!!(ShanonAdventCalendar2018・1日目)<h2><span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;">この記事は</span><a href="https://qiita.com/advent-calendar/2018/shanon" style="background-color: white; border: 0px; color: #637182; font-family: "open sans"; font-size: 14px; font-stretch: inherit; line-height: inherit; margin: 0px; outline: none; padding: 0px; transition: all 0.25s ease 0s; vertical-align: baseline;">ShanonAdventCalendar2018</a><span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;">・1日目の記事です。</span></h2><span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;"><br />
</span> <span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;">こんにちは。ishikawaです。</span><br />
<span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;"><br />
</span> <span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;">今回は最近手に入れたobnizというIoT開発ボードを使って、</span><br />
<span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;">Alexaスキルと連動するものを作ってみました。(小ネタ感満載です)</span><br />
<span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhE0D2-C-E82IsVV8JVLBaioOlaFtpErfpztRwsVQXjS3oebvna6KOZIvguv84qC2QBqNTkU7zq3bQvZjSvwwjjPshPg24-ULl_ZyDUgh_RpAFbOh8_FQkLkr8aoRn_XX8ysC8YWEQk7U/s1600/IMG_1310.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1200" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhE0D2-C-E82IsVV8JVLBaioOlaFtpErfpztRwsVQXjS3oebvna6KOZIvguv84qC2QBqNTkU7zq3bQvZjSvwwjjPshPg24-ULl_ZyDUgh_RpAFbOh8_FQkLkr8aoRn_XX8ysC8YWEQk7U/s320/IMG_1310.jpg" width="240" /></a></div><span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;"><br />
</span> <span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;"><br />
</span> <br />
<h2><span style="color: #4b5f65; font-family: "open sans"; font-size: large;"><span style="background-color: white;">obnizとは</span></span></h2><div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;">日本のCambrianRobotics社発のIoT開発ボードで、</span></span><span style="background-color: white; color: #4b5f65; font-family: "open sans";">Wifiに接続しておくと、</span></div><div><span style="background-color: white; color: #4b5f65; font-family: "open sans";">インターネット経由でAPIやjavascriptから電子部品を操作できるIOです。</span></div><div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;"><br />
</span></span></div><div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;">obnizをWifiに接続すると、QRコードが表示され、</span></span></div><div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;">スキャンして開かれたページからすぐにプログラムを実行できます。</span></span></div><div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;"><br />
</span></span></div><div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;">当初手に入れた時は動かすまでにほとんど時間がかからず、</span></span></div><div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;">電子部品を手軽に扱えることにとても感動しました。</span></span></div><div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;"><br />
</span></span></div><h2><span style="color: #4b5f65; font-family: "open sans"; font-size: large;"><span style="background-color: white;">今回作ったもの</span></span></h2><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/N3qcoqsISQs/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/N3qcoqsISQs?feature=player_embedded" width="320"></iframe></div><div><br />
</div><span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;">「アレクサ、メリークリスマス!」と言うと、</span></span><br />
<span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;">100円ショップで買ったクリスマス用LEDが点灯します。</span></span><br />
<span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;"><br />
</span></span> <span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;">(動画でしゃべっている自分の声が心なしか寂しく聞こえますw)</span></span><br />
<span style="color: #4b5f65; font-family: "open sans";"><span style="background-color: white;"><br />
</span></span> <br />
<h2><span style="color: #4b5f65; font-family: "open sans"; font-size: large;"><span style="background-color: white;">システム構成図</span></span></h2><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix44XEObpLpndpCc8OzRJunn3Of1gRFlF8nct0PcvmlqtiCzDUE-1BwkedxqYXVmlcUoI-_NbAFlHDiNKgmGAr_bsQgbeZxsao5OCEi1rV84zK4Q6AyBYvg8pyyl8XS_73u5lPG-1hZ58/s1600/obniz_lamda.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="334" data-original-width="543" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix44XEObpLpndpCc8OzRJunn3Of1gRFlF8nct0PcvmlqtiCzDUE-1BwkedxqYXVmlcUoI-_NbAFlHDiNKgmGAr_bsQgbeZxsao5OCEi1rV84zK4Q6AyBYvg8pyyl8XS_73u5lPG-1hZ58/s400/obniz_lamda.png" width="400" /></a></div><span style="color: #4b5f65; font-family: "open sans"; font-size: large;"><span style="background-color: white;"><br />
</span></span></div><h2><span style="color: #4b5f65; font-family: "open sans"; font-size: large;"><span style="background-color: white;">準備するもの</span></span></h2><div><ul><li><span style="color: #4b5f65; font-family: "open sans";">obniz</span></li>
<li><span style="color: #4b5f65; font-family: "open sans";">Alexa</span></li>
<li><span style="color: #4b5f65; font-family: "open sans";">クリスマス用LED(100円ショップで購入。電池付属部分を取り除いたもの)</span></li>
<li><span style="color: #4b5f65; font-family: "open sans";">ワニ口クリップ2個(obnizとLEDをつなぐために購入。)</span></li>
</ul><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><div><span style="color: #4b5f65; font-family: "open sans";">その他、Alexaスキルを作ったりやLamdaで動かすために以下のアカウントを用意する必要があります。</span></div><div><ul><li>Amazon開発者ポータルのアカウント(<a href="https://developer.amazon.com/">https://developer.amazon.com</a>)</li>
<li>AWSのカウント(<a href="https://aws.amazon.com/">https://aws.amazon.com</a>)</li>
</ul></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><h2><span style="color: #4b5f65; font-family: "open sans"; font-size: large;">作り方</span></h2></div><h3><span style="color: #4b5f65; font-family: "open sans"; font-size: small;">・Nodeファイルの作成とAWS Lamdaの設定</span></h3><div><span style="color: #4b5f65; font-family: "open sans";">詳細はobnizの以下のドキュメントページにあります。</span></div><div><span style="color: #4b5f65; font-family: "open sans";"><a href="https://obniz.io/doc/lessons_lambda?iframe=true">https://obniz.io/doc/lessons_lambda?iframe=true</a></span></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><div><span style="color: #4b5f65; font-family: "open sans";">lamdaで動かすobnizコードは以下のものを用意しました。</span></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><pre style="overflow-wrap: break-word; white-space: pre-wrap;">var Obniz = require("obniz");
exports.handler = function(event, context, callback) {
var obniz = new Obniz("YOUR_OBNIZ_ID");
obniz.onconnect = async function () {
var led = obniz.wired("LED", { anode:0, cathode:1 } );
led.on();
obniz.display.clear();
obniz.display.print("Merry Christmas!!!");
await obniz.wait(10000)
led.off();
obniz.close();
callback(null, "success");
};
};</pre><br />
<h3><span style="color: #4b5f65; font-family: "open sans"; font-size: small;">・Alexaスキルを作成し、Lamdaファンクションと紐付ける</span></h3><div><span style="color: #4b5f65; font-family: "open sans";">今回初めて、Alexaスキルを作成したのですが、</span></div><div><span style="color: #4b5f65; font-family: "open sans";">インテントやインテントスロットといった専門用語に戸惑ったものの、</span></div><div><span style="color: #4b5f65; font-family: "open sans";">基本的には画面の手順に従って作業したらなんとなく出来てしまいました。</span></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><div><span style="color: #4b5f65; font-family: "open sans";">そして出来上がったスキルをLamdaファンクションと紐付けます。</span></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPe3y9gx9ofzlnvdYaC4qlrEVT9ne0mMIHqN8gZczLjeZbEhmDFZhpazakD8o8hV6tayvl0lg3hGRDooT9F3HOzqhmnCVFCCi33J9sy_rB5jKXthEA0FW0cZCvFLxBzCugg-nSi0upGvs/s1600/Lambda+Management+Console+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="562" data-original-width="1600" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPe3y9gx9ofzlnvdYaC4qlrEVT9ne0mMIHqN8gZczLjeZbEhmDFZhpazakD8o8hV6tayvl0lg3hGRDooT9F3HOzqhmnCVFCCi33J9sy_rB5jKXthEA0FW0cZCvFLxBzCugg-nSi0upGvs/s320/Lambda+Management+Console+%25281%2529.png" width="320" /></a></div><span style="color: #4b5f65; font-family: "open sans";"></span></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><h3><span style="color: #4b5f65; font-family: "open sans"; font-size: small;">・ベータテストで試してみる</span></h3><div><span style="color: #4b5f65; font-family: "open sans";">ベータテストをアクティブにし、自分のAlexa端末でスキルを有効にします。</span></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXJESKXZ9SvTreJQkvzlSdKqK_WD8Ypqu27MJRBkeRrUJHAaAHL_VOPgG5ozQk02sxOnErJ5b7sgjPv6YPuBiRXxk1U9X_4f-89cQ6gSANxayoQz5zkWnaUnZ9T1-yXpLoYeqg67O5IU/s1600/IMG_1338.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXJESKXZ9SvTreJQkvzlSdKqK_WD8Ypqu27MJRBkeRrUJHAaAHL_VOPgG5ozQk02sxOnErJ5b7sgjPv6YPuBiRXxk1U9X_4f-89cQ6gSANxayoQz5zkWnaUnZ9T1-yXpLoYeqg67O5IU/s320/IMG_1338.jpg" width="180" /></a></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><div><span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div><div><h2><span style="color: #4b5f65; font-family: "open sans"; font-size: large;"><b>感想</b></span></h2></div><div><span style="color: #4b5f65; font-family: "open sans";">Wifiにつないで電子部品を手軽に操作できるobnizと</span><span style="color: #4b5f65; font-family: "open sans";">スマートスピーカーの連携は</span><br />
<span style="color: #4b5f65; font-family: "open sans";">たくさんの可能性を秘めているなあと改めて感じました。</span><br />
<br />
<span style="color: #4b5f65; font-family: "open sans";">ですが、</span><br />
<span style="color: #4b5f65; font-family: "open sans";">実を言うと、動画ではすんなりとLEDが付いているように見えるのですが、</span><br />
<span style="color: #4b5f65; font-family: "open sans";">「メリークリスマス」と言っても何も反応しない時が多々あります。</span><br />
<span style="color: #4b5f65; font-family: "open sans";"><br />
</span> <span style="color: #4b5f65; font-family: "open sans";">この反応の悪さはストレスになるので、なんとか今後改良していきたいと思います。</span><br />
<span style="color: #4b5f65; font-family: "open sans";"><br />
</span> <br />
<h2><span style="color: #4b5f65; font-family: "open sans"; font-size: large;"><b>おわりに</b></span></h2><span style="color: #4b5f65; font-family: "open sans";">インターネットや本でいろんな知識が手に入る時代ですが、</span><br />
<span style="color: #4b5f65; font-family: "open sans";">実際に動かしてみたときの楽しさ、それらの経験は何ものにも変えがたいと思います。</span><br />
<div><br />
</div><span style="color: #4b5f65; font-family: "open sans";">ぜひ、興味を持ったらobnizやスマートスピーカーを手にとってみてください。</span><br />
<span style="color: #4b5f65; font-family: "open sans";">私もまだ始めたばかりの初心者ですが、色々試していきたいと思っています。</span><br />
<span style="color: #4b5f65; font-family: "open sans";"><br />
</span></div>ishikawahttp://www.blogger.com/profile/05817672962040548522noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-39339353521146037892018-06-19T07:40:00.001+09:002018-06-19T09:57:30.558+09:00名刺アプリで考えるシャッターチャンスのインタラクションと視線のUI<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP8LDYoctOUdB6t4SPB3ijjHXb0SbVTo8VovURVoOTbC2D5e9RdfbZNyGuOmkkk7SudAyEX43Vy2Bq2DtJt0xIOA6VT7lVPygY7A6P_B2-9Vwbln2edd3-fhwjP_yk3Ck3LUg4DPJpZZbm/s1600/IMG_3227.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1174" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP8LDYoctOUdB6t4SPB3ijjHXb0SbVTo8VovURVoOTbC2D5e9RdfbZNyGuOmkkk7SudAyEX43Vy2Bq2DtJt0xIOA6VT7lVPygY7A6P_B2-9Vwbln2edd3-fhwjP_yk3Ck3LUg4DPJpZZbm/s320/IMG_3227.jpg" width="234" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
こんにちは ueharak です。<br />
シャノンでは「シャノン名刺」というスマホアプリを 6/1 に<a href="http://www.shanon.co.jp/corporation/news/2018/05/25.html" target="_blank">リリース</a>しました。<br />
今日はこのシャノン名刺の名刺撮影機能について考えてきたことをお伝えしようと思います。<br />
<br />
<h2>
シャノン名刺とは</h2>
シャノン名刺は名刺を撮影することで情報をデジタル化し、シャノンマーケティングプラットフォームへ格納することができます。名刺のデジタル化自体はこれまでもスキャナで行う機能を提供してきましたが、シャノン名刺によってこれがモバイルからも行えるようになりました。<br />
<br />
<h2>
名刺のデジタル化</h2>
名刺をコンピュータで扱えるようにするには、デジタル化が必要です。デジタル化のためには名刺を撮影する必要がありますが、撮影するだけでなく撮影した像から名刺を「認識」する必要があります。<br />
<br />
<h2>
コンピュータビジョン</h2>
「認識」とはここでは画素の配列から名刺としての矩形を見つけることですが、そのためにはコンピュータビジョン(Open CV など)が必要です。撮影された像がコンピュータビジョンによって名刺とされた時、名刺のデジタル化の準備ができたと言えます。<br />
<br />
<h2>
撮影とコンピュータビジョン</h2>
撮影とは通常、ヒトが見ている視界の一部を記録することですが、コンピュータビジョンはそこからある結果(ここでは名刺)を得ることになります。つまり「名刺」を得るには、ヒトによる「撮影」とコンピュータビジョンによる「認識」の両方が必要であり、それらが「シャッター」によって一度に得られなければなりません。<br />
<br />
<h2>
シャッターを押すという行為</h2>
ヒトは「撮影したい」とき、シャッターを押します。シャッターとは機械に撮像するタイミングを通知するものです。コンピュータビジョンによる処理はその後に控えているわけですが、名刺の認識に必要な像が得られているかどうかはシャッターの結果にかかっています。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8ozvAox0wptR1aksZVr6UC3_oKq990vHblW7Ms7NtBK1cRElhTkGVJ9HqyZrBxXPhXbGEjcPwny5O_X9Mk2kGQTdkRFRjgIQITd9nlGGVIqSSqJ34KzVPCFAOCGxANjTAYKzOSXxTio0/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.30.34.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="308" data-original-width="886" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8ozvAox0wptR1aksZVr6UC3_oKq990vHblW7Ms7NtBK1cRElhTkGVJ9HqyZrBxXPhXbGEjcPwny5O_X9Mk2kGQTdkRFRjgIQITd9nlGGVIqSSqJ34KzVPCFAOCGxANjTAYKzOSXxTio0/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.30.34.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
「シャッターチャンス」の通知</h2>
撮影だけでよい場合、ヒトから機械への一方的なシャッターの通知で足ります。しかしこのアプリで得たいのは名刺画像であって、ヒトが任意に撮像した結果が最適とは限りません。そこでコンピュータビジョンはシャッターの結果を待つのではなく、より積極的に、コンピュータビジョンが最適な仕事ができる像が期待できるシャッタータイミングをヒトに「通知」する必要が生じてきます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8pc6sQ6dAfYXxad5-P9ZHtKZdOHRvllfBZVZVxuPUq9XgqUKoW3IiBtokxN0taMWuoirA0cG9x47taG6zLBjbn0Ud7-1HK5Ykg5Fp1mnqTsSa7VGShIgjoMwKKgmjVI4j_KdmXEQf8Zj/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.23.38.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="320" data-original-width="904" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8pc6sQ6dAfYXxad5-P9ZHtKZdOHRvllfBZVZVxuPUq9XgqUKoW3IiBtokxN0taMWuoirA0cG9x47taG6zLBjbn0Ud7-1HK5Ykg5Fp1mnqTsSa7VGShIgjoMwKKgmjVI4j_KdmXEQf8Zj/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.23.38.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(通知がないと悲しいことが起こる)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
通知するぐらいならシャッターも押してくれ</h2>
コンピュータビジョンがシャッターチャンスを「知っている」なら、ヒトに教えるまでもなく自動でシャッターを切ってしまえばよさそうです。しかしここには問題がありました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ggaqC9hPTkme1-zIZSEIR2dOlvE9xgD_Esavnf1y17xys-KerM4uYkhHVZYEYIRT4Hp7XcgZAC4DCH9escesthPkKD9AzmsHQlsqe9K8-Hrjq4D4Ohegj54smSh3GwlfwdcAJJMB0OHK/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.28.52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="318" data-original-width="942" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ggaqC9hPTkme1-zIZSEIR2dOlvE9xgD_Esavnf1y17xys-KerM4uYkhHVZYEYIRT4Hp7XcgZAC4DCH9escesthPkKD9AzmsHQlsqe9K8-Hrjq4D4Ohegj54smSh3GwlfwdcAJJMB0OHK/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.28.52.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(機械のタイミングで撮影すれば良さそうだが…)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
名刺が何枚見えているか、ヒトとコンピュータで一致しないことがある</h2>
例えば4枚の名刺を机に並べてカメラをかざしたとします。ヒトはこれを「名刺4枚のデジタル化」と当然考えますが、コンピュータビジョンはこれを安定して4枚の名刺として認識できないことがあるのです。例えば照明条件とか、名刺と机の境界が分かりづらいなどによって、3枚しか認識できないタイミングもあるわけです。<br />
ここでコンピュータビジョン側が「勝手に」シャッターを切ってしまうと、4枚のはずが3枚しかデジタル化されないといった「認識の齟齬」が生じます。このとき、どれが認識されてどれがダメだったのか、ヒトが判断する必要がでてくるわけです。しかしこれ、いささか<b>馬鹿げている</b>と思いませんでしょうか?<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4oolLrscgxo4wrLPNYZD6YbDUAxP0yWtbH0Q2SN6YI1ESggcp9nWMEbUsQ8nNItJRRTzJPCoA4vm9U0ANS7QdFjKCw877sKi8vyBZglehQ_3njRK57pY3lJ2aErv7msmlUuJ1vsFrYlHh/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.24.18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="412" data-original-width="986" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4oolLrscgxo4wrLPNYZD6YbDUAxP0yWtbH0Q2SN6YI1ESggcp9nWMEbUsQ8nNItJRRTzJPCoA4vm9U0ANS7QdFjKCw877sKi8vyBZglehQ_3njRK57pY3lJ2aErv7msmlUuJ1vsFrYlHh/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.24.18.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
認識の齟齬を生まないための「マーカー」</h2>
コンピュータビジョンのためにヒトがシャッターを押すのは馬鹿げていますが、4枚並べたのに勝手に3枚で認識したことにされてしまうのも馬鹿げています。その後始末をやらされるのも不愉快でしょう。そこで、ヒトとコンピュータビジョンが「合意」するための枠組みを提供する必要があります。それが「マーカー」です。<br />
マーカーとはコンピュータビジョンが名刺として認識した結果を可視化するもので、「今ここが名刺として見えています」ということをヒトに伝えるものです。ヒトはこれを受け、コンピュータビジョンの認識が自分と一致しているタイミングでシャッターを押すことになります。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_srZ2VjF9EnS3OWL0U_HlhV0QAduwV_8TJ2oxYC7VPqJCLqOEqGb4Y-VXZYJwDm79wZ-jLwwmLEC-vrB-dp6ywSTOohBFLs2N2p5h25_Qj72KYJeCGhJJYjG8ViETb4dACNjdipZ6aw2p/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.25.24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="402" data-original-width="992" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_srZ2VjF9EnS3OWL0U_HlhV0QAduwV_8TJ2oxYC7VPqJCLqOEqGb4Y-VXZYJwDm79wZ-jLwwmLEC-vrB-dp6ywSTOohBFLs2N2p5h25_Qj72KYJeCGhJJYjG8ViETb4dACNjdipZ6aw2p/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.25.24.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2>
マーカーの検討</h2>
そこで、ヒトに対してコンピュータビジョンの認識をどのように可視化すればよいかを考えました。先行する「認識」系のアプリを調べると、いくつかのパターンがあるようでした。<br />
<br />
<ul>
<li>認識している領域を枠で強調する</li>
<li>認識対象に円形のシェイプを載せる</li>
</ul>
<br />
まず枠で強調する方式ですが、これは「まさにこれが見えている」ということが明瞭で分かりやすい反面、精度良く滑らかに追従しないとモタモタしている印象が強くなってしまうことが懸念されました。<br />
一方円形については「このあたり」といったざっくりした提示で済み、追従が遅れても違和感がないことが分かりました。なおこのことについて <a href="https://www.wantedly.com/companies/wantedly/post_articles/88260" target="_blank"><span style="color: #073763;">Wantedly</span></a> 社が非常に分かりやすい解説をされていて、大変勉強になりました。ありがとうございます。<br />
<br />
<h2>
よりよい「視線」の表現を求めて</h2>
円形が有力であるとは思いつつも、これを超えるコンピュータビジョンの視線の表現を探りたいと考えました。例えば以下のような検討をしました。<br />
<br />
<ul>
<li>四角形:採用例は多いが、対象と同じ形状を提示する場合、ピッタリはまらないと「ズレ」に目がいってしまう点が気になりました</li>
<li>三角形:三角は「満点でない」という意味をもつ場合があります。これを提示するとコンピュータビジョンの認識状態が「充分でない」ように誤解されかねないと考えました</li>
<li>五角形:角が増えると装飾的になってしまい、「視線」のような抽象概念を表現するシェイプとしては適当でないように思われました</li>
<li>多角形:五角形と同様</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV7kncRmJAjMgiq0oNjukwjkwsLzyFUiiLVMwkWpNJEXtN7W8lSrkzPFb8XwtHeTglNW1ESGbNJY68jVyXegNvIB9QGLFnN1MBwO9agJ3NoDmtxZFK6polObxi9XZIA4gW0spClzQ2d-ql/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+22.39.45.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="626" data-original-width="736" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV7kncRmJAjMgiq0oNjukwjkwsLzyFUiiLVMwkWpNJEXtN7W8lSrkzPFb8XwtHeTglNW1ESGbNJY68jVyXegNvIB9QGLFnN1MBwO9agJ3NoDmtxZFK6polObxi9XZIA4gW0spClzQ2d-ql/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+22.39.45.png" width="320" /></a></div>
<br />
<h2>
カメラのメタファーに立ち戻る</h2>
どれも決め手に欠けるなか、これがカメラのシャッターチャンスを伝えるものであることについて改めて考えました。ヒトがカメラで見ているもの、コンピュータビジョンも見ているもの、それは「フォーカス」でした。<br />
<br />
<h2>
フォーカスという視線</h2>
カメラのフォーカスは一定の領域の四隅を強調する形状が思い浮かびます。ここに中心の表現が追加されることもあるでしょう。しかしこれはフォーカスの中心を強調してしまいますが、コンピュータビジョンにはその意図はないため、単に「見ているエリア」としてのフォーカスを試してみようということになりました。<br />
やってみるとコンピュータビジョンが「見ている」ことが分かりやすく、テストした社員も違和感なくこの意味を受け止めていることがわかりました。晴れてめでたくシャノン名刺のマーカーはフォーカスに決まりました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ82iMcy9nQuXGZ3cH7cI3ZDz1M0qUuUqaOgGsYjKzHHaERY20D81tagvRNBoMtGda4S1BzHA9C7ZhZ0VXeyQXyzxH3_DZ9SqMLmSn6V3bWlczKZ_DlgZ2g_N5ptYD7wO057jNUUDlKftA/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+22.36.59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="469" data-original-width="566" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ82iMcy9nQuXGZ3cH7cI3ZDz1M0qUuUqaOgGsYjKzHHaERY20D81tagvRNBoMtGda4S1BzHA9C7ZhZ0VXeyQXyzxH3_DZ9SqMLmSn6V3bWlczKZ_DlgZ2g_N5ptYD7wO057jNUUDlKftA/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+22.36.59.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h2>
今後に向けて</h2>
今回は複数枚の名刺をデジタル化する際の、ヒトとコンピュータビジョンのコンフリクトをどのように乗り越えるのかという観点からマーカーを検討しました。しかしそもそも一度に一枚しか撮影しないのであればシャッターチャンスについて意見の齟齬は生じないはずです。コンピュータビジョンが「見えた」と思ったならその時が最善であり、自動でその画像を取得すべきです。この時、ヒトはその過程を見守る必要すらありません。名刺にカメラをかざしてさえいれば、よそ見していたってコンピュータビジョンがしっかり見てくれているわけです。つまりヒトはノールックで、コンピュータビジョンだけが見ている、それでいて必要な情報が抽出できる、そうしたしぐさが可能になるような方法も検討できたらと個人的には思っています。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGPlyRwm8HkoAP3iEAL62BxfTmoPf8E6uC62WpC2bCw6dGXcVIovY5KoRGkEi-WkAq9rfL1hX43xYpu01NlX9Xgo66Us78peBms40eBd4EGQHQA3P4mwO72Qkvkq6U8BuskDu_G7K1oPW4/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.28.52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="318" data-original-width="942" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGPlyRwm8HkoAP3iEAL62BxfTmoPf8E6uC62WpC2bCw6dGXcVIovY5KoRGkEi-WkAq9rfL1hX43xYpu01NlX9Xgo66Us78peBms40eBd4EGQHQA3P4mwO72Qkvkq6U8BuskDu_G7K1oPW4/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-06-18+23.28.52.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
(一枚に限定すればこのやり方も便利そう)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
いかかでしたでしょうか。シャノン名刺の名刺撮影機能がどのようにして生まれたのか、その一端をご紹介しました。これをご覧のみなさんにもぜひ使っていただけたらと思っております。ueharakhttp://www.blogger.com/profile/13902767447392994148noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-56080387856168679962018-03-12T14:41:00.000+09:002018-03-13T13:57:40.245+09:00JaSST’2018 に行ってきました!<h3>
</h3>
みなさん、こんにちは!<br />
han@QAです。<br />
<br />
3月7日~8日開催の<a href="http://jasst.jp/symposium/jasst18tokyo.html" target="_blank">JaSST’2018</a>に行ってきましたので、レポートをまとめたいと思います。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtDckAUOLj8c2lrXGozNIi456Ko1H0H2DEthVQJZ2Xf0Kl8myYx3RnKr03MMwc3faMzhpZ3f3CM4PC_rTE90HuN4zCgQsLND9LRmn9xpGsv4gdRpILnkAcOvg49nDxQdL1FG1yml6ILGY/s1600/jasst18tokyo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="100" data-original-width="715" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtDckAUOLj8c2lrXGozNIi456Ko1H0H2DEthVQJZ2Xf0Kl8myYx3RnKr03MMwc3faMzhpZ3f3CM4PC_rTE90HuN4zCgQsLND9LRmn9xpGsv4gdRpILnkAcOvg49nDxQdL1FG1yml6ILGY/s400/jasst18tokyo.png" width="400" /></a></div>
<br />
<h4>
「基調講演:Googleのジョン・ミッコ氏による継続的インテグレーションテストの講演」</h4>
Google社のリリース前のテストで使っているツール・プロセスの講演でした。<br />
Google社の自動テストは420万個存在し、ソースコード2,3行の改修で全てのテストを実施するのは、時間がかかるため非現実的です。<br />
でもbranchは1つしかありません。<br />
そこで、リグレッションテストはバイナリの依存関係で実施するテストを選別しています。<br />
コードをリポジトリにsubmitした後は、平均して1.5回の別の組み合わせを自動的に自動テストを選別し、実行しているそうです。<br />
<br />
Googleのような巨大プロダクトの集合体が、スピーディーにリリースできた理由が少し分かった気がします。<br />
全テストがPASSしなくても、費用対効果があるならばリリースをする、という考え方が斬新な印象を受けました。<br />
<br />
Googleでは自動テスト運用でflaky(不安定な、一貫性のないという意味)なテストは、0.2%だそうです。<br />
非常に少ない割合で驚きました。それでもflakyなテストを再実行するとGoogle社のコンピューティングパワーを3%消費するので課題のようです。<br />
<br />
弊社でもflakyな自動テストは悩みの種です。<br />
まずは、テスト観点を整理して、下記方式のテストを必要最小限に抑えることが大事かと思いました。<br />
<br />
・Selenium WebDriver<br />
・モバイル<br />
・マルチスレッド<br />
現在既に存在するテストを全て変更することはできませんが、新規サービスはもちろん、少しずつ既存のflakyな自動テストを優先して改善していきたいですね。<br />
また、Google社とは状況は違いますが、根拠を示した上でリリース前に全自動テストを実行するのではなく、十分な量の自動テストに絞ってスピーディーにリリースしていきたいと強く感じました。<br />
(レポート:kzhirata)<br />
<br />
<h4>
「計画立案とふりかえりでリスクを捉えよう!~SaPIDTOC:未来予想型チーム運営WS(テスト編)~」</h4>
<div>
<div>
SaPIDという自律型プロセス改善実践手法を使って、プロジェクトのテスト工程を通じて継続的かつ効果的な改善を続けるためのチームマネジメント、リスクマネジメントの手法を体験するセッションでした。</div>
<div>
(ほぼ一日使って実施するカリキュラムを2時間半で短縮してやりました。)</div>
<div>
<br /></div>
<div>
SaPIDは、簡単に言うと過去の人間の経験に基づいたプロアクティブに自律的に行動して、プロジェクトを進めていくやり方です。</div>
<div>
実際にやってみて、具体的な問題を発見することが非常に難しいです。</div>
<div>
具体的な問題というのは、対策として行動に落とし込むことができるレベルまでに問題を分解する必要があります。</div>
<div>
また、その問題を放置したら、どんな悪い結果になるのかを書き出すことで、それが本当に問題なのかどうかも認識できます。</div>
<div>
このトレーニングは、効果が出るまであきらめずに何度も繰り返し実際のプロジェクトでやる必要があります。</div>
<div>
<br /></div>
<div>
ワークショップを体験して、一番印象に残った言葉は、「リスクマネジメントとは、より大きなリスクを取ることを可能とすること」です。</div>
<div>
問題が顕在化する前に対策を打って捻出した工数で、より価値のあるチャレンジをする。少なくても自分が参画するチーム、プロジェクトはそうありたいと感じたワークショップでした。</div>
</div>
(レポート:kzhirata)<br />
<span style="font-weight: 700;"><br /></span>
<br />
<h4>
<span style="font-weight: 700;">「コードを書きながら学ぶテスト駆動開発」</span></h4>
テスト駆動開発 (TDD) 第一人者である和田さんのチュートリアルに参加してきました。<br />
<br />
TDDサイクル<br />
1.次の目標を考える<br />
2.その目標を示すテストを書く<br />
3.そのテストを実行して失敗させる(Red)<br />
4.目的のコードを書く<br />
5.2.で書いたテストを成功させる(Green)<br />
6.テストが通るままでリファクタリングを行う(Refactor)<br />
7.1.から6.を繰返す<br />
<span style="font-weight: 700;"><br /></span>
TDDのためのスキル<br />
Todo、問題を小さく分割する<br />
歩幅を調整する<br />
テスト⇒仮実装⇒三角測量⇒実装<br />
テスト⇒仮実装⇒実装<br />
テスト⇒明確な実装<br />
テストの構造化とリファクタリング(重複の除去)<br />
<br />
・ハードルを低くして少しずつ初める<br />
・失敗する値を入れて失敗することを確認する return 0;<br />
・期待値を先に書く、細かく考える<br />
・予想通りの失敗はプログラミングの状態はやや良い方だ(前に進めている証拠)<br />
・unitテストではテスト間の依存関係を作ってはいけない<br />
・テストを増やすのは簡単、消すのは簡単ではない、消すにも消せない、テストを作った本人がいないとそのテストの重みをわからない<br />
・不用なテストは用が済んだらその時に消す、数年経ってからだとわからない<br />
⇒動作するコードをリファクタリングすると動かなくなることもある、現場では動くコードに手を入れるなとは噂になるわけです。<br />
<br />
デモみながら、TDDとペアプログラミングも体験し、楽しい時間でした。<br />
個人的には開発初心者にテストの大事さをわかってもらえるのに良いものではないかと思いました。<br />
(レポート:han)<br />
<br />
<h4>
「不具合管理⽅法の改善によるテスト⼯程の効率化事例2018」</h4>
<div>
<div>
いつまでにたっても不具合が出続ける。もう少しでおわるはずなのにテスト工程がおわらない。どの現場でもありうるこういった状況を改善したことの話でした。</div>
<div>
<br /></div>
<div>
背景</div>
<div>
テスト工程を受託していて、開発プロジェクト毎で人の入れ替わりによって製品知識にばらつき発生している。(テストのためのテスト対象の知識がばらついている。)</div>
<div>
<br /></div>
<div>
課題</div>
<div>
不具合修正に対する確認が不十分で不具合が出続け、誤った不具合情報で無駄工数が発生</div>
<div>
<br /></div>
<div>
原因</div>
<div>
テスト工程を受託していて、開発プロジェクト毎で人の入れ替わりによって製品知識にばらつき発生している状況でテスト実施</div>
<div>
<br /></div>
<div>
打ち手</div>
<div>
・原因分析に基づいて検証</div>
<div>
・不具合を1つずつ、きっちりクロース</div>
<div>
・Q&A管理のDBの運用</div>
<div>
・不具合以外の現象に無駄工数を使わない</div>
<div>
・動作が仕様か不具合か困った時にQ&A管理のDBへ起票</div>
<div>
(以前は不具合管理DBへ起票していた)</div>
<div>
・不具合管理の運用フローを改善</div>
<div>
・不具合の混入原因分析</div>
<div>
・類似確認(積極的にソースコードで確認)</div>
<div>
・不具合原因から類似不具合が潜在している可能性のある機能を全部洗い出す</div>
<div>
・混入原因から確認範囲を絞りこめないかを検討する</div>
<div>
・流出原因分析</div>
<div>
・追加テスト</div>
<div>
・不具合が本来どの工程で検出すべきかをさかのぼって確認</div>
<div>
・システムテスト⇒機能テスト⇒単体・結合テスト⇒コードレビュー⇒仕様レビュー</div>
<div>
・前工程で検出すべきであるものだとわかったときは機能を広げて、類似機能も追加でテスト</div>
<div>
・打ち手を回すための工夫</div>
<div>
・リーダミーティング、品質ミーティング</div>
<div>
</div>
<div>
効果</div>
<div>
不具合検知を前倒しできた</div>
<div>
誤った不具合情報の削減、無駄工数を削減できた</div>
</div>
<div>
<br /></div>
<div>
所感</div>
<div>
仕様が明確ではないが暗黙的に認めている部分はありがちかと思いました。</div>
<div>
そういった不明なところをどう判断して、仕様として明確化するか開発の早い段階で関係者と調整・決定し、テストする再に仕様かどうかの確認のために使っている時間を減らせば、テストにもっと時間を使えて良い結果を出せるのはないかと。</div>
<div>
といっても忙しい日々になかなかそうならないのが現実で不明なところへの危機感を持つのが不具合を減らせる1つの道だと改めて思いました。</div>
<div>
(レポート:han)</div>
<div>
<br /></div>
<div>
<h4>
「無料で始める!「龍が如く」を面白くするための高速デバッグログ分析と自動化」</h4>
<div>
ゲーム「龍が如く」の開発においてデバッグログ解析を有効に使った事例の話でした。 デバッグログをうまく解析すれば、</div>
<div>
バグの検出、ゲームの面白さも向上できるのではないかということです。</div>
<div>
<br /></div>
<div>
課題と解決について</div>
<div>
まずログを集めて分析する基盤がない。</div>
<div>
<br /></div>
<div>
kibana + fluentd + elasticserchで作った。OSSなので無料でできた。またfluentdがスキーマレスなのでsqlとか詳しくなくても運用できた。</div>
<div>
ログの埋め方が開発者によってバラバラでうまく分析できない。</div>
<div>
<br /></div>
<div>
形式をjsonで定義して使ってもらうようにお願いした。しかし使えてもらえなかったので自分で埋めた(!)</div>
<div>
ログとして残ったものの意図がわからない。強制移動、レベルMAXなどのデバッグモードで実施したテストなのか、そうじゃないのかがわからない。</div>
<div>
<br /></div>
<div>
オートプレイするツールを作った。これはプレイヤーが操作できる範囲にとどめているので、オートプレイのログであることをわかるようにして収集した。</div>
<div>
といういくつもの課題を解決して(さらに継続的に改善させて)、バグの検出率を大きく上げたという結果でした。 また、テストプレイ時のログを収集することによってゲームバランスの調整にも活用でき、より良い製品にできたとのことです。</div>
<div>
<br /></div>
<div>
所感</div>
<div>
バグの種類として、メモリやCPUの使いすぎという手動では見つけるのが難しい(再現させるのが難しい)ものがあり、それらのバグを発見できるようになったのはものすごい効果が高いと感じました。また製品のUX向上にも活用したというのは大変興味深い事例だと思いました。</div>
<div>
ただ、オートプレイは210台のPCを使っていたという話なので、決して無料ではないと思いました(笑)</div>
<div>
(レポート:inomata)</div>
<div>
<br /></div>
<h4>
「静的解析とチーム間レビュープロセス」</h4>
<div>
MathWorks社による静的コード解析ツールPolyspaceの紹介です。</div>
<div>
<br /></div>
<div>
製品特徴など</div>
<div>
ソフトウェア開発においてバグは上流で見つけるほどコストは下がります。コードレビューを実施してビルドする前に問題を検出するのは上策(というか当然)ですが、目視によるレビューはやはり限界があります。</div>
<div>
<br /></div>
<div>
Polyspaceは動的テストじゃないと難しいオーバーフローや、使用されないコードの検出も行ってくれるそうです。またMISRA-Cなどのコード規約に則しているかも見てくれるらしいです。</div>
<div>
<br /></div>
<div>
所感</div>
<div>
形式にのっとって解析して問題を見つけられるのであれば、やはり自動で行うほうがいいですよね。テストケースなんかも自動でレビューするツールとかあるといいんですが。(その前にテストケースの形式を標準化させる必要があるんですけど)</div>
<div>
※MISRA-CとはC言語でコードの品質を保つためのコード規約らしく、これに準拠しないと製品を販売できない(しない)という会社もあるみたいです。知らなかった。</div>
<div>
(レポート:inomata)</div>
</div>
<div>
<br /></div>
<div>
<h4>
「Web.JaSST ~ウェブ系QAがみんなのお悩みに全力で提案を返す会~」</h4>
Web業界のQAの方々によるパネルセッションです。事前に、あるいは会場からお題を集めて登壇者が回答していく形でした。内容を抜粋してレポートします。<br />
<br />
Question<br />
・網羅的にテスト観点を出すにはどうしたらいい?<br />
Answer<br />
・大きい項目をとらえてから詳細化する<br />
・漏れやすいところをテンプレート化してまとめておく<br />
・要件をとらえる。業務知識が必要<br />
・レビューなどコミュニケーションで認識合わせを行う<br />
Question<br />
・バグの分析やメトリクスの収集はやってる?どうやってる?<br />
Answer<br />
・障害情報から分析。再発防止策を確立させるために混入箇所の分析も行っている<br />
・信頼度成長曲線をつくる。それでリリースの目途を立てている<br />
・メトリクスとしてはバグの件数、重要度、機能、人、クラッシュ率、修正までのリードタイム<br />
・バグのリオープンの回数<br />
Question<br />
・QAって給料安くない?適正価格ってどれくらい?どうやったら給料上がる?<br />
Answer<br />
・適正価格なんてない!事業に貢献できるならいくらもらってもいいじゃないか!<br />
・スキルアップして会社にアピール<br />
・求められることを行う(ちゃんと自分のキャリアアップとすりあわせしておく)<br />
・プロジェクトの困りごとを解決して貢献する<br />
Question<br />
・プログラムできるQAを雇いたいけど見つからない(おそらくコードベースの自動テスト・を開発させたいという意図)<br />
Answer<br />
・同じく苦労している。開発エンジニアを募集して口説く。あるいは社内でコンバートする<br />
・マニュアルテストできる人との兼任は、炎上したときマニュアルテスト要因として取られてしまう<br />
・応募してくる人は出来上がったフレームの上で自動テストやりたい人が多い。自動テストのフレーム、インフラから開発する部分はニーズある(これをお願いしたい)<br />
Question<br />
・QAチームの仕事の範囲は?<br />
Answer<br />
・プロジェクトの隙間のタスクを拾っていく ※この質問は登壇者がほぼ同じ意見で、テスト等に限らないでプロジェクトに携わって自分たちで解決できることを積極的に拾っていくという意見でした。<br />
Question<br />
・テスト管理ツールってどうしてる?エクセル最強じゃない?(テストケースの管理という意味だと思われる)<br />
Answer<br />
・エクセルで困ってないならエクセルで十分。エクセル最強。<br />
進捗などのメトリクスをとるためには自動で集計できるツールがあったほうが便利<br />
<br />
所感<br />
WebなのでWeb系の自動テストに関連することが多いのかと思っていましたが、テスト、QAという職種全般に言えるような内容でした。<br />
採用の話から伺うに、最近では自動テストもできる人が重宝(というかスタンダード)になりつつあるみたいですね。あとテストケース管理ツールはやはりエクセルで行ってる組織が多いのでしょうか。スタンダードがないというのもありますが。<br />
(レポート:inomata)</div>
<div>
<br /></div>
<div>
<h4>
「テスト会社のテストリード達は どのようにテストを 成功に導いているのか?」</h4>
<div>
テスト会社の ベリサーブさんによるセッション</div>
<div>
今年は、昨年よりもやや若手といわれる方々が パネリストとして登壇されていました。</div>
<div>
良いテストとはどういうテストか、良いテストエンジニアとは、どうメンバーを成長させるか、20年後の自分はどうなっていたいかなどをパネリストの方がはなされていました。 ベリサーブさんはテストの会社なのでテストに対する意欲が高い方が多く層が厚いですね。</div>
<div>
(レポート:kmt)</div>
<div>
<br /></div>
<h4>
「 組織改善のための PMOのあり⽅と PMOの育成に関して」</h4>
<div>
テスト会社の ベリサーブさんによるセッション。ベリサーブさんでは、テストだけではなくproject management officeの支援も行っているそうです。</div>
<div>
PMOには支援型や窓口型など、いくつか型があり業務は多岐に渡るので、役割と範囲を定義して業務をするとよいとのことでした。</div>
<div>
また、育成に関しては広い視野を持って、問題を可視化する為に、まずは図にイメージを描いて学習し、そのあと、必ず実践のトレーニングをする。</div>
<div>
この繰り返しをしてトレーニングを積むのがよいとのことでした。</div>
<div>
(レポート:kmt)</div>
<div>
<br /></div>
<h4>
「 探索的テストにおける ストーリーベースのアプローチ」 </h4>
<div>
一般的な探索的テストの方法だとテスターとのコミュニケーションが難しい場面があったので、ストーリーベースのアプローチをして不具合検出率が上げられないかといった取り組みでした。</div>
<div>
結果として数値に差がなかったとのことでしたが、データを取得した母数やテスターのバックグラウンドを考慮していないのでそのあたりがどういう風に影響したかはちょっとわからないようでした。</div>
<div>
本当に最初の取り組みを公開してくださったので、ご自分では内容が薄いといったようなことをおっしゃっていましたが、こういうふうにチャレンジして、試行錯誤するといったような取り組みを公開してくださるのは取り組んだことのない人にもどうやって試行錯誤するものなのかが追体験できてよいのではないかと思いました。</div>
<div>
継続的に取り組んでいかれるということだったので、今後の取り組みにも期待しています!</div>
<div>
(レポート:kmt)</div>
<h4>
<br />「「UI⾃動テストツールとAI」 〜AIを使った⾃動テストの 「今」と「未来」〜 」</h4>
<div>
TRIDENTの伊藤 望さんが、機械学習を活用した自動テストサービスMagic Podの現状の仕組みと今後の展開を紹介してくださいました。</div>
<div>
Magic Pod には画面キャプチャだけでテストを作成できる「テスト実行時検索方式」とシステム情報を活用した「テスト作成時検索方式」があり、現状では 「テスト実行時検索方式」だけでは要素の読み取りが厳しいところがあるので 、要素を読み取ったあとに「テスト作成時検索方式」で手直しして使用するのがよいそうです。 テスト実行時にはAppiumスクリプトに変換されて実行されます。</div>
<div>
また、「テスト実行時検索方式」の画像の解析にAIを使用しています。AIの学習が意図した通りかというのは正答率でエンジンの性能を測る交差検証という方法を使うそうですが、正答率の数字では気づかないこともあるそうです。その為、MagicPodでは開発中に正答率をみつつ自動化テストケースでリグレッションを繰り返しているとのことでした。</div>
<div>
学習データを増やしたことや学習しなおしたら自動テストが失敗する場合もあるそうなのですが、その場合は、間違えたデータを学習データに追加したり、再学習したり、機械学習ロジックの改良をしたりするそうです。ただ、どうしても無理な場合は諦めることもあるようです。機械学習は、厳密さを求めるところに利用するというよりは、タグ付けやリコメンド機能のような不安定さを許容できる機能や、工場の不良品検出のような人間がやっても誤差があるのでそれよりも精度が高いと思われるようなことに利用するのがいいとのことでした。</div>
<div>
将来的には人間向けの手動テストケースをAIが理解し自動実行できるようにしたいとのことでした。</div>
<div>
(レポート:kmt)</div>
<div>
<br /></div>
<h4>
「NGTの記法を応⽤した 不具合分析からのテストの補強」</h4>
<div>
ベリサーブの吉川 努さんによる事例発表。</div>
<div>
テスト開発のための記法として 西 康晴さんが考案したNGT(Notation for Generic Testing)があり、その記法を応用して不具合分析をし、テスト補強をして不具合を発見できたというセッションでした。</div>
<div>
記法を応用することで一見関連性のないと思われる不具合を結びつけて、操作パターンを洗い出して、それに対して探索的テストを実施することで、見逃していたであろう不具合を見つけるというのは、簡単そうに見えても実はきちんと考えることができる人でないと難しいのではないかと思います。</div>
<div>
これをすることによって、テストの経験があまりない方にもイメージがつきやすくなり、経験がある方とも相互理解が進みやすくなると思いました。</div>
<div>
(レポート:kmt)</div>
<div>
<br /></div>
<h4>
「「海外のテスト技術動向」 〜カンファレンス、国際会議、 海外テストチームの現場から〜 」</h4>
<span style="background-color: white; color: #222222; font-family: "arial" , sans-serif;">⾠⺒ 敬三さん</span>による海外テストカンファレンス紹介、yahooの⼭⼝ 鉄平さんによる実際のカンファレンス参加体験、cookpadの松尾和昭さんによる海外テストチームでの現場のお話の3部構成でした。海外テストカンファレンスは、ヨーロッパが多く、アメリカも多いのですが、日本のJSTQBのような団体が世界各国にあるので、Jasstのような感じで様々な国でテストカンファレンスが行われていました。マレーシアやロシア、エストニアなんかは想像がつきましたが、ウルグアイなどでもテストカンファレンスが行われていたり、イスラエルの方主催でオンラインのカンファレンスが開催されていたりするのが聞けて世界は広いなと刺激になりました。また、実際に海外ではどのような雰囲気でどのような内容が話されているのかなと思っていましたが、STARWEST2017とAgileTestingDays2017に参加された山口さんのおかげで雰囲気や目的がそれぞれ違っているのがわかりました。お値段もかなりするので、もし参加することがあれば事前にリサーチして目的をもって参加するのがよさそうですね。<br />
<div>
また、cookpadの松尾さんは現在、海外事業部に所属されていてイギリスオフィスからみると日本でリモートしているメンバーとのことでした。</div>
<div>
今後こういう働き方もふえていくかもしれませんね。イギリスでの採用も試行錯誤でされていて、そのあたりのお話を聞かせていただけたのは貴重でした。</div>
<div>
(レポート:kmt)</div>
<h4>
<br />「招待講演:私が経験した ソフトウェアテストの変遷 」</h4>
<div>
ソラミツの柴田芳樹さんが、 ご自身の経験をもとに時代毎にどのような開発をして、テストをしてこられたかをお話してくださいました。</div>
<div>
特に印象に残っているのが、 1990年代までの夜間ビルドから、2000年以降は継続的インテグレーションの時代、2010年以降は、継続的インテグレーションから継続的デリバリーへと変遷してきたお話で、1990年代にリリースが予定どおりにいかなかったという失敗談から得た教訓がフィードバックループが2週間と長すぎたとお話されていたことです。このような教訓がいろんなところであったからこそアジャイル開発へと続いているのだなと感じました。</div>
<div>
また、1990年代までの手作業によるテストから、2000年以降はテスト駆動開発による自動化されたテストがソフトウェア開発の基本だったそうですが、なぜ取り組もうかと思ったかというと、もうそれしか方法がなかったというようなことをおっしゃられていました。ですが、今も自動化されていないところもたくさんあるので、時代とか量が多いとかパターンが多いとかではなくて、いつの時代というよりはやる人の考え方なのかなと思いました。</div>
<div>
柴田さんは、「今日ではバージョン管理、継続的インテグレーション、自動テストを実践するのは強みではない。それらを実践しないことがソフトウェア開発組織の「弱み」となる。組織としてそれらの実践を推進しない、あるいはサポートできないマネージャも「弱み」。」という名言をおっしゃっていました。</div>
<div>
(レポート:kmt)</div>
<div>
<br /></div>
<h4>
「クロージングパネル: アジャイル・⾃動化時代の テストの現場のリアル」</h4>
<div>
googleの John Miccoさん 、 cybozuの天野祐介さん 、 cookpadの 松尾和昭さん 、yahooの⼭⼝鉄平さんがパネリストでした。</div>
<div>
基調講演でもお話されていましたが、 googleは、莫大な数のテストを莫大なコンピューターリソースを使ってテストするのが厳しくなってきているので、分析をしていかに関係あるテストだけを実行するかに注力しているとのことでした。その他の会社の方は、製品の数だったり、組織の規模感だったり、各々の考え方でそこまでではありませんが、どの企業も自動化は当たり前にされていました。</div>
<div>
cybozuは、1年くらい前からアジャイルをはじめたそうですが、以前よりも開発スピードが上がって、最後のイテレーションに改善活動がいれられるようになったとのことでした。1年くらいで成果が出せるのは、何か困難やトラブルがあっても、チームメンバーがお互い助け合うという文化が共通認識としてあるのが大きそうでした。</div>
<div>
cookpadは、webのほうでは、修正してテストして本番にデプロイされるまでが20分程度ということで、googleのJohnMiccoさんもgoogleより早い!とおっしゃってました。</div>
<div>
yahooではQAという職責はなくなったそうですが、チームとして品質に責務をもっているとのこと。googleもそうですが、アジャイル開発をして、リリースまでのスピードアップを目指すようになると自然とそういう形になってくるなと感じました。</div>
<div>
(レポート:kmt)</div>
</div>
<div>
<br /></div>
<div>
<span style="background-color: white; font-family: "helvetica neue";">いかがでしたでしょうか?</span></div>
<div>
<br /></div>
<div>
<div>
今回も各会場でテストに関わる取り組みについて、様々な話を聞くことができました。</div>
<div>
様々の事情の中で品質向上のためにやっている施策や努力した話しを聞くと、自分ももっと頑張らなきゃと向上心上がりますよね!</div>
<div>
品質に関わる業務をやっておられる方はもちろん、テストのことをもっと知りたい開発エンジニアにとっても、本当に良いイベントなので、行ったことの無い方はぜひ参加してみてください。</div>
<div>
<br /></div>
<div>
それでは!</div>
</div>
<div>
<br /></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-680316439237876512017-12-25T12:00:00.000+09:002017-12-25T12:00:41.788+09:00 システムテスト自動化カンファレンス2017-2に行ってきましたよ!(ShanonAdventCalendar2017・25日目)メリークリスマス!<br />
<br />
Shanon Advent Calendar 2017 の25日目。<br />
トリを飾る生産性チームのinomataです。<br />
<br />
最後なので、1年間の総復習的な成果や反省にできればかっこよかったかな?とか思いながら勉強会参加レポートを書いてます。<br />
ということで、去る12/10に行われたシステムテスト自動化カンファレンス2017-2に行ってきたので、個人の感想と意訳と共にまとめたいと思います。<br />
<br />
公式<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzl9AebHxUH7D_gAEKwlDYYzYDObZHJtk3YX7FJWaRFCJuJlOPXqpD8G7Nfv9CyErMhMBD86hZareeq-VsFM75T7lSleOacYADxdCX6YJqjx4KAT0klptZqLJ8HRGPmm_GbXk8rNO8c8/s1600/customLogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="142" data-original-width="501" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzl9AebHxUH7D_gAEKwlDYYzYDObZHJtk3YX7FJWaRFCJuJlOPXqpD8G7Nfv9CyErMhMBD86hZareeq-VsFM75T7lSleOacYADxdCX6YJqjx4KAT0klptZqLJ8HRGPmm_GbXk8rNO8c8/s320/customLogo.png" width="320" /></a></div>
<br />
https://sites.google.com/site/testautomationresearch/<br />
発表資料は順次公開されると思います。<br />
<br />
システムテスト自動化カンファレンスは前回開催されたのが今年の2月で、今年2回目の開催です。しかも今回は、部屋ごとにセッションを変えたりと回を重ねるごとに規模が増しているようで、自動テストの注目度の高さがうかがえます。<br />
<br />
<br />
<br />
<h4>
</h4>
<h4>
</h4>
<h4>
テスト自動化と機械学習(STAR機械学習分科会紹介) / 早川 隆治さん(STAR)</h4>
<br />
このカンファレンスの主催でもあるテスト自動化研究会(STAR)で行ってる、機械学習を使ったテストの自動化への応用を検討する分科会の紹介でした。<br />
アルゴリズム、ハードウェアといった基盤が安価に手に入る時代になって、機械学習が身近になってきました。それをテストの自動化にも応用できないか?ということでいくつか検討されているようです。<br />
例えば、自動テストのエラーメッセージを学習データとして類似バグの検出、画面の崩れ、ユーザビリティからの逸脱の検出などが紹介されてました。<br />
これらはまだアイディアの段階で特に具体的なものは特にありませんでした。<br />
また発表資料には、すでにある機械学習等を使ったツールがいくつか紹介されていて、大変興味深いものでした。<br />
<br />
別のセッションの話での話で、機械学習やディープラーニングは自動テストのツール導入やコンサルタントをしてる人はよく言われるそうです。<br />
「AIでいい感じにできないか?」って。ツールを求める人はまだ、というかまた夢を見るようになってきたのかもしれません。<br />
実際、「AIでいい感じ」にできたら面白そうですけどね。<br />
<br />
<br />
<h4>
翻訳者の同僚が語る「初めての自動テスト」 / 太田 健一郎さん(STAR)</h4>
「初めての自動テスト」という本の紹介です。<br />
翻訳者の玉川紘子さんが出られないというので、代打で太田さんが発表することになったそうです。<br />
webシステムにおける自動テストの考え方やプロセスをどうすれば上手くいくかという内容から始まり、具体的にコードを書いて動かしてみる内容のようです。中でもテストのピラミッドという考え方がすごく重要で、これを達成するようにプロセスを作っていかないとダメで、<br />
「私が行く現場はすべてこのピラミッドが逆転している」と言っていました。<br />
<br />
そのほかセッション中でいくつかに気になった事をいくつか紹介。<br />
・UIテストはいらなくなったら捨てられるようにする。捨てられるようにするには作りやすくしてコストを下げないといけない。<br />
・自動テストは7割の打率でも3割の調査コストが発生する。不安定なテストはコストが高いからダメ。<br />
・ピラミッドが逆転して出来上がったものを後からどうにかするのはすごく難しい。アプリ含めて最初からそこに目指しておくべき。<br />
・自動テストはプログラム感を出すと、非プログラマ(SIer、テストエンジニア)が抵抗感を出す。実際現場、自動テストでもVBAを使ってるという話をしたら「自分でもわかる」と協力を得られた。<br />
・「ツールを買ったから」といってそれに固執するのは失敗しやすい<br />
・自動テストは全員参加で行う。他人のやること、といって壁を作るとうまく回らない。<br />
<br />
ダメな感じで出来上がったものをどうにかしていくのはすごく難しい、というのは何回もおっしゃっていましたが、これは地道にやっていくしかないのでしょうか。。<br />
<br />
<br />
<h4>
楽天のレジャー・サービスにおける自動化の取り組みとその効果 / Fumikazu Fujiwaraさん</h4>
自動テストを導入したことの事例発表です。<br />
手動テストのみで自動テストが無かった時には、テストの実施と開発へのフィードバックがボトルネックになっているという問題がありました。<br />
分析すると、<br />
<ol>
<li>データの作成が時間かかる</li>
<li>パターンの網羅が複雑で大変(手順ミスなどがある)</li>
<li>リグレッションテストに時間かかる(影響範囲テストの結果が開発に早く通知できない)</li>
</ol>
という問題にフォーカスされ、これらが自動テストのツールを導入することで<br />
<ol>
<li>データの作成を自動で生成する</li>
<li>パターン網羅は同じ手順が繰り返し実施できる</li>
<li>リグレッションテストは実施の自動化+CI+チャットツールの組み合わせで素早くフィードバック</li>
</ol>
という感じで改善されたという事例でした。<br />
ツール選定では、要件と自分たちのスキルを照らし合わせて有償ツールを選んだとのこと。有償ツールは導入コストが高いので敬遠されがちだが、チームのスキル不足とスクリプトの開発のしやすさを勘案して、有償のほうを選んだとのことでした。ランニングコストまで考えないとダメですね。<br />
<br />
<br />
<h4>
How we automate E2E tests at Mercari / 根本 征さん</h4>
自動テスト関連の活動の事例発表です。<br />
自動テストに関連する活動を行う上で、<br />
<ul>
<li>認知</li>
<li>安定化</li>
<li>not only test automation</li>
</ul>
をポリシーに掲げているとのこと。<br />
「認知」とは、知って使ってもらうことの取り組み。知られていないと同じようなフレームワークが乱立したりで無駄が発生してしまう背景があったそうです。また、使ってもらうためには使いやすいようにしておく(jenkinsの実行を押すだけで結果がわかる)仕組みも重要とのことです。<br />
「安定化」とはコスト削減の取り組み。自動化の失敗を調べるのは結構時間がかかって、コストが高いです。スクリーンショットをとるなどで原因を特定しやすくしているとのことです。環境のメンテナンスも重要で、最近は自前で用意するよりもクラウドサービスに寄せてしまったほうが楽になる場合があり、積極的に利用しているという話でした。<br />
「not only test automation」とは、テストスクリプトを作成するだけではなく、関連する事柄にも自動化の仕組みを取り入れる取り組み。テストデータの自動生成、リリースの作業、検証端末の管理など、開発からリリースに関連するプロセス全体で自動化に取り組んでいるようです。このあたりはZapierというツールをうまく利用しているみたいです。<br />
<br />
<br />
<h4>
SI-Toolkitでテスト自動化を実現する現場で遭遇した出来事 / 桑原 雄一さん</h4>
SI-Toolkit WT というツールのデモと導入の話でした。<br />
https://sitoolkit.org/<br />
SI-Toolkit WTは発表者の桑原さんが作成されているもので、Seleniumをベースにした自動テストのツールです。特徴としては、<br />
<br />
<ul>
<li>テストケースがxlsから作成できる(SeleniumIDEのhtmlを表形式にしたデータ構造になっていた)。</li>
<li>並列実行が可能。</li>
<li>クロスブラウザにも対応</li>
</ul>
など、SeleniumIDE同様、非プログラマでも扱いやすいツールになっていました。詳細は公式で参照していただけたらと思います。<br />
割と簡単に非プログラマでも扱えるツールですが、導入をするというのは難しいもの。「簡単であろうと、今から新しいものを覚える」という事に抵抗感が出やすいので、導入の際にはプロジェクトの計画の中に、学習等の準備計画もしっかり入れておくことが重要。これは工数の話だけでなく、どのフェーズに来たら誰がどの作業を行うという、プロジェクト全体の作業計画まで落とし込むと上手くいったとのことです。<br />
また、自動テストを定着させるためにも専任のスタッフを用意したほうが良いとのことでした。<br />
<br />
<br />
<h4>
自動化困難な状況での活動方法 / 石川 達也さん</h4>
Friendryを使った自動テストの実施に関するセッションでした。<br />
Friendryとは発表者の石川さんの会社が開発しているWindowsアプリを自動で操作するライブラリです。<br />
http://www.codeer.co.jp/<br />
キャプチャリプレイツール(マウスやキーの操作を記録、再生させるツール)と違って内部APIを操作するので、動作が安定しています。<br />
自動テストでは正確さ(安定性)こそ重要で、正確さのテスタビリティを上げるために専用のAPIを作るとのこと。テスト用のAPIを作成することを「ピンをはやす」と表現していました。ハードウェアがテストのために専用のピンをつけることに由来するみたいです。<br />
自動テストは万能なツールではないので、できないものはあきらめる(別の手段で品質を担保する)というのも重要です。本セッションの中で「画像の比較をするのはとても難しい」という話がありました。画像の比較は1ドットずれるとNGになってしまいます。また、1ドットのずれを許容するように作るにしてもそれはそれで難しくなるし、何ドットのずれまで許容するか?という事を考えることも難しくなります。<br />
<br />
<br />
<h4>
LT</h4>
LTは5名の方が登壇していました。面白かったものとしていくつか紹介します。<br />
<br />
<ul>
<li>テストクライアント用のPCを用意するにしても、PCは高いし置く場所もない。クラウドも高い。ということでRasberryPIでテストクライアントを作った。省スペース+安価で用意できた。</li>
<li>Appiumは巷のうわさほど楽では無く(環境構築、OS互換性など)結構しんどい。モバイルの自動テストは自分たちにあったツールや手段をよく検討したほうがよさそう。</li>
</ul>
<br />
<br />
<br />
<h4>
最後に所感など</h4>
技術的な面では最初にAI関連の話題が来ていて、テスト自動化にもAI技術への応用、あるいはクライアントの期待が高まってる印象でした(チュートリアルでやっていたMagic Podはまさにそれですね)。また、初めて知るツールがいくつか紹介されていて大変興味深いものでした。このあたりもぼちぼち調査してみたいところです。<br />
運用的な面では、自動テストをいかに正確に、早く結果を返せるかということに誰もが試行錯誤しているようでした。しかし、テストだけではどうにもならない面もあり、プロダクトをどういう作りにしておくか、開発プロセスはどうするか、どういう組織構造で役割や責任をどう割り当てるか、という製品開発全体を対象として考えないといけない面もいくつか垣間見られ、自動テストの本質的な難しさを改めて実感したカンファレンスでした。<br />
<br />
それでは!また!inomatahttp://www.blogger.com/profile/13744753825842161516noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-87300721882214398872017-12-24T23:20:00.004+09:002017-12-24T23:26:42.694+09:00Circuit Breaker Pattern (ShanonAdventCalendar2017 - 24日目)開発のou.gです。今日はCircuit Breaker Patternを簡単にご紹介します。<br />
<br />
分散システム間の連携で、リモートサービスやリソースを接続するときに、接続対象が故障、高負荷等によって、応答が遅くなったり、ひいてはtimeoutになることがあります。そのまま呼び出しを続けると、内部のDDoSとなり、対象サービスの計算リソースの枯渇になってしまい、完全に死んでしまう可能性があります。<br />
<br />
特に多数のサービスによって構成される複雑システムの場合に、一つのサービス故障がほかのサービスの連鎖故障を引き起こして、雪崩のように全サービス故障になってしまう可能性もあります。<br />
<br />
このような問題を解決・緩和する方法はいくつがありますが、今回はCircuit Breaker Patternを紹介します。<br />
<br />
Circuit Breaker Pattern(<span style="color: blue;"><a href="https://martinfowler.com/bliki/CircuitBreaker.html">https://martinfowler.com/bliki/CircuitBreaker.html</a>)</span> を簡単にまとめると、呼び出す側に遮断器のような仕組みを用意して、依存サービスの異常を検知したら、自動的に遮断器を開いて、呼び出しを一時的に遮断します。そのあと、定期的サービスを呼び出して見て、成功したら遮断器を閉じてすべての呼び出しを開放することで自己回復します。<br />
<br />
Circuit Breakerの内部は、有限状態機械をもって、下記の感じで状態遷移しています。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://martinfowler.com/bliki/images/circuitBreaker/state.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="406" data-original-width="450" height="288" src="https://martinfowler.com/bliki/images/circuitBreaker/state.png" width="320" /></a></div>
<br />
<ul>
<li>閉(Closed): 正常状態、すべての呼び出しは正常通過します。一定期間内の失敗率が閾値を超えたら、Open状態に遷移。</li>
<li>開(Open): 異常状態、すべての呼び出しを遮断して、すぐ失敗させてFallbackする。一定の時間後、Half Openに遷移。</li>
<li>半開(Half Open): 呼び出しをやってみて、成功したらClosed状態に遷移、失敗したら、Open状態に戻り。</li>
</ul>
<br />
Circuit BreakerがOpen状態になったら、自分の業務に合わせて、適切なFallback処理をするべき、例えば、<br />
<ul>
<li>空白、Default値を返却、あるいは何もしない(fail-silent)</li>
<li>例外処理に入って異常終了(fail-fast)</li>
<li>非同期で後で再実行(retry)</li>
<li>全遮断ではなく、半分遮断とか</li>
</ul>
<br />
Circuit Breaker使うとき、下記のことを考慮したほうが良いかもしれません。<br />
<ul>
<li>業務処理の冪等性: 呼び出し側がTimeoutになって失敗処理に入るが、サービス側に実際処理成功した可能性があります。この場合に、再実行しても問題にならないように処理の冪等性保障しないと泣きます。</li>
<li>遮断対象の粒度: 依存サービスの故障、負荷問題がなくても、特定の処理が時間長くて、Timeoutになってすべての呼び出しが遮断されてしまうと困るから、業務に合わせてCircuit Breakerの遮断対象の粒度を制御しましょう。</li>
<li>通知: 遮断処理動作するときに、担当者に通知したほうが良い。頻繁に起きたら、依存サービスは問題ないか、根本的に処理能力を上げた方が良いかを調べた方が良いかもしれません。</li>
<li>Circuit Breaker自体のコスト: 依存サービスを呼び出すたびに、Circuit Breakerの状態保存、判断処理が走っているから、コストかかります。リモートの呼び出しなら、そのコストの割合が低いから問題ないはずだが、メモリデータの操作等ローカル処理なら、コスト高すぎるので使わない方が良いかもしれません。</li>
<li>Circuit Breaker状態保存先の選択: メモリに置いたら一番速いですが、呼び出し側は複数サーバー、複数インスタンスで動くなら、情報共有しにくいから、効果が薄いし反応が遅い問題があります。RDBMS/NOSQLに置くなら、パフォーマンス、storage自体の可用性問題等も考慮しないといけないから、業務要件に合わせて決めましょう。どっちにしても、判断処理のprocess safe、thread safeを注意しないといけません。</li>
</ul>
<br />
以上Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-70953957074237829462017-12-24T00:48:00.001+09:002017-12-25T10:42:42.640+09:00JavaScriptで顔追跡!あのフレンズになってみた!(ShanonAdventCalendar2017 - 23日目)<div style="text-align: center;">
<span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;"><a href="http://4.bp.blogspot.com/-iEgSmTZxRxs/Wj57XwFkv8I/AAAAAAAAAUg/7gl0qWqEuMwL_QgSziHEqkm14_dl5QfzgCK4BGAYYCw/s1600/araiguma.png" imageanchor="1"><img border="0" height="320" src="https://4.bp.blogspot.com/-iEgSmTZxRxs/Wj57XwFkv8I/AAAAAAAAAUg/7gl0qWqEuMwL_QgSziHEqkm14_dl5QfzgCK4BGAYYCw/s320/araiguma.png" width="320" /></a></span></div>
<span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;"><br /></span>
<span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;">こちらは </span><a href="https://qiita.com/advent-calendar/2017/shanon" style="background-color: white; border: 0px; color: #637182; font-family: "Open Sans"; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; outline: none; padding: 0px; text-decoration-line: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">Shanon Advent Calendar 2017</a><span style="background-color: white; color: #4b5f65; font-family: "open sans"; font-size: 14px;"> の23日目の記事です</span><br />
<br />
はじめまして<br />
新卒エンジニアのTado56と申します.<br />
<br />
気づけはもう1年がたちます.あっという間でした.<br />
今回,Advent Calendar として投稿する内容ですが,以前から個人的に面白いと思っているライブラリの紹介をしようと思います.<br />
<br />
今回紹介するライブラリですが,<a href="https://github.com/auduno/clmtrackr" target="_blank">clmtrackr</a>と言うものになります.このライブラリが何をできるかと言うと,題名にもある通り顔追跡を行うことができます.<br />
このライブラリですが,画像や動画・Webカメラの映像から、顔や目や鼻などのパーツの位置や傾きを検出できます!検出した情報は座標として取得できるので,去年流行ったSNOWのように顔のパーツに絵を重ねるといったことができます.<br />
リンク先に様々なデモが用意されているので動かしてみてください.サンプルを動かすだけで楽しいです.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-HwA8Ey3mYfM/Wj5rC5GY4lI/AAAAAAAAAT8/oVGCy365W8otrqYHh6ONK8xEG5j8kdvPQCLcBGAs/s1600/sample.jpeg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="274" data-original-width="300" src="https://4.bp.blogspot.com/-HwA8Ey3mYfM/Wj5rC5GY4lI/AAAAAAAAAT8/oVGCy365W8otrqYHh6ONK8xEG5j8kdvPQCLcBGAs/s1600/sample.jpeg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">clmtrackrの動作サンプル</td></tr>
</tbody></table>
<br />
<h3>
どうやって紹介しよう・・・
</h3>
このライブラリをどのように紹介しようかと考えたときに,そういえば最近今年の漢字が発表されたなあ・・・と思い出しました.<br />
皆さんは今年の漢字は知っているでしょうか?選ばれた栄えある漢字は「<b>北</b>」になります.<br />
自分はこの漢字をみてピンときました.そうです!<br />
<br />
<div style="text-align: center;">
<b><span style="color: red; font-size: x-large;">けものフレンズ</span></b> です!</div>
<br />
あのおそらくたぶんきっと北のほうにあるだろうジャパリパークのことをいっているのだと思います.<br />
<br />
<h3>
いつかジャパリパークに行った時のために
</h3>
いつかジャパリパークに行くことがあるかもしれません.そんな時のために自分もフレンズとして経験を積んでおくべきだと思います.そんな経験を積むのにぴったりな機能が今回紹介するライブラリ存在します.<br />
ライブラリを使用して検出した顔の情報を利用して,顔にマスクを被せることができる faceDeformer() というメソッドが存在します.これを利用して誰でも好きなキャラクターになりきることができます.<br />
サンプルでは,モナリザの顔を貼り付けたりしています.<br />
<br />
<h3>
ネタは決まった</h3>
<div>
ということで,自分はアライさんが好きなので今回はアライさんになりきろうと思います.</div>
<div>
今回使用したアライさんの画像はこちら!大変凛々しいですね.</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-DFsVejT774I/Wj5u6hr7CnI/AAAAAAAAAUI/yaRqr0dTdF0_cXtrcDxmoujh60n5DM0OwCLcBGAs/s1600/araisan.jpeg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="480" data-original-width="600" height="256" src="https://3.bp.blogspot.com/-DFsVejT774I/Wj5u6hr7CnI/AAAAAAAAAUI/yaRqr0dTdF0_cXtrcDxmoujh60n5DM0OwCLcBGAs/s320/araisan.jpeg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">「アライグマ 画像」で調べた画像</td></tr>
</tbody></table>
<h3>
</h3>
<h3>
実装</h3>
<div>
まず,アライさんの顔の情報を定義してあげないといけません.</div>
<div>
clmtrackrで検出される顔の特徴点は以下の画像です.</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-aIfx4ewZCD4/Wj5vzRPQL8I/AAAAAAAAAUM/phF3oF1SA9cMyIRDTVUuft--HGVdK5grQCLcBGAs/s1600/face.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="420" data-original-width="407" height="320" src="https://4.bp.blogspot.com/-aIfx4ewZCD4/Wj5vzRPQL8I/AAAAAAAAAUM/phF3oF1SA9cMyIRDTVUuft--HGVdK5grQCLcBGAs/s320/face.png" width="310" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">顔の特徴点</td></tr>
</tbody></table>
<br />
<div>
手作業でアライさんの顔だろう場所の座標を定義しました.</div>
<div>
<br /></div>
<div>
<pre>var masks = {
"araisan" : [[108,284],[124,317],[139,354],[160,389],[189,419],[220,440],[262,462],[324,477],[382,458],[426,423],[445,398],[464,369],[482,337],[501,301],[517,246],[444,219],[407,186],[349,186],[324,224],[159,253],[182,216],[229,207],[271,235],[175,280],[206,246],[244,270],[212,290],[210,269],[431,246],[381,227],[356,259],[394,269],[389,250],[297, 249],[269,332],[258,346],[279,372],[310,364],[340,367],[354,338],[342,320],[301,288],[295,369],[324,367],[246,396],[265,389],[291,382],[312,383],[333,377],[359,377],[384,382],[378,405],[364,432],[322,453],[275,447],[256,426],[279,426],[316,438],[355,418],[342,414],[313,417],[284,419],[308,338],[182,257],[228,253],[232,281],[192,286],[408,237],[366,243],[375,269],[414,259]]
};
</pre>
</div>
<br />
顔を定義したら,ようやくライブラリを使って顔を検出していきます.<br />
今回使うclmtrackrのクラスは以下です.<br />
<br />
<ul>
<li>clm.tracker() 顔の追跡をしてくれるクラス</li>
<li>faceDeformer() 画像と特徴点を渡すとマスクの表示をしてくれるクラス</li>
</ul>
<h3>
</h3>
<h3>
顔の検出</h3>
<div>
clm.tracker()を初期化します.</div>
<div>
その後init()します.引数pModelは,pModelmodel_pca_20_svm.jsで定義されています.</div>
<div>
そしてstart()を実行すると設定完了です.ここで渡すvideoは,顔検出を行いたいvideoエレメントです.<br />
<br /></div>
<div>
<pre> var tracker = new clm.tracker();
tracker.init(pModel);
tracker.start(video);
</pre>
<br /></div>
<div>
getCurrentPosition() を実行すると動作します!<br />
<br />
<pre>var positions = tracker.getCurrentPosition();
</pre>
<br />
これをsampleのように描画するには,こんな感じにすればできます.<br />
<br />
<pre>function drawLoop() {
var positions = tracker.getCurrentPosition();
context.clearRect(0, 0, canvas.width, canvas.height); // context : canvas の context
if (positions) {
tracker.draw(positions);
}
requestAnimationFrame(drawLoop);
}</pre>
<h3>
</h3>
<h3>
マスクの表示</h3>
こちらも同じようにfaceDeformer()を初期化します.<br />
<br />
<pre>var fd = new faceDeformer();
var fdcanvas = document.getElementById('fdcanvas');
fd.init(fdcanvas);
</pre>
<br />
今回のinitの引数は,マスク描画を行うcanvasのエレメントです.</div>
<div>
<br />
次に,マスク画像を読み込みます.<br />
<br />
<pre>// get mask
var maskimg = document.getElementById("araisan");
fd.load(maskimg, masks["araisan"], pModel);
</pre>
<br />
第一引数はマスクに使用する画像のエレメントです.第二引数は特徴点.第三引数はモデルとなります.<br />
これで設定も終わったので,あとは検出した顔の情報に合わせて描画を行うだけです.<br />
<br />
<pre>function drawMaskLoop() {
var positions = tracker.getCurrentPosition();
context.clearRect(0, 0, fdcanvas.width, fdcanvas.height);
if (positions) {
fd.draw(positions);
}
requestAnimationFrame(drawMaskLoop);
}
</pre>
<br />
<h3>
実際の動作がこちら!</h3>
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dyehzixqE1wWiyJEERU0Rycn57oX2ggoyri_ecCqxZIVM63Q9A3tbfnK7AsSVOCJY2kOBiNivrsz5yOx1OiIw' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div>
<br />
<div style="text-align: center;">
<span style="color: red; font-size: large;"><b>わーい!すごーい!たのしー!</b></span></div>
<br />
無事アライさんになれました!なんか猫耳がありますが顔の上が寂しかったのでとりあえずつけました!猫耳属性も付いたフレンズになれました!<br />
<br />
最近バーチャルYouTuberなる人たちが人気ですが,これなら自分もアライグマのバーチャルYouTuberとして参戦できそうです.<br />
<br /></div>
<div>
<h3>
最後に</h3>
</div>
<div>
変な人じゃないです.<br />
<br /></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-17819381851010708412017-12-22T10:00:00.000+09:002017-12-22T11:56:47.557+09:00コミュニケーション円滑化〜きっかけ編〜(ShanonAdventCalendar2017 - 22日目)こちらは <a href="https://qiita.com/advent-calendar/2017/shanon" target="_blank">Shanon Advent Calendar 2017</a> の22日目の記事です。<br />
こんにちは titoです。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgof9B8uMWmX2xQT26_GD5e7i0x7Fv0zdIJmD02jR0EE02n2TOKKpYBCCaNg6NHO39qpxA1r0q7ftJyll6HFlcbb43epYV_GOzaoDeZUIK9hIbyHd7MKkry9SEA-96oBIRYCy0PT31B_CoZ/s1600/communication_nigate_kaisya.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="793" data-original-width="800" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgof9B8uMWmX2xQT26_GD5e7i0x7Fv0zdIJmD02jR0EE02n2TOKKpYBCCaNg6NHO39qpxA1r0q7ftJyll6HFlcbb43epYV_GOzaoDeZUIK9hIbyHd7MKkry9SEA-96oBIRYCy0PT31B_CoZ/s200/communication_nigate_kaisya.png" width="200" /></a></div>
<br />
最近、チームや開発部内のエンジニア同士、もっと仲良くなるためにはどうしたらいいだろうと考えてみたりする事があります。<br />
もっと会話のきっかけを増やす事ができたら仲良くなれるではないかと思い、家族内での会話のきっかけってなんだろうと考えました。<br />
実際に会話のきっかけの一つになっていたのが、<a href="http://amzn.asia/9xfFZQ7" target="_blank">こちら</a>のカレンダーでした。<br />
意外と今日は何の日かって、今日の天気みたいな感じで話のきっかけにしやすいネタだと思います。<br />
<br />
会社の方でも、今日は何の日かってチャットツールなどで投稿したら、誰かからは反応がもらえるのではないかと淡い期待を抱きながら、簡単なツールを用意する事にしました。<br />
<br />
シャノンではチャットツールとしてSlackを利用していますので、Slackに今日は何の日か投稿するツールを作ってみたいと思います。<br />
こんな感じになりました。(ちなみにpython初心者です、お手柔らかにお願いします)<br />
<pre><code>
import requests
import json
import yaml
from datetime import date
# 設定ファイル読み込み
f = open('setting.yaml', 'r')
data = yaml.safe_load(f)
today = date.today()
# 今日の日付に応じた設定があればSlackに投稿する
if today.month in data:
month_data = data[today.month]
if today.day in month_data:
for day_data in month_data[today.day]:
requests.post('Slack投稿URL', data = json.dumps({
'text': day_data,
'username': u'記念日通知くん',
'icon_emoji': u':bulb:',
}))
</code></pre>
<br />
設定ファイルを読み取り、今日の日付のデータがあればSlackに投稿するという簡単なプログラムです。<br />
設定ファイルはこんな感じのものを用意してます。<br />
先頭に月のキーを設定してその下の階層に日のキーを設定するだけの簡単な設定です。<br />
<pre><code>
11:
22:
- いい夫婦の日
12:
7:
- クリスマスツリーの日。1886年のこの日、横浜に日本初のクリスマスツリーが登場した。
14:
- 討ち入りの日。1702年のこの日、赤穂浪士による吉良邸への討ち入りがあった。
19:
- 日本人初飛行の日。1910年のこの日、東京で工兵大尉が公式な記録として日本初飛行に成功。
20:
- デパート開業の日。1904年のこの日、東京・日本橋で日本初のデパートが営業を開始した。
</code></pre>
<br />
実際にプログラムを動かしてみたところ、↓のような感じで無事に投稿されました。<br />
cronなどで毎日動かすようにしたら勝手に投稿されていくようにみえると思います。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmaPqrqELmpvhk8Qy2oYug_ye7BWFofVrY4cwumLG8xIbU2ZSOGbRGPvFjgkY2miM44IrXp-TIjlNqbey3OCyrzy3dGDWb3e_VND-sbeuUc58J53yeRcPJpzj12j8HmvdZ9sJ8GvKUO0_/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2017-12-20+22.51.33.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="52" data-original-width="669" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmaPqrqELmpvhk8Qy2oYug_ye7BWFofVrY4cwumLG8xIbU2ZSOGbRGPvFjgkY2miM44IrXp-TIjlNqbey3OCyrzy3dGDWb3e_VND-sbeuUc58J53yeRcPJpzj12j8HmvdZ9sJ8GvKUO0_/s640/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2017-12-20+22.51.33.png" width="640" /></a></div>
<br />
今回のツールでは設定ファイルから投稿するので、会社の記念日とかも盛り込んだりできます。<br />
ただ、逆に設定ファイル作るのが大変なので、今度はクローラーみたいなのを用意してWebから情報を拾ってくるようなものができたら、もっと楽に話のきっかけを作る事ができるなと企んでいるところです。<br />
<br />
何はともあれ、話のきっかけとして<a href="http://amzn.asia/g0tbzKw" target="_blank">2018年版のカレンダー</a>を購入してみるのも良いかもしれません。<br />
ここまでお読み下さってありがとうございました。<br />
引き続き、<a href="https://qiita.com/advent-calendar/2017/shanon" target="_blank">Shanon Advent Calendar 2017</a> をお楽しみ下さい。titohttp://www.blogger.com/profile/03615703002903704308noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-75504574102411217842017-12-21T13:37:00.000+09:002017-12-21T14:49:29.301+09:00telnetで学ぶはじめてのメール送信 (ShanonAdventCalendar2017 - 20日目)<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1y01S7MOahEdblqG8zwiAj9WfitziBhBR1puYy8_6TRgA2ogvBDKiomrkOMTL3rIk-KEirGF-Bi-8Ja_kxuo01M8d6pH19hyphenhyphennkRt0aCXIbESfaIZGSXPApV7RoE9x75K2lW1X6EaApRk/s1600/%25E3%2583%25A1%25E3%2583%25BC%25E3%2583%25AB.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="500" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1y01S7MOahEdblqG8zwiAj9WfitziBhBR1puYy8_6TRgA2ogvBDKiomrkOMTL3rIk-KEirGF-Bi-8Ja_kxuo01M8d6pH19hyphenhyphennkRt0aCXIbESfaIZGSXPApV7RoE9x75K2lW1X6EaApRk/s320/%25E3%2583%25A1%25E3%2583%25BC%25E3%2583%25AB.png" width="320" /></a></div>
<h2>
<br /> はじめまして</h2>
皆様、初めまして。<br />
今年、シャノンに入社いたしました、takiと申します。<br />
<br />
ざっくりと自己紹介をいたしますと、<br />
<br />
学生時代に発酵食品について研究&食品衛生管理者取得<br />
↓<br />
開発エンジニアとして就職<br />
<br />
??<br />
<br />
上記の通り、情報の勉強はしておらず、プログラミングも未経験でした。<br />
我ながら謎な進み方していますが、もともとIT業界、プログラミングというものに興味があったため、望んだ道に進めていると思っています。<br />
<br />
今年は、社会人はじめて、開発はじめて、都会はじめてのはじめて尽くしの1年でした。<br />
そんなはじめて尽くしの中でも、はじめての配属は、メール関係のチームになったのですが、お恥ずかしながらメールがどういったものかを知りませんでした...<br />
<br />
ということで、自己理解のために、アドベントカレンダーに参加し、「はじめてのメール」と題しまとめてみました。<br />
<div>
<br />
<br /></div>
<h2>
はじめてのメール</h2>
<h3>
<span style="color: #666666; font-size: large;">・通信の種類</span></h3>
日常において、無意識にメールを送受信しているが、どういう仕組みなのか気になったため調べてみました。<br />
<br />
<br />
<h4>
<b>SMTP (Simple Mail Transfer Protocol) :</b></h4>
メール<u>送信時</u>に使用されるプロトコル。<br />
SMTPに対応したサーバをSMTPサーバといい、郵便局のような役割をします。<br />
いざメールを送信するとなった場合、まずは、送信者のSMTPサーバに送られます。さらにそこから、受信者のSMTPサーバに送られた後に、受信者のメールボックスへと届きます。<br />
<br />
<br />
<h4>
<b>POP (Post Office Protocol) :</b></h4>
メール<u>受信時</u>に使用されるプロトコル。<br />
クライアントから、メールサーバに自分宛のメールが届いているか、リクエストがメールサーバに飛ぶと、メールサーバは本人かどうか、ユーザー名とパスワードを利用して認証を行います。<br />
確認がとれた後、メールを<u>リクエスト元に転送</u>します。<br />
イメージとしては、郵便局に行って、目的のものを受け取るような感じです。<br />
<br />
<br />
<h4>
<b>IMAP (Internet Message Access Protocol) :</b></h4>
IMAPもメール<u>受信時</u>に使用されるプロトコルですが、POPとは仕組みが異なります。<br />
POPはメールサーバからメールをダウンロードしてきますが、IMAPは<u>メールサーバ上で保存、管理</u>します。<br />
そのため、PCやスマホ、タブレットなどの複数の端末からでも同じメール環境として利用することができます。<br />
<br />
<br />
<h3>
<span style="color: #666666; font-size: large;">
・実際にやってみる</span></h3>
telnetを使用して、SMTP通信を確認してみました。<br />
ネットでtelnetの操作方法を探して、いざ挑戦。<br />
<br />
<pre><code>
telnet localhost 25 //(1)
Trying 108.XXX.XXX.XXX...
Connected to localhost.localdomain.
Escape character is '^]'.
220 localhost.localdomain ESMTP
HELO localhost //(2)
250 localhost.localdomain Hello localhost [108.XXX.XXX.XXX]
MAIL FROM:<taki@example.com> //(3)<taki aaa.bb="">
250 OK
RCPT TO:<taki@example.com> //(4)<taki aaa.bb="">
250 Accepted
DATA //(5)
354 Enter message, ending with "." on a line by itself
To:taki@example.com
Subject: test telnet smtp
From:taki@example.com
merumerumeru
.
250 OK
QUIT //(6)
221 localhost.localdomain closing connection
Connection closed by foreign host.
</taki></taki></code>
</pre>
<br />
うまくいった...?<br />
いろいろ伏せていますが、括弧つき番号が書いてある部分を入力しました。<br />
内容としては以下のようになってます。<br />
<br />
<b>(1)目的のSMTPサーバーと接続するポート番号を入力し、telnetコマンドで接続</b><br />
SMTPサーバーはコマンドプロンプトなどで
<br />
<pre>nslookup -type=mx <i>使用するドメイン名</i></pre>
と入力すると調べることができます。<br />
今回使用した25番ポートは、インターネット上でのメール送信のプロトコルに国際標準で割り当てられた識別番号で、メール送信のポート番号として一般的に割り当てられています。<br />
<br />
<b>(2)HELOコマンド</b><br />
通信路の使用開始の宣言です。意味としては挨拶の「Hello」と同じです。<br />
また、EHLOというコマンドもあり、こちらはSMTPサービス拡張仕様を利用したメール送信を行えます。<br />
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , , "ms pgothic" , sans-serif; font-size: 16.003px;">SMTPサービス拡張機能をサポートしていないサーバもあるので、拡張機能が使いたくても使えない場合があります。</span><br />
<br />
<b>(3)MAILコマンド</b><br />
メール送信の開始を表すとともに、送信時にエラーが発生した場合の返信先を指定します。<br />
MAILコマンドをサーバが受信すると、返信通路バッファ、転送経路バッファ、メールデータバッファの3つをクリアし、返信経路バッファに返信先を保存します。<br />
<br />
<b>(4)RCPTコマンド</b><br />
メールの受取人を決めます。<br />
<br />
<b>(5)DATAコマンド</b><br />
メッセージ送信開始をサーバに告げるコマンドで、ヘッダー情報、本文を入力します。<br />
本文の最後にピリオドのみを入力することで、入力終了となります。<br />
<br />
<b>(6)QUITコマンド</b><br />
接続を終了します。<br />
<br />
<br />
今回は、送信、受信、どちらも自分のアドレスにしました。<br />
ということで、メールボックスを見てみます。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtK-YtMEFiWzxlQTP-7jFG98v9qV4SMQJdN2k7TOpbjMgMFLMEym2l2nI9B1oX4_RNM_YcPlSmXtdZOhWdwvYCA_OkNZrNubiIpEPA7GL0u2o919zx09QhDXxLVJb5coql0QoeiO3Xrpg/s1600/telnet.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="139" data-original-width="343" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtK-YtMEFiWzxlQTP-7jFG98v9qV4SMQJdN2k7TOpbjMgMFLMEym2l2nI9B1oX4_RNM_YcPlSmXtdZOhWdwvYCA_OkNZrNubiIpEPA7GL0u2o919zx09QhDXxLVJb5coql0QoeiO3Xrpg/s320/telnet.PNG" width="320" /></a></div>
<br />
感動、うれしい(語彙力)<br />
<br />
POPも試そうと思ったのですがなんかうまくいきませんでした...<br />
多分入力間違ってるんだと思います...<br />
<br />
<br />
<h2>
終わり
</h2>
駄文にお付き合いいただきありがとうございました。<br />
本当に触り程度でしたが、前より確実に力にはなりました。多分。<br />
これからも、周りにおいていかれないように、<br />
必死にしがみつきながら、日々、精進してまいりたいと思います。<br />
<br />
それでは、よいクリスマスを、よい年末を<br />
<div>
<br /></div>
<br />takihttp://www.blogger.com/profile/10156015848319198165noreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-46881104497802028162017-12-20T15:39:00.000+09:002017-12-20T15:39:01.694+09:00なれる!IE(インフラエンジニア) (Shanon Advent Calendar 2017・18日目)<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-FtxKL3eBwRY/Wjn_k4SlWGI/AAAAAAAABRE/g23EL6MXG70oBS1kh6y9AjpXhLoZLUQNACLcBGAs/s1600/computer_server.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="747" data-original-width="800" height="298" src="https://1.bp.blogspot.com/-FtxKL3eBwRY/Wjn_k4SlWGI/AAAAAAAABRE/g23EL6MXG70oBS1kh6y9AjpXhLoZLUQNACLcBGAs/s320/computer_server.png" width="320" /></a></div>
<br />
<br />
この記事は、<a href="https://qiita.com/advent-calendar/2017/shanon">Shanon Advent Calendar 2017</a> の18日目の投稿のはずでした。<br />
投稿が遅くなり申し訳ありません。。。!<br />
<br />
<h3>
ごあいさつ</h3>
ご覧いただきありがとうございます。インフラエンジニアの卵、sawakと申します。<br />
1行で自己紹介すると、<br />
経済学部2016年卒⇒開発1年⇒2017年4月からインフラ をしています。<br />
<br />
今日は、インフラに転向しての話や研修での環境構築の話をします。<br />
インフラエンジニアの魅力を紹介する(ふりをした自分語りの)お話で、<br />
対象としてはエンジニア歴1~2年くらいの方や学生さん方に見て欲しいと思っています。<br />
<br />
<h3>
インフラに移った</h3>
入社1年目は、3ヶ月の外部研修ののち、製品の一機能のマニュアルを作成したり、新機能のQAのお手伝いをしたりしていました。<br />
開発あまりしていませんが、開発エンジニアでした。<br />
<br />
それがある日突然上司に呼ばれ、「インフラやって」と言われ、15分後の部署MTGで部内に共有されました。<br />
はやい。これがベンチャーのスピード感。(違)<br />
<br />
開発としての仕事もまだまだ半人前でそこに後ろ髪ひかれる気持ちもありましたが、<br />
1年ちょっとで開発とQAとインフラ経験出来るってお得では?とか、事業部の社員とコミュニケーションを取る機会が増える、などとポジティブに捉え大人しくインフラのお仕事を始めました。<br />
<br />
<br />
ところでインフラエンジニアって何なんでしょう。インフラに移った時も今もちゃんとわかっていませんが、いろいろな顔があることは理解しました。<br />
<br />
ざっくり社内インフラと本番インフラがいて弊社ではチームが分かれています。<br />
本番インフラもざっくり大別すると、備える・維持する・開発する仕事があります。<br />
<br />
<b>〇備える・・・</b>多様な業種や規模のお客様がいらっしゃるため、大量の顧客データのインポートや、スポットのイベントで短時間に大量の申込・来場認証を捌く場面が出てきます。<br />
そこに備え許容するリクエスト数や優先度を調整したり、ボトルネックになっている部分を改善します。<br />
<br />
<b>〇維持する・・・</b>WEBサービスにとって大切なのが可用性(どれだけ継続的に稼働できるか)です。<br />
サーバのどこかに故障が起きた時、外部から攻撃を受けた時、それをいかに速く検知して対策を取るかを事前に取り決め、体制を構築しておきます。<br />
監視や予備サーバへの切り替えもですが、エンジニアへの通知や社内・顧客への連絡など<br />
非システム的なルールも決めておかなければなりませんね。<br />
<br />
<b>〇開発する・・・</b>新規サーバの構築・既存運用の自動化・もう少しマクロなレベルでのアーキテクチャ改善など、列挙できませんがインフラエンジニアも開発をする場面は多々あります。<br />
<br />
大別してみましたが、網羅出来てなさそうです!<br />
先輩のインフラエンジニアがおよそインフラっぽいこと(と時々そうでないことも)を何でもやってしまうような人たちだったので、一朝一夕で全容を理解することは難しいですが、見えている部分から、1つずつ、です。<br />
<br />
<h3>
半年の3つの思い出</h3>
1.環境構築研修<br />
<br />
6月はsawak修行編でした。<br />
インフラエンジニアとしての1歩目ということでLAMP(Linux/Apache/Mysql/PHP)環境の構築研修に取り組みました。<br />
どんな課題かというと、「LAMP環境を構築せよ、以上!」という感じです。本当に。<br />
<br />
Apacheはソースからインストールしましたが、APRが無い、PCREが無い、バージョンがダメ、ディレクトリが無い、httpdプロセス立たない、iptablesでHTTP許可していないなど、ぶつかりそうな壁全てに頭から突っ込みながら進みました。もーyumでいーじゃん!と10回くらい思わされました。yumでいいんですが、ソースからのインストールには複数バージョン併用出来たり、パッケージでインストールされる安定版より新しいバージョンが利用できたりといったメリットがあります。
<br />
<br />
2週間の格闘で一通り動いた喜びは、計り知れません。<br />
後日何も考えずうきうきで自分個人のドメインやAWSアカウントを取りました。<br />
<br />
<br />
2.運用中のサーバを<br />
<br />
開発の時と比べると責任の大きさと言いますか、少しばかりお客様との距離が近くなったので失敗出来ない場面が多くなりました。<br />
慣れてきた頃が怖いとはよく言ったもので、もうすぐインフラに移って半年というところでしくじりました。<br />
契約が終了しているサーバを止めたら、実は運用中を示すチケットがフィルタで隠れて立っていたというオチです。<br />
幸い大きな影響は出さなかったものの、ちょっとした行き違いが想像以上の結果を生んでしまうこともある、ことを実感しました。<br />
フォローしていただいた各所の方々には感謝感謝です。<br />
<br />
3.ありがとう<br />
<br />
エンジニアとはあまり関係ないんですが、社内向けや本番向けの環境の仕入れや追加機能のアクティベートをしていると、営業や導入のスタッフと直接やりとりをすることが多くあります。大体粛々とやりとりをするわけなんですが、時々すごく感謝を示してくれる方がいらっしゃいます。「sawakさんのこういう所がいつも助かってます」など声をかけていただいたり、お菓子下さったり。(sawakは甘いものが好き)<br />
<br />
事業部と技術部、お仕事は違えど目指すものは同じはず。お互いの仕事に敬意を払って感謝の気持ちを忘れないようにしたいです。<br />
<br />
<br />
<h3>
結び</h3>
ここまでご覧いただきありがとうございました。<br />
あまり技術的な知見を共有出来る記事でなく恐縮ですが、ふーん頑張ってと思っていただければ幸いです。<br />
<br />
ishikawa先生が <span style="font-family: "open sans" , sans-serif; text-align: center;"><a href="http://shanon-tech.blogspot.jp/2017/12/tls10tls11javashanonadventcalendar20171.html">TLS1.0及びTLS1.1の無効化対応(Java編)</a></span><br />
について書かれていましたが、私も社内でSSL証明書購入お兄さんをやっているので、SSL/TLS界隈のトピックなど次回書けることがあるかもしれません。<br />
<br />
それではこのあたりで失礼いたします。sawakでした。Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-22904133018778640222017-12-19T20:16:00.002+09:002017-12-19T20:22:35.740+09:00そういえば、一からvimrc、zshrcを作成しました。ついでにvimium。(ShanonAdventCalendar2017・19日目)<h2>
はじめに</h2>
初心者エンジニアもどきのshiです。<br />
<br />
未経験入社後、最初の外部研修でvimをご教示頂いてからvimmerに。<br />
デフォルトで使っていたのですが、色々使いづらかったので設定しようと一念発起。<br />
ついでに、シェルも色々見てみようと思っていたら、zshが良さそうだと。<br />
(隣の先輩が使っていたので調べてみました)<br />
<br />
一念発起直後は、フレームワークのoh-my-zsh使っていたんですが、自分にとって不要な機能があったり(何か忘れた)したので、イチから作ることに。<br />
<br />
<br />
備忘録としても兼ねていますが、詳細な説明はしていません。<br />
私がそうだったのですが、「何が◯◯で、これがXXで」と書かれていても最初はわからないことだらけでした。<br />
ただ、丸コピーできそうな例(機能が多すぎない、少なすぎない)があって、そのコマンド一つ一つに説明があったらなと思っていたので、今回はそんな記事を目指しています。<br />
<br />
<br />
<h2>
注意</h2>
・初心者エンジニアもどき記載のため間違い含む可能性があります。<br />
・色々なサイトから取ってきて、調べて行末にコメントを記載していますので参考になればと思います。<br />
・色々なサイト様からを参考にさせていただいております。<br />
※ 半年前以上に作成しており、全ての参考サイトを記載できていない可能性があります。<br />
<br />
<br />
上記、了承いただけましたら、もうしばしお付き合いください。<br />
<br />
<br />
<h2>
のぞんだこと</h2>
・目に優しい色 & わかりやすいこと<br />
・記憶力が著しく低い自分が使いやすいように(履歴補完)<br />
・レスポンスが早いこと(開くのに1秒かかるとか嫌だ)<br />
※ 測っているわけではないです。<br />
・(vim)画面分割を想定<br />
・(vim)vimらしさを残しつつ、エディタ感出していく<br />
<div>
<br /></div>
<br />
<div>
<h2>
作ったやつは、コレ(センスが無いとか言わないで)</h2>
</div>
<h3>
zshrc</h3>
<pre><code># .zshrc
# alias 系
alias less='less -i -N'
# alias (履歴に残さない)
alias man=' man'
alias ls=' ls -al --color=auto'
alias cd=' cd'
# 宣言系
autoload -Uz colors; colors # black red green yellow blue magenta cyan white
bindkey -v # キーバインドをviモードに設定
# 色の定義
local C_GREEN=$'%{\e[38;5;2m%}' # 2
local C_BULE=$'%{\e[38;5;111m%}' # 111
local C_MAGENTA=$'%{\e[38;5;177m%}' # 177
local C_GRAY=$'%{\e[38;5;242m%}' # 242
local C_BG_GRAY=$'%{\e[48;5;234m%}' # マーカー 234
local C_RESET=$'%{\e[0m%}' # 色の適応範囲を終了
# 補完機能関係
autoload -Uz compinit promptinit; compinit # 補完を有効にする
zstyle ':completion::complete:*' use-cache true # キャッシュを使用する
zstyle ':completion:*' cache-path ~/.zsh/cache # キャッシュパス
zstyle ':completion:*:default' menu select=1
zstyle ':completion:*' matcher-list 'm:{a-z}={A-Z}' # 大文字、小文字を区別せず補完する
zstyle ':completion:*' list-colors "${LS_COLORS}" # 補完でカラーを使用する
zstyle ':completion:*:*:kill:*:processes' list-colors '=(# b) # ([%0-9]# )*=0=01;31' # kill の候補にも色付き表示
zstyle ':completion:*:sudo:*' command-path /usr/local/sbin /usr/local/bin /usr/sbin /usr/bin /sbin /bin /usr/X11R6/bin # コマンドにsudoを付けても補完
zmodload zsh/complist # 補完候補のメニュー選択で、矢印キーの代わりにhjklで移動出来るようにする。
bindkey -M menuselect 'h' vi-backward-char # 左
bindkey -M menuselect 'j' vi-down-line-or-history # 下
bindkey -M menuselect 'k' vi-up-line-or-history # 上
bindkey -M menuselect 'l' vi-forward-char # 右
LISTMAX=1000 # 補完リストが多いときに尋ねない
setopt ALWAYS_LAST_PROMPT # 補完候補など表示する時はその場に表示し、終了時に画面から消す
setopt AUTO_LIST # 曖昧な補完で、自動的に選択肢をリストアップ
setopt AUTO_MENU # タブキーの連打で自動的にメニュー補完
setopt AUTO_PARAM_KEYS # 変数名を補完する
setopt AUTO_PARAM_SLASH # ディレクトリ名を補完すると、末尾がスラッシュになる。
setopt NO_AUTO_REMOVE_SLASH # 補完が/で終わり、語分割子か/かコマンドの後(;とか&)の場合、補完末尾の/を取る
setopt NO_COMPLETE_ALIASES # aliasを展開して補完
setopt COMPLETE_IN_WORD # 語の途中でもカーソル位置で補完
setopt HIST_EXPAND # 補完時にヒストリを自動的に展開する
setopt LIST_TYPES # 補完対象のファイルの末尾に識別マークをつける
setopt LIST_PACKED # 補完候補を詰めて表示
setopt MAGIC_EQUAL_SUBST # =以降でも補完できるようにする
setopt PRINT_EIGHT_BIT # 補完候補リストの日本語を正しく表示
# 履歴関係
HISTFILE=$HOME/.zsh_history # 履歴ファイルの定義
SAVEHIST=1000000 # 履歴ファイルのサイズ
HISTSIZE=1000000 # メモリに載せる履歴のサイズ
PATH=${PATH}:~/bin
HISTTIMEFORMAT="[%Y/%M/%D %H:%M:%S] " # ヒストリの一覧を読みやすい形に変更
setopt APPEND_HISTORY # ヒストリファイルを上書きするのではなく、追加するようにする
setopt EXTENDED_HISTORY # ヒストリに時刻情報もつける
setopt HIST_EXPIRE_DUPS_FIRST # 履歴がいっぱいの時は最も古いものを先ず削除
setopt HIST_FIND_NO_DUPS # 履歴検索中、(連続してなくとも)重複を飛ばす
setopt HIST_IGNORE_ALL_DUPS # 履歴中の重複行をファイル記録前に無くす
setopt HIST_IGNORE_DUPS # 前と重複する行は記録しない
setopt HIST_IGNORE_SPACE # 行頭がスペースのコマンドは記録しない
setopt HIST_NO_FUNCTIONS # ヒストリリストから関数定義を除く
setopt HIST_NO_STORE # histroyコマンドは記録しない
setopt HIST_REDUCE_BLANKS # 余分な空白は詰めて記録
setopt HIST_SAVE_NO_DUPS # 古いコマンドと同じものは無視
setopt INC_APPEND_HISTORY # 履歴をインクリメンタルに追加
setopt SHARE_HISTORY # 履歴を共有
# 履歴補完
bindkey '^k' history-beginning-search-backward
bindkey '^j' history-beginning-search-forward
function command_not_found_handler() {
echo "zsh: command not found: $1"
sed -i -e '$d' ~/.zsh_history
}
# 未処理
WORDCHARS="$WORDCHARS|:" # "|,:"を単語の一部とみなさない
setopt AUTO_CD # /foo/barでいきなりcd
setopt AUTO_NAME_DIRS # "~$var" でディレクトリにアクセス
setopt AUTO_RESUME # サスペンド中のプロセスと同じコマンド名を実行した場合はリジュームする
setopt RM_STAR_SILENT # rm * などの際確認しない
setopt MARK_DIRS # ファイル名の展開でディレクトリにマッチした場合末尾に / を付加する
setopt NO_RM_STAR_WAIT # rm *で確認
setopt SUN_KEYBOARD_HACK # 行の末尾がバッククォートでも無視する
setopt EXTENDED_GLOB # ~hoge以外にマッチする機能を使わない
setopt NO_BEEP # BEEPを鳴らさない
setopt SH_WORD_SPLIT # クォートされていない変数拡張が行われたあとで、フィールド分割
setopt ALL_EXPORT # 定義された全ての変数は自動的にexportする
setopt AUTO_PUSHD # 普通のcdでもスタックに入れる
setopt NO_GLOB_DOTS # "*" にドットファイルをマッチ
setopt PUSHD_IGNORE_DUPS # ディレクトリスタックに、同じディレクトリを入れない
setopt NO_IGNORE_EOF # ^Dでログアウトしないようにする
setopt NOTIFY # ジョブの状態をただちに知らせる
setopt MULTIOS # 複数のリダイレクトやパイプに対応
setopt NUMERIC_GLOB_SORT # ファイル名を数値的にソート
setopt CLOBBER # リダイレクトで上書き禁止
setopt NO_PRINT_EXIT_VALUE # 戻り値が0以外の場合終了コードを表示
setopt BRACE_CCL # echo {a-z}などを使えるようにする
setopt HISTVERIFY # !!などを実行する前に確認する
setopt NO_CHECK_JOBS # ジョブがあっても黙って終了する
setopt NO_HIST_VERIFY # 実行するまえに必ず展開結果を確認できるようにする
setopt NO_PROMPTCR # 改行コードで終らない出力もちゃんと出力する
setopt SHORT_LOOPS # loop の短縮形を許す
setopt NO_XTRACE # コマンドラインがどのように展開され実行されたかを表示する
setopt NO_AUTOREMOVESLASH # ディレクトリの最後のスラッシュを自動で削除
setopt NO_CHASE_LINKS # シンボリックリンクは実体を追うようになる
setopt FUNCTION_ARGZERO # $0 にスクリプト名/シェル関数名を格納
setopt NO_FLOW_CONTROL # Ctrl+S/Ctrl+Q によるフロー制御を使わないようにする
setopt INTERACTIVE_COMMENTS # コマンドラインでも # 以降をコメントと見なす
setopt NO_SINGLE_LINE_ZLE # デフォルトの複数行コマンドライン編集ではなく、1行編集モードになる
setopt NOTIFY # バックグラウンドジョブが終了したらすぐに知らせる。
setopt TRANSIENT_RPROMPT
# エディタ
export EDITOR='vim' # nanoからvimに変更
export VISUAL='vim' # nanoからvimに変更
export PAGER='less'
# Git系
autoload -Uz vcs_info # VCSの情報を取得するzsh関数
zstyle ':vcs_info:git:*' check-for-changes true # formats 設定項目で %c,%u が使用可
zstyle ':vcs_info:git:*' stagedstr "%F{green}!" # commit されていないファイルがある
zstyle ':vcs_info:git:*' unstagedstr "%F{magenta}+" # add されていないファイルがある
zstyle ':vcs_info:*' formats "%F{cyan}%c%u(%b)%f" # 通常
zstyle ':vcs_info:*' actionformats '[%b|%a]' # rebase 途中,merge コンフリクト等 formats 外の表示
# %b ブランチ情報
# %a アクション名(mergeなど)
# %c changes
# %u uncommit
# プロンプト系
setopt PROMPT_SUBST # プロンプト文字列で各種展開を行なう
precmd () { vcs_info } # プロンプト表示直前に vcs_info 呼び出し
PROMPT='
${C_BG_GRAY}${C_GRAY}[%D %*] %M${C_RESET}
${C_BULE}%~${C_RESET} ${vcs_info_msg_0_}
${C_BULE}%# ${C_MAGENTA}>${C_RESET} ' # 3行の改行を含めている
</code></pre>
<div>
<h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/--nbFwWJH8N8/WjjtbXw-NNI/AAAAAAAABLQ/TH-2jonrLMQxivNTc3EQOvxjVQ52KH83wCLcBGAs/s1600/image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="193" data-original-width="542" height="113" src="https://4.bp.blogspot.com/--nbFwWJH8N8/WjjtbXw-NNI/AAAAAAAABLQ/TH-2jonrLMQxivNTc3EQOvxjVQ52KH83wCLcBGAs/s320/image.png" width="320" /></a></div>
</h2>
</div>
<div>
ポイント</div>
<div>
・改行を含むprompt(個人的には、色頑張った。)</div>
<div>
・vimっぽいコマンド(ctrl+j or ctrl+k)での履歴補完</div>
<div>
・いい感じの履歴にする(重複なし、スペースの重複を処理、zshのシェルにないコマンドは履歴に残さない)</div>
<div>
・未処理との記載分は、調べてないです。</div>
<div>
<br />
色合いの参考にしたものは下記、 pure.zsh なるもの。<br />
※ pure.zshは、外見の参考にしただけで内容は見ていないので、詳細はわかりません。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-o6kN-bE9DJQ/Wjju14XiDBI/AAAAAAAABLk/2P8bwHpe7-MX5T85tBLGfneVtJ_kXgYbQCLcBGAs/s1600/screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1034" data-original-width="1600" height="206" src="https://2.bp.blogspot.com/-o6kN-bE9DJQ/Wjju14XiDBI/AAAAAAAABLk/2P8bwHpe7-MX5T85tBLGfneVtJ_kXgYbQCLcBGAs/s320/screenshot.png" width="320" /></a></div>
画像の参考:<a href="https://suin.io/565">https://suin.io/565</a><br />
<br />
<h3>
vimrc</h3>
</div>
<pre><code>" .vimrc
" 設定系
set fenc=utf-8 " 文字コードをUFT-8に設定
set nobackup " バックアップファイルを作らない
set noswapfile " スワップファイルを作らない
set autoread " 編集中のファイルが変更されたら自動で読み直す
set hidden " バッファが編集中でもその他のファイルを開けるように
set whichwrap=b,s,h,l,<,>,[,] " 左右のカーソル移動で行間移動可能にする
set wildignorecase " 大文字小文字を無視
set wildmode=list,full " 完全補完モードに入る
" key設定系
nmap <esc><esc> :nohlsearch<cr><esc>
" 履歴補完
cnoremap <c-k> <up>
cnoremap <c-j> <down>
nnoremap H 20h " 左へ20移動
nnoremap J 20j " 下へ20移動
nnoremap K 20k " 上へ20移動
nnoremap L 20l " 右へ20移動
nnoremap s <nop>
nnoremap sh <c-w>h " 左windowへ移動
nnoremap sj <c-w>j " 下windowへ移動
nnoremap sk <c-w>k " 上windowへ移動
nnoremap sl <c-w>l " 右windowへ移動
nnoremap sH <c-w>H " 左へwindowを移動
nnoremap sJ <c-w>J " 下へwindowを移動
nnoremap sK <c-w>K " 上へwindowを移動
nnoremap sL <c-w>L " 右へwindowを移動
nnoremap s= <c-w>= " 幅を当分
nnoremap s+ <c-w>+ " 高さ+1
nnoremap s- <c-w>- " 高さ-1
" 見た目系
syntax on " syntaxハイライトをonにする
set t_Co=256 " 256色表示
colorscheme iceberg " スキーマ
set number " 行番号の表示
set cursorline " 現在の行を強調表示
set smartindent " インデントはスマートインデント
set showmatch " 括弧入力時の対応する括弧を表示
set laststatus=2 " ステータスラインを常に表示
set showcmd " 入力中のコマンドをステータスに表示する
" 全角スペース、末尾の半角スペース、タブを視覚化
if has("syntax")
syntax on
function! ActivateInvisibleIndicator()
syntax match InvisibleJISX0208Space " " display containedin=ALL
highlight InvisibleJISX0208Space term=underline ctermbg=Red
syntax match InvisibleTrailedSpace "[ ]\+$" display containedin=ALL
highlight InvisibleTrailedSpace term=underline ctermbg=Red
syntax match InvisibleTab "\t" display containedin=ALL
highlight InvisibleTab term=underline ctermbg=Red
endf
augroup invisible
autocmd! invisible
autocmd BufNew,BufRead * call ActivateInvisibleIndicator()
augroup END
endif
" Tab,space 系
set list listchars=tab:\\- " 不可視文字を可視化(タブが「-」と表示される)
set expandtab " Tab文字を半角スペースにする
set tabstop=4 " 行頭以外のTab文字の表示幅(スペースいくつ分)
set shiftwidth=4 " 行頭でのTab文字の表示幅
autocmd BufWritePre * :%s/\s\+$//ge " 保存時、行末スペースの自動削除
" 検索系
set ignorecase " 検索文字列が小文字の場合は大文字小文字を区別なく検索する
set smartcase " 検索文字列に大文字が含まれている場合は区別して検索する
set incsearch " 検索文字列入力時に順次対象文字列にヒットさせる
set wrapscan " 検索時に最後まで行ったら最初に戻る
set hlsearch " 検索語をハイライト表示
</c-w></c-w></c-w></c-w></c-w></c-w></c-w></c-w></c-w></c-w></c-w></nop></down></c-j></up></c-k></esc></cr></esc></esc></code></pre>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-a-LmCZ_doM8/WjjuUSulz0I/AAAAAAAABLY/o74WzEygFp8UB09L7juzqYO24IHGTAmfACLcBGAs/s1600/image%2B%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="633" data-original-width="747" height="271" src="https://2.bp.blogspot.com/-a-LmCZ_doM8/WjjuUSulz0I/AAAAAAAABLY/o74WzEygFp8UB09L7juzqYO24IHGTAmfACLcBGAs/s320/image%2B%25281%2529.png" width="320" /></a></div>
</div>
ポイント<br />
・検索系<br />
・見落とし対策系<br />
・補完、履歴補完<br />
<br />
vimのカラースキームは下記になります。<br />
URL: <a href="http://cocopon.github.io/iceberg.vim/" target="_blank">http://cocopon.github.io/iceberg.vim/</a><br />
<br />
以上になります。<br />
最初は、コピペで使うと思いますが、説明がないものだったり、多すぎたりするので少なめで説明を書いたものとして、いかがでしょうか。<br />
<br />
<br />
<h2>
おまけ(vimium)</h2>
これに合わせて、vimiumというchromeの拡張機能を使っているので<br />
chromeでも、まるでvim!(嘘です。)<br />
<span id="goog_433481631"></span><a href="https://www.blogger.com/"></a><span id="goog_433481632"></span><a href="https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb" target="_blank">https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb</a><br />
そこでもカスタマイズしているので、ついでにどうぞ。<br />
<br />
<pre><code>map h goBack
map l goForward
map sh previousTab
map sl nextTab
map H previousTab
map L nextTab
map i LinkHints.activateMode
map I LinkHints.activateModeToOpenInNewTab
</code></pre>
<br />
<br />
<br />
<span id="goog_433481629"></span><a href="https://www.blogger.com/"></a><span id="goog_433481630"></span><br />
その他参考サイトさま一覧<br />
・<a href="https://qiita.com/reireias/items/60ee9934fb1f5d94f125" target="_blank">https://qiita.com/reireias/items/60ee9934fb1f5d94f125</a><br />
・<a href="https://qiita.com/Hi-king/items/07b6f228b4980122fd96" target="_blank">https://qiita.com/Hi-king/items/07b6f228b4980122fd96</a><br />
・<a href="https://qiita.com/kotashiratsuka/items/ae37757aa1d31d1d4f4d" target="_blank">https://qiita.com/kotashiratsuka/items/ae37757aa1d31d1d4f4d</a><br />
・<a href="http://ama-ch.hatenablog.com/entry/20090109/1231526834" target="_blank">http://ama-ch.hatenablog.com/entry/20090109/1231526834</a><br />
・<a href="https://qiita.com/tkengo/items/cd7d9d56de1b2088dc4c" target="_blank">https://qiita.com/tkengo/items/cd7d9d56de1b2088dc4c</a><br />
・<a href="https://qiita.com/mfujimori/items/9fd41bcd8d1ce9170301" target="_blank">https://qiita.com/mfujimori/items/9fd41bcd8d1ce9170301</a><br />
<br />
<br />Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-3668535334223818872017-12-18T19:21:00.000+09:002017-12-20T11:31:43.122+09:00上海で5年間体験した中国のキャッシュレス生活 (ShanonAdventCalendar2017・14日目)<br />
こんにちは、エンジニアの輝です。<br />
<br />
最近、中国のキャッシュレスが日本ですごく話題になっているそうなので、今回私は上海で5年間体験したキャッシュレス生活を軽く紹介させていただきたいです。<br />
<br />
日本のテレビやネットの紹介よりは、実際に普段の生活で使ってみてキャッシュレスはどんなことかもっと実感できます。今私は日本に戻って、キャッシュレス遅れの日本の生活にちょっと不便を感じてしまうこともあります(休日銀行や休み、しかもATMでの引き出しは有料!びっくりするほど)。<br />
<br />
中国でキャッシュレスといえば、基本的にはアリペイのことを避けては通れないこと。<br />
<br />
じゃ、まずアリペイを中心で話をしましょう。<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2011年、最初のアリペイとの出会い </span></span></li>
</ul>
私は2011年に日本から上海に戻って、初めて支付宝(アリペイ)のアカウントを作った。そのときのきっかけは、携帯の通話料金のチャージだ。<br />
<br />
(※実際に、アリペイはアリババグループの個会社のアント・フィナンシャルが行っている非接触型決済サービスである。設立日は2004年12月8日だ)<br />
<br />
中国では、電話料金は直接に口座やクレジットカードから落とすのは基本的になく、残高が少なくなった時に、普通店頭で一時的に支払い用のカード(電話カード)を現金で購入して、そのカードのシリアル番号と暗証番号を携帯で入力してチャージします。ただ、電話カードを購入するのはちょっと不便がある。電話カードを販売する店頭を探して、カードの購入時に順番を待つ、購入後に長いシリアル番号と暗証番号の入力などはすごく時間がかかる。その時に、会社ですぐ隣に座っている同士のZさんに電話カードを売る場所をたずねたところ、びっくりした顔をして、まだ知らないの?電話カードの販売店があるが、皆もう買わないですよ!支付宝(アリペイ)を使ってチャージすれば割引も付いてくれるよ!と答えた。<br />
<br />
早速アリペイのアカウントを作ってチャージしてみました。確かに、50(833円ぐらい)元をチャージして、49.9元を支払って済んで、割引は0.2%だった。操作時間は初回のみの電話番号入力手間を含めて僅か1分未満!普通に電話カードを買うなら1時間もかかるかもしなれないのに。出かける時間も省けて、割引も付いているので、初回のアリペイの体験は大満足!(時期によって割引の金額が変わる)<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://4.bp.blogspot.com/-97B84ZG-c-4/Wjh7UxfoDGI/AAAAAAAABG8/82Ujkd744CYKwp-kcYGbiRKgzu3TcmhYgCLcBGAs/s1600/shoujichongzhi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="300" data-original-width="500" height="240" src="https://4.bp.blogspot.com/-97B84ZG-c-4/Wjh7UxfoDGI/AAAAAAAABG8/82Ujkd744CYKwp-kcYGbiRKgzu3TcmhYgCLcBGAs/s400/shoujichongzhi.jpg" width="400" /></a></div>
<br />
図1:電話料金をチャージする時に割引がある。<br />
<br />
この時期は、アリペイはPCで使うものだった。<br />
<br />
<b>※2011年前まで、アリペイは基本的にTaobaoの支払い手段だけ</b><br />
最初、アリペイはTaobaoというアリババ通販のために作った電子マネーで、それ以外の機能はほんとんでなかった。2011年まではアリペイは基本的にTaobaoの支払い手段だけと認識してもいい。その後どんどん進化して来た。しかし、Taobaoの初期は私は日本にいたので、アリペイをあまり使わなかった。<br />
<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2011年11月11日(独身の日)、アリペイの一日の取引金額は560億円</span></span></li>
</ul>
アリペイの便利さを知ってから、Taobaoでよく買い物をしてきた。中国は広すぎて、買いたいことを全部店頭で買うなら、北京・上海のような大都市ではないと、購入できるものはすごく限られている。Taobaoでの買い物は、服、食べ物、日用品、スマートフォン、家電、家具など。特に地方だけで売れている商品は以前そのところに行かないと入手できないもの全部Taobaoだ!知らないものがあるが、Taobaoで買えないものがないという常識になったほど。例えば、広西省(ベトナムと隣接)の金柑、吉林省(北朝鮮と隣接)のお米、ウィグル自制区(アフガニスタンと隣接)のメロンなど、これらの食べ物を安くて新鮮で買うのはTaobaoが一番だ。(農家からの直送なので、安くて新鮮)<br />
<br />
特に、毎年の11月11日は独身の日であり、割引が50%のキャンペーンが多く、皆まとめて買うことが多かった。私は2011年11月11日にTaobaoで10万円以上のものを買った。翌日出社して、多くの同士が休みを取った。また翌日に聞いたところ、徹夜で買い物をしたという。正に買い物のカーニバルだった。Taobaoでの買い物はほとんどはアリペイで入金することなんだ。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://3.bp.blogspot.com/-CBKRGfJqGlg/Wjh8jNalMBI/AAAAAAAABHI/b0uwEVkc3BM2x0Z-Mgza_1fAoPpNbvZhACLcBGAs/s1600/taobao.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="542" data-original-width="977" height="353" src="https://3.bp.blogspot.com/-CBKRGfJqGlg/Wjh8jNalMBI/AAAAAAAABHI/b0uwEVkc3BM2x0Z-Mgza_1fAoPpNbvZhACLcBGAs/s640/taobao.jpg" width="640" /></a></div>
<br />
図2:広西省の名産:金柑(300円未満/500g)<br />
<span style="color: blue;"><br /></span>
<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2012年、公共料金の支払いサービスの開始</span></span></li>
</ul>
上海では、水道料や電気代、ガス代などは、直接に口座やクレジットカードから落とすのは基本的になく、普通店頭で支払うことだった。知らないうちに、アリペイはTaobaoと全く関係ない公共料金の支払いサービスを提供しはじめた。それは必要な情報を入力したら、毎月アリペイのアカウントから自動的に落とすことだ。もちろん、一時的にアリペイで支払うことも可能だ。これはすごく便利なことだ。<br />
<a href="https://1.bp.blogspot.com/-WhyuNTEQYc8/WjfN7PciO0I/AAAAAAAABFo/SExjIRj5w44yGIy-5QcOyG49Lzy7TCqEwCLcBGAs/s1600/shuidianmei.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="301" data-original-width="600" height="320" src="https://1.bp.blogspot.com/-WhyuNTEQYc8/WjfN7PciO0I/AAAAAAAABFo/SExjIRj5w44yGIy-5QcOyG49Lzy7TCqEwCLcBGAs/s640/shuidianmei.jpg" width="640" /></a><br />
図3:水道料、電気代、ガス代の支払いサービス<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2012年、PC時代からモバイル時代へ</span></span></li>
</ul>
2011年までは、アリペイのPC時代だったが、2012年以降はモバイル時代になった。2012年以降、Taobaoで買い物をするときによく気づいたのは、PCでアリペイで支払う時に、モバイルのアリペイで支払うことをよく薦められたことだ。モバイルで支払えば、PCで支払う場合のない割引が付いてくれること。<br />
<br />
その時は、私はPCのウィルスを恐れて、モバイルで暗証番号の入力がより安全だと思うのでモバイルでしばしば支払うことになったが、今はその時のことを思い出して、それはアリペイの将来を見としたすごい戦略だった。<br />
<a href="https://4.bp.blogspot.com/-ChVYaxkEfi0/WjfOIYqi9NI/AAAAAAAABFs/oPq77gTLcYkIKYBUoFA11R0tGnY2mzEcgCLcBGAs/s1600/huafei_diannao.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="541" data-original-width="750" height="459" src="https://4.bp.blogspot.com/-ChVYaxkEfi0/WjfOIYqi9NI/AAAAAAAABFs/oPq77gTLcYkIKYBUoFA11R0tGnY2mzEcgCLcBGAs/s640/huafei_diannao.jpg" width="640" /></a><br />
図4:スマートフォンで支払えば、割引がPCより多い(左はPC、右はスマートフォン)<br />
<br />
それ以降、中国国産のスマートフォンが安くて入手でき、スマートフォンの利用者(特に若者)は年間0.5億人増えたという。スマートフォンを電話として利用するのはごく小さい機能の一部で、大部はインターネットにつながりSNSや通販サービスの利用だ。そのトレードに乗って、アリペイの使用は基本的にPCで使うものから一気に半分以上をモバイルで使うようになった。今は70%以上はモバイルで使うそうだ。<br />
<br />
モバイルで使うというのは、中国でモバイル(スマートフォンやタブレート)の利用者はPCの利用者より数が多いからだ。あと、モバイルで使うのは、PCに向けて使うよりは、利用者が増えるだけではなく、人が利用する機会が多くなることだ。例えば電車で通勤する時とか、ベッドに横になった時とかでも気軽に使えること。それによって売り上げも上がることに繋がることだ。<br />
<br />
この時期から、キャッシュレスというよりは、<b>スマホ決済</b>と呼んだだほうがぴったりだろう。<br />
<br />
<a href="https://1.bp.blogspot.com/-YhgEnliE0oY/WjfOZ8YZMAI/AAAAAAAABF0/DAut24ghgu4OpVfpoNsV0aInQeG2imj3QCLcBGAs/s1600/alipay_new.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1334" data-original-width="750" height="640" src="https://1.bp.blogspot.com/-YhgEnliE0oY/WjfOZ8YZMAI/AAAAAAAABF0/DAut24ghgu4OpVfpoNsV0aInQeG2imj3QCLcBGAs/s640/alipay_new.png" width="358" /></a><br />
図5:現在のアリペイのサービス一部のiphoneアプリ・キャプチャ(日本のスマートフォン😂)<br />
<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2012年のいつか、各種店舗でのアリペイ支払いサポート</span></span></li>
</ul>
アリペイでい払えば割引が付いてくれることだ。顧客だけではなく、店舗の経営者にもキャッシュバックしてくれる!外食を食べる時にアリペイを使わないと損になる。<br />
<a href="https://4.bp.blogspot.com/-bnWwnIHJ9Hg/WjfPGKxiCMI/AAAAAAAABGA/Z_L2oeRMWqwADFJ47p__7P2eCjGTJrDnQCLcBGAs/s1600/erweima.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1200" height="400" src="https://4.bp.blogspot.com/-bnWwnIHJ9Hg/WjfPGKxiCMI/AAAAAAAABGA/Z_L2oeRMWqwADFJ47p__7P2eCjGTJrDnQCLcBGAs/s400/erweima.jpg" width="300" /></a><br />
図6:飲食店のドアに飾っているたくさんのバーコードに、アリペイがある(右上)<br />
<br />
<a href="https://3.bp.blogspot.com/-37vqHBunAGs/WjfPGDYGSKI/AAAAAAAABGE/uQ8dFxSsiukG2dzodJQQd9B7kvK7a3CtwCLcBGAs/s1600/hanbao.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="770" data-original-width="1600" height="192" src="https://3.bp.blogspot.com/-37vqHBunAGs/WjfPGDYGSKI/AAAAAAAABGE/uQ8dFxSsiukG2dzodJQQd9B7kvK7a3CtwCLcBGAs/s400/hanbao.jpg" width="400" /></a><br />
図7:ハンバーガーをアリペイで買うなら10%割引<br />
<br />
<br />
<a href="https://4.bp.blogspot.com/-Ymh7EmnNuhE/WjfPGDHJvqI/AAAAAAAABF8/mMY47rmwkU8U9fdtrZr64qavRTlcz9iwwCLcBGAs/s1600/zhifubao2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="900" height="266" src="https://4.bp.blogspot.com/-Ymh7EmnNuhE/WjfPGDHJvqI/AAAAAAAABF8/mMY47rmwkU8U9fdtrZr64qavRTlcz9iwwCLcBGAs/s400/zhifubao2.jpg" width="400" /></a><br />
図8:スーパーでのアリペイ決済<br />
<br />
2012年12月までは、アリペイの<b>アカウント数は8億以上</b>だそう。<br />
<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2013年、投資サービスの開始</span></span></li>
</ul>
2013年に、アリペイは余額宝という投資サビースを提供し始めた。<br />
<br />
それまでは、アリペイを使う時に事前に口座からアリペイのアカウントにお金を振り込む必要があり、今後使うために残高はそのままアリペイのアカウントに残ります。余額宝というサービスはこれらのアリペイの残高を管理してくれて、金利も付いてくれる普通預金サービスです。最初は金利はすごく高くて、年7%だった。最初は皆半信半疑で小さい金額を入れて使ってみました。安全であることを確認した後、銀行より遥かに高い金利なので私もどんどん大きな金額を入れました。今金利がかなり低くなったが、まだ年4%ぐらいだ。日本人にとってこの金利はどういう数字だろうか?<br />
<br />
その後は、余額宝という普通預金以外に、様々な投資サービスも提供した。リスクが高く、金利はもっと高い株売買みたいなサービスが色々。あとは色んな小金額のC2B金融サービスもあった。<br />
<br />
その後は、アリペイの利用者数が増えることによって、銀行に預金する人がどんどん減っていくので、中国の4つの国営銀行がプレシャーが感じ、政府によってアリペイに規制を加えることまでほど影響力を持った。<br />
<a href="https://3.bp.blogspot.com/-DF0TSFDiulM/WjfP0vD92HI/AAAAAAAABGM/YfEv_JUeDhkD1TZtkZpaHqgo1L7LJFAQQCLcBGAs/s1600/yuebao.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="640" src="https://3.bp.blogspot.com/-DF0TSFDiulM/WjfP0vD92HI/AAAAAAAABGM/YfEv_JUeDhkD1TZtkZpaHqgo1L7LJFAQQCLcBGAs/s640/yuebao.jpg" width="360" /></a><br />
図8: 余額宝のスマートフォン画面(金利:年4.07%)<br />
<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2014年、ゴマ信用サービスの開始</span></span></li>
</ul>
2014年のいつから忘れましたが、アリペイのモバイルアプリには、ゴマ信用のポイントが付いてくれました。こいつを初めて使うのはホテルを利用の時だった。<br />
<br />
中国ではホテルに泊まる時には基本的に保証金が必要なもので、Checkout時にも店員の部屋チェックも必要だ。アリババの宿泊予約アプリでホテルを予約する時に、ゴマ信用のポイントがある数字以上であれば、保証金と部屋チェックを待つ時間も省けることだ。それ以外、ゴマ信用のポイントは一部の国でビザ取る時に中国政府のオフィシャル証明根拠として参考されるそうです。それ以外も色んな場面で使われるそうです。<br />
<a href="https://4.bp.blogspot.com/-F08skdUPLyE/WjfQAltViNI/AAAAAAAABGc/LT4UUe-cR4wASxt6aUu8j0uCu-PbAIDcgCLcBGAs/s1600/zhimaxinyong.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1334" data-original-width="750" height="640" src="https://4.bp.blogspot.com/-F08skdUPLyE/WjfQAltViNI/AAAAAAAABGc/LT4UUe-cR4wASxt6aUu8j0uCu-PbAIDcgCLcBGAs/s640/zhimaxinyong.jpg" width="356" /></a><br />
図9:ゴマ信用のポイント点数<br />
<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2015年、Didi サービスサポート</span></span></li>
</ul>
2015年一年で、Didi(中国名:滴滴出行、Uberの中国事業を買収したライドシェア会社)の乗車回数は14億回を達成。WeChatの決済もサポートが、半分以上はアリペイで決済すること。その一年での補助金は2000億円ぐらいと言われている。Didiの投資会社の1つはアリババであり、もう1つはテンセントである。<br />
<a href="https://3.bp.blogspot.com/-smyDyo_YGa0/WjfP_2O8cXI/AAAAAAAABGY/f1BUncy9FugOeEwaug2dQhbBukQKelPTwCLcBGAs/s1600/Didi2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="480" height="400" src="https://3.bp.blogspot.com/-smyDyo_YGa0/WjfP_2O8cXI/AAAAAAAABGY/f1BUncy9FugOeEwaug2dQhbBukQKelPTwCLcBGAs/s400/Didi2.jpg" width="266" /></a><br />
図10:Didi のサービス画面<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">2016年、バイクシェアリング </span></span></li>
</ul>
2016年暴発的に発展してきた中国のバイクシェアリング事業、それが拡大した理由の一つに、自転車の検索、解錠、決済まで全てスマホで完結する利便性の高さが挙げられる。決済の手段はアリペイとWeChatペイだ。<br />
最近では日本のITベンチャー企業の参入が相次いでいるが、中国に比べてスマホ決済が普及していない日本国内では、決済の仕組みをいかに便利かつわかりやすく設計できるかが鍵となるだろう。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://3.bp.blogspot.com/-rRXquRzJBig/WjfQ2zcmPpI/AAAAAAAABGo/dRveBxlgBwYP1k6nGJ_KjvGtYqAKDMTjACLcBGAs/s1600/ofo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="463" data-original-width="800" height="231" src="https://3.bp.blogspot.com/-rRXquRzJBig/WjfQ2zcmPpI/AAAAAAAABGo/dRveBxlgBwYP1k6nGJ_KjvGtYqAKDMTjACLcBGAs/s400/ofo.jpg" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
図11:ofo(小黄車)<br />
<ul>
<li><span style="font-size: large;"><span style="color: blue;">これから〜</span></span></li>
</ul>
これからの時代はAI、ビッグデータの時代と言われてる。アリペイは、この10年以上で溜まった数億のアカウントと各アカウントの消費履歴のビッグデータは宝蔵と言っても過言ではない。<br />
<br />
上記のゴマ信用はその中の1つで、これからもっとすごいサービスが提供されることを期待できるだろう。<br />
<br />
<br />
<span style="font-size: large;"><span style="color: blue;"><b>まとめると、アリペイの進化パスは下記になる:</b></span></span><br />
<br />
①単純な通販の電子マネー ⇒ ②公共サービス ⇒(モバイルへ転身) ③集客機能<br />
⇒ ④金融・投資サービス ⇒ ⑤交通サービス統合 ⇒ ⑥決済機能中心のプラットホーム<br />
⇒ 何だろう(脱スマホ?顔ペイ、指紋ペイとか)<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">その他の電子マネー</span></span></li>
</ul>
キャッシュレスというのは、アリペイ以外にWeChatもあります。この2種以外は基本的にはない。<br />
<br />
WeChatは、もともとインスタントメッセンジャーアプリだが、中国市場のシェア率はほぼ100%なので、その優位性を活かせるために電子マネーのサービスも提供して始めた。中国の電子マネーサービスとしては、アリペイの唯一のライバルだ。<br />
<br />
WeChatペイの電子マネーサービスの提供はアリペイよりかなり遅れたが、2014年の旧正月に紅包(お年玉)の配りで一気に広がった。その後、WeChatのユーザの間にお互いにの送金やお年玉の配りから、決済や金融投資までサービスがどんどん豊富になった。<br />
<a href="https://1.bp.blogspot.com/-nOBvsLrjBGE/WjfP_9AUV9I/AAAAAAAABGU/e4N__IRFc4kN-mt_SJ3F7uVNzAkAQekMQCLcBGAs/s1600/timg.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="396" data-original-width="501" height="252" src="https://1.bp.blogspot.com/-nOBvsLrjBGE/WjfP_9AUV9I/AAAAAAAABGU/e4N__IRFc4kN-mt_SJ3F7uVNzAkAQekMQCLcBGAs/s320/timg.jpg" width="320" /></a><br />
<a href="https://4.bp.blogspot.com/-_1OKTpVFXOo/WjfP_3qFqeI/AAAAAAAABGQ/f-CKggmpslsNM_n9W70s0m22GWe9JUNGQCLcBGAs/s1600/wechat_ali.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="321" data-original-width="599" height="213" src="https://4.bp.blogspot.com/-_1OKTpVFXOo/WjfP_3qFqeI/AAAAAAAABGQ/f-CKggmpslsNM_n9W70s0m22GWe9JUNGQCLcBGAs/s400/wechat_ali.png" width="400" /></a> <br />
図12: WeChatペイ VS アリペイ<br />
<br />
<br />
<ul>
<li><span style="font-size: large;"><span style="color: blue;">普通中国人のキャッシュレス生活</span></span></li>
</ul>
1.ネット通販の支払い:Taobaoや他のネット通販<br />
<br />
2.公共料金の支払い:水道料金、電気料金、ガス料金など<br />
<br />
3.店頭での買い物:スーパーで野菜や果物の購入から、外食の支払いまで<br />
<br />
4.トラベルや交通費の支払い:宿泊費支払い、タクシー料金、バス・電車・飛行機料金<br />
<br />
5.医療費の支払い:病院で医療費の支払い<br />
<br />
6.C2Cの振込:個人間のお金のやり取り、割り勘、海外送金<br />
<br />
7.金融投資:定期預金、普通預金、株売買、ネット金融などなど<br />
<br />
・・・などなど <br />
<br />
<ul>
<li><span style="color: blue;"><span style="font-size: large;">最後に感想</span></span></li>
</ul>
いっぱい書きましたが、まとめると、下記の感想があります:<br />
<br />
1.一言で言えば、スマートフォンがあれば、現金で支払うよりはスマホ決済のほうが多いことだ。スマホ決済は誰も使えるし、クレジットカードよりハードルが低く、、決済後はすぐに残高が確認できるところがすごい便利。<br />
<br />
2.キャッシュレスは目的ではなく、ただ1つの現象だ。目的は繋がり(人と人、サービスとサービス、人とサービス)、消費データのデジタル化・可視化だ。<br />
<br />
3.お金と関係するため、投資や金融ツールの周辺サービスにも繋がる。<br />
<br />
4.これからのAI、ビッグデータ時代に、数億のアカウントとそれより数百倍の消費データをどういう風に活かして、どういうサービスを提供してくれるだろう、お楽しみに・・・<br />
<br />
5.日本もキャッシュレスの社会になってほしい、便利だから。少なくとも、休日のATMでの引き出し手数料を節約できるんだ!^_^<br />
<br />
6.アリペイやWeChatの資金はでかすぎる。アリペイやWeChatペイで支払ったお金は基本的にアリペイやWeChatペイの内部循環なので、外部には流さない。大量の資金はずっと溜まっていて、数十兆円以上にも及んだかもしないと言われているが、管理は大丈夫?<br />
<br />
<br />Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-988385995704066370.post-9753157600967990112017-12-17T00:15:00.002+09:002017-12-17T00:15:42.252+09:00SaaS 連携の作り方いろいろ (ShanonAdventCalendar2017・16日目)<br />
この記事は、 <a href="https://qiita.com/advent-calendar/2017/shanon" target="">Shanon Advent Calendar 2017</a> の 16日目として投稿しています。<br />
<br />
<h2>
はじめに</h2>
ご無沙汰しております。chappie です。<br />
最近はプロダクトマネージャーとして、自社プロダクトと他社サービスとの間を結ぶ、連携系サービスを主に担当しています。一部では「連携おじさん」と呼ばれているとかいないとか。<br />
<br />
連携系サービス、といってしまうとちょっと大雑把すぎるので、もう少し具体的に書いてみます。<br />
シャノンでは SHANON MARKETING PLATFORM というマーケティング用 SaaS を提供しています。 マーケティング用のシステムでは主に見込み客のデータを扱うので、同じく顧客データを扱う SFA や CRM など営業用ツールと併存することが一般的です。 この見込み客/顧客データ間の同期や、それに関連する履歴情報の交換をシステム間で行う機能が、ここでいう連携系サービスです。<br />
<br />
さて、このような連携系サービス、いくつか作り方のパターンがあります。 実際、我々が提供するいくつかの連携系サービスもそれぞれに異なった作りをしているので、ちょっと整理してみたいと思います。<br />
<br />
これから SaaS 間のデータ連携に何かしらのかたちで関わる方の参考になれば幸いです。<br />
<br />
==<br />
ちなみに本記事を書いてる途中で、<a href="https://qiita.com/advent-calendar/2017/cdatasoftware" target="_blank">CData Software さんの Advent Calendar </a>に似た主旨のエントリーが最近投稿されたことに気づきました。あわせて参照いただくとより理解が進むかもしれません。<br />
→ <a href="https://qiita.com/jonathanh/items/4848ba95d000afd8de04" target="_blank">SaaS 連携/クラウド連携のパターン:連携の為のツールの種類は?</a><br />
==<br />
<br />
<h2>
大分類:直通か中継か </h2>
まず構成によって大きく分けると、1.直通タイプ、 2.中継タイプ の2種類に分かれます。<br />
連携対象のシステムAとシステムBがあったとして、それぞれが直接、相手のシステムにデータ連携するのが「直通タイプ」、 間に何かしらの中継システムを介して、両者の間のデータを仲介するのが「中継タイプ」と便宜上分類します。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-OcJoUQrRur8/WjUdPt5VgHI/AAAAAAAAE8o/miFLwTm83f0aLyffAngq5Gl6rOJA3doFACLcBGAs/s1600/saas_connect_type.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" data-original-height="576" data-original-width="795" height="231" src="https://4.bp.blogspot.com/-OcJoUQrRur8/WjUdPt5VgHI/AAAAAAAAE8o/miFLwTm83f0aLyffAngq5Gl6rOJA3doFACLcBGAs/s320/saas_connect_type.png" title="直通タイプと中継タイプ" width="320" /></a></div>
<br />
<h2>
直通タイプ:内包型 </h2>
アプリケーション内に連携システムを作る場合です。<br />
当然ですが、片方が自社サービスで内部実装可能である場合にのみ可能です。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-eXQlB42CvBI/WjUd3EZ-adI/AAAAAAAAE8w/2bCHDIgioMcRYKm8OYoiTrrGw5I_d7dUwCLcBGAs/s1600/saas_connect_direct1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" data-original-height="342" data-original-width="883" height="153" src="https://1.bp.blogspot.com/-eXQlB42CvBI/WjUd3EZ-adI/AAAAAAAAE8w/2bCHDIgioMcRYKm8OYoiTrrGw5I_d7dUwCLcBGAs/s400/saas_connect_direct1.png" title="直通タイプ:内包型" width="400" /></a></div>
<br />
自社プロダクトの機能と密接に統合できる。たとえば、変更を即座に連携したり、他の機能と連携機能を連動させることがやりやすい。よくも悪くも自社プロダクトの影響を受けやすいタイプです。<br />
<br />
また、一方的にデータを送る片方向連携に向いている一方で、相手からのデータ反映をタイミングよく行うことは苦手です。<br />
<br />
<h2>
直通タイプ:プラットフォーム利用型 </h2>
連携対象のサービスが PaaS でもある場合、そのプラットフォーム上で動くアプリを作ることでデータ連携を実現できる可能性があります。<br />
SFA/CRM の代表格、Salesforce は正にその典型で、シャノンの Salesforce 連携サービス「<a href="https://appexchangejp.salesforce.com/appxListingDetail?listingId=a0N300000016bX7EAI" target="_blank">SMP for Salesforce</a>」 は Salesforce の AppExchange アプリとして実現しています。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-hMxWDJScIxs/WjUyy2G-p6I/AAAAAAAAE9M/DsbuqI025jw7Q8_heR7zUi9C4jtAFTrCwCLcBGAs/s1600/smp4salesforce_arch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br class="Apple-interchange-newline" /><img border="0" data-original-height="231" data-original-width="852" height="172" src="https://2.bp.blogspot.com/-hMxWDJScIxs/WjUyy2G-p6I/AAAAAAAAE9M/DsbuqI025jw7Q8_heR7zUi9C4jtAFTrCwCLcBGAs/s640/smp4salesforce_arch.png" width="640" /></a></div>
<div>
<br /></div>
この場合、片方のシステム上で動作することになるので、どちらかというと直通タイプといえますが、プラットフォーム上で作るアプリは中継タイプでの連携システムに近いものになるでしょう。<br />
<br />
こちらも、プラットフォームとして利用する側のシステムとの統合はしやすい一方、もう一方のシステムとは疎になりがちです。 また、プラットフォームの稼働状況や制限の影響を受けることになります。 (たとえば、 Salesforce の容量やジョブキューの実行性能など)<br />
<br />
<h2>
中継タイプ:インテグレーションサービス利用型 </h2>
ETL/EAI と呼ばれるシステム統合サービスを利用する場合です。<br />
たとえば <a href="https://www.infoteria.com/jp/warp/" target="_blank">Asteria Warp </a>や <a href="https://www.appresso.com/servista/" target="_blank">Data Spider</a> など、SaaS やオンプレのエンタープライズシステム含め、DB や Excel など各種データソースまであらゆる面での連携・統合を実現するサービスが提供されています。<br />
データ連携自体が専門なので、一から連携システムを構築することに比べれば実装コストは大幅に小さく済ませられる可能性があります。ただし、一般的には利用料が比較的高価であったり、運用のための知識面でのサービスロックインされる制約はあります。<br />
<br />
ちょっと毛色の異なるものとして、 <a href="https://zapier.com/" target="_blank">Zapier</a> や <a href="https://www.built.io/products/flow" target="_blank">Built.io Flow</a>、 <a href="https://flow.microsoft.com/ja-jp/" target="_blank">Microsoft Flow</a> などのタスクオートメーションサービスを利用するという手もあります。<br />
サービスでアダプタが用意されているか自作が可能で、「システムAに新規データが入ったらシステムBにも同じデータを入れる」といった比較的単純な連携であれば選択肢となりうるでしょう。<br />
ただし、あくまでこれらはタスク自動化という側面が強いので、本格的なデータ連携には向かないと思われます。<br />
<br />
<h2>
中継タイプ:自前システム作り込み型 </h2>
中間サーバを設置して、1から連携処理を作り込む場合です。<br />
直接 API を呼び出すプログラムを自前で作成、あるいは CData や DataSpider などのアダプターを組み込んで連携システムを構築します。<br />
<br />
サイボウズ社の kintone と連携するシャノンの連携サービス「<a href="https://kintone-sol.cybozu.co.jp/integrate/shanon001.html" target="_blank">kintone コネクタ</a>」はこのタイプです。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-d8QP56LVfkQ/WjUfDTSiPWI/AAAAAAAAE88/ElKS9t_CdB4bKGW5XZDEHXcGXolMwdATgCLcBGAs/s1600/kintone%2B%25E3%2582%25B3%25E3%2583%258D%25E3%2582%25AF%25E3%2582%25BF%2B%25E3%2583%2588%25E3%2582%2599%25E3%2582%25AD%25E3%2583%25A5%25E3%2583%25A1%25E3%2583%25B3%25E3%2583%2588%25E5%2590%2591%25E3%2581%2591%25E7%2594%25BB%25E5%2583%258F%25E4%25BD%259C%25E7%2594%25BB%25E7%2594%25A8.crop.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" data-original-height="589" data-original-width="935" height="402" src="https://3.bp.blogspot.com/-d8QP56LVfkQ/WjUfDTSiPWI/AAAAAAAAE88/ElKS9t_CdB4bKGW5XZDEHXcGXolMwdATgCLcBGAs/s640/kintone%2B%25E3%2582%25B3%25E3%2583%258D%25E3%2582%25AF%25E3%2582%25BF%2B%25E3%2583%2588%25E3%2582%2599%25E3%2582%25AD%25E3%2583%25A5%25E3%2583%25A1%25E3%2583%25B3%25E3%2583%2588%25E5%2590%2591%25E3%2581%2591%25E7%2594%25BB%25E5%2583%258F%25E4%25BD%259C%25E7%2594%25BB%25E7%2594%25A8.crop.png" title="kintone コネクタ システム概要図" width="640" /></a></div>
<br />
<br />
kintone アプリを利用して連携設定を行うので、一見 kintone 上に連携システムが構築されているように見えますが、 実際は連携システムが Amazon Web Services を利用して別途構成されています。この連携システム自体、AWS Lambda を中心に構成されたなかなかおもしろい作りなのですが、今回はその詳細は割愛します。<br />
<br />
中継タイプの利点として、連携対象システム本体の影響を直接受けにくい点や、他サービスとの連携にも拡張しやすい/既存の連携システムを利用できることが挙げられます。<br />
<br />
また、連携先のシステムに詳しい外注先を活用できるというメリットもあります。上で紹介した SMP for Salesforce は Salesforce に詳しい<a href="http://www.brainhearts.com/" target="_blank">ブレインハーツさん</a>、kintone コネクタ は kintone や AWS に詳しい<a href="https://www.r3it.com/" target="_blank">アールスリーインスティテュートさん</a>にそれぞれご協力いただきました。(いつもお世話になっております!)<br />
<br />
逆に中継タイプの弱点としては、連携対象システムの外からできることしかできないという点や、中継者自身の可用性も当然担保する必要があり、特に自前で構築する場合はそれ相応のコストをかける必要があります。<br />
<br />
<h2>
おわりに</h2>
以上のように、システムの置かれた状況や目的によって、どのような仕組みでデータ連携を実現するかは異なります。<br />
<br />
仕組みが異なれば、得意な処理やボトルネックなども異なるため、それぞれのタイプにあわせて開発時の注力ポイントや、運用上の留意点などどこに重点を置くべきか考える必要があります。実際の連携処理のレベルでの注意点などについてはまたいずれ、機会を見つけてまとめてみたいと思います。<br />
<br />
とりあえず今回は以上です。<br />
<div>
<br /></div>
Anonymousnoreply@blogger.com0