ウンcodeプログラマの日常

底辺大学生プログラマの技術的なメモです

【化石】飛び入りでハッカソンでたら優勝してGaiaxインターン決まった話

あれ、下書きになんか面白い記事あるじゃん

先ほどはてなブログに3年ぶりに記事を投稿して、下書き一覧をみたら今回の記事が。あー書いていたのに公開していなかったのか。 色々と3年前の自分の若さも感じるいい記事かなと思ったので公開しました。 ちなみに、このGaiaxとは、この記事の出来事から長い付き合いになりました。(今もGaiax出資先の会社で元気に働きつつ、同じフロアのGaiaxの方々と交流しています)

以下、2020年当時のブログ記事

タイトル通りですね。
なんかなろう系ぽい臭さを感じますが(なろう系を馬鹿にしているわけではありませんよ?)実際に起こったことなんでね...
まだ、自分の中でも事態の整理がついていないので、整理もかねてブログ記事にしていきます...

何が起こったか(時系列ベース)

1Dayゲームジャムに参加

コロナが出始めた頃でしたかね... バイト先の同僚の紹介で1Dayゲームジャムに参加しました。

connpass.com

ゲームジャム自体は初めてで、ランダムなメンバーで構成されたチームで制限された製作時間の中の開発は結構面白いものがありました。 ですが、満足に動く物はできず不完全燃焼気味に終わります。 この時、後で出てくるハッカソン参加メンバーと出会いました。

ハッカソン参加に誘われる

5/22(金)の夕方に、ゲームジャムにて同じチームで製作した「安黒」さんから、前のゲームジャムメンバーに向けてハッカソンに一緒に出ないかとのお誘いがありました。 ふ~ん、ハッカソン。面白そう。(結構軽い気持ちでOKしました)

techplay.jp

あっ、よく見たらハッカソン明日じゃん(は? は? は? やば、とりあえずアイデア考えなきゃ... テーマが「リモートワーク時代に必要になるツール」 結構色々考えれそうですね。 今から作って2日間で完成して、かつ見た目も良くて面白い(もちろんリモートワークの課題も解決出来る) そう考えるとZoomが弄るのに良さそうなコンテンツだなぁと そこでZoom経由で画面に流れるコメントやスタンプを相互に送り合える&Zoom経由でトランプゲームなどができるアイデアを考えました。 メンバーと共有して、その線で開発を進めることもスムーズに決まりました。

ハッカソン1日目

システム構成としてはZoomにアクセスするPC側アプリとコメントやスタンプを送れるスマホアプリ、それとスマホアプリから送られるタスクを集約してPC側アプリに情報を提供するデーターベースと非常にシンプルな物となっています。 開発期間が2日ということもあり、ユーザー認証などは何も考えず、かつサーバーサイドの製作をしなくてよいFirebaseの使用を考えて実装を進めていました。

ですが、FirebaseがiOS,Androidでしか使えないことを完全に失念していて、途中で詰まりました。ConoHa上にでもサーバー立てて超高速でサーバーサイドを作ろうかと思いましたが、流石に頭悪いと思って簡単にUnityから触れるDBサービスを探してニフクラウドのモバイルバックエンドを採用しました。
その後、メンバー全員の努力もあり1日目の夜には基本的な機能であるコメントとスタンプを送り合うことができるようになりました。

ハッカソン2日目

2日目が始まった時点で基本機能は実装できていましたが、トランプゲームなどのゲームは全く実装できていませんでした。
ある程度時間は残されていましたが、メンバーとの相談の結果、PC側モバイル側のアプリのバグ取りやUXUIの改善に注力することになりました。結果、かなり使いやすく問題も減らすことができたので正しい判断だったなと思います。

制限時間が来て、各チームの発表が始まりました。自分たちのチームである「ゲームクリエイターズ」は一番最後の枠で、自分たちの発表の前に全てのチームの発表を見た訳なんですが、正直1位は無理そうだな~と内心思っていました。
各チーム色々面白いものを作り上げていてプレゼン資料もかなり作り込まれている。LINEbotを使用したお昼ご飯を一緒に食べる人を探すマッチングサービスは、実際に使ってみたいと思いましたね。あとはBIKさんのレーザーポインターで目標指示するツールもめちゃくちゃ面白かった。リモートでの目標指示はHololens2とかMRで利用が始まっていますが、BIKさんのシステムならそれよりも圧倒的に安価に作成できそうなところに惹かれますw(正直一緒に作りたいと強く思っちゃいました。)
プレゼン資料では1チームスライドのデザインがとても素敵(合わせてプロダクトのデザインも凄い)で、発表自体一番印象に残っています。

で、ハッカソンの結果ですが、1位&スポンサーであるGaiaxさんの企業賞をいただきました。

やばいですね
やばいです。
自分の人生の中で1位という順位はプログラミングにかかわらず取ったことがなかったので、チーム名が呼ばれても正直ピンと来ませんでした。
同じチームメンバーがDiscordで「やったぜ」的なことを書いていましたが半信半疑で「ほんとに同じメンバーか?」と一瞬考えてもいました。
Zoomでの発表が終わった後、メンバーとDiscordで喜びを分かち合ったのち、リビングにいた親にハッカソンの結果も伝え大変喜んでもらえました。
メンバーとはその後、優勝賞金の10万とGaiax賞のAmazonギフト券2万円をどう分けるかや今後の開発継続について楽しく話し、多分人生で最も幸せな時間を過ごしていました...

ハッカソン後の懇親会

ハッカソン後には協賛企業であるメディアドゥさんとGaiaxさんとで10分間お話する懇親会が設けられていました。
「プロダクト面白かったよ~是非開発続けてみてね~」という感じで終わると思っていたんですがね...
その予想は良い意味で裏切られました。
「うち(Gaiax)でこのプロダクトの製作を続けてみない?もしくは資金提供という形をとってもいいかもしれない」(極度の混乱に陥ったので、ちょっと言葉に違いがあるかもしれません)
えっえっ....
はいっ?
チョットナニイッテイルカワカラナイデス...
とりあえず詳しい方針は2日後にZoomで話すこととなり懇親会は終了しました...
直後にメンバーでボイスチャットをしましたが、さっきまでの賞金何に使うかみたいな軽い雰囲気は消え去り、2日後のZoomに向けてどうするかという重い雰囲気となっていました...
素直に自分たちの作ったプロダクトが評価されたと喜びたい反面、これからの対応をどうすればいいのかと...

Gaiaxへのインターンが決まる

ハッカソンから2日経ち、Gaiaxの方とのミーティングが始まりました。
ミーティングでは主に自分たちが作ったプロダクトを発展させていく上での選択肢について教えていただき、スタートアップやGaiaxでのインターンなど選択肢をいただけました。
最終的にGaiaxインターンをしながら開発を進めていくこととなり、現在リリースに向けて開発を進めています。

宣伝

8月の初旬にリリース予定です。リリースしたら是非使ってください。

もうUSキーボードは潮時かもしれない

はてなブログ、ほぼ3年ぶりの投稿です。

テーマはキーボード配列。 一応IT系、プログラミングの事も関連するので、いつも投稿しているQiitaやZennでも良いかもしれません。 が、内容としては、ごく限られた人にしか分からないポエムだと思ったので、久しぶりのはてなブログです。

日本国内でUSキーボードを使う人たち

USキーボードを使う人は、主にプログラマーが多いんでしょうかね? 私を含め、USキーボードを使っている人たちの多くは - 記号配置がわかりやすい(特に波括弧など) - 変換・無変換キーなどがないため、スペースが大きく打ちやすい などが大きなメリットに感じて選んでいると思います。

また、ローマ字入力しかしない人にとっては、かな入力の刻印が邪魔という意見もあります。 (まあ、私はそんなに気になりませんが) 最近では、かな入力の刻印が省かれた国内メーカーの日本語キーボードノートPCもあるので、USキーボードだけの利点では無くなってきています。

また、これはガジェットオタクだからかも知れませんが、USキーボードに慣れておくと、海外ガジェットやキーボードの選択肢が広がるというのもあります。 それこそ、自分が最初に買ったUSキーボードのPCはAliexpressで購入したXiaomiのノートPCだったと思います。 最近ではNuPhyのキーボードやキーボード付きiPhoneケースのClicksなどを購入しており、USキーボード使用者であるからこそ選べるという感じがします。

日本国内でのUSキーボードノートPCの選択肢

上記でUSキーボードが良いという話しばかりになっていたと思いますが、もちろん問題点もあります。

それが、国内でのUSキーボードノートPCの選択肢の少なさです。

自分が確認している中では明確にUSキーボードが選べるメーカー(ブランド)というのは以下の4社かなと思います。

かなり選択肢が少ないですね。HPは一部製品、どちらかというと日本語配列を用意していない廉価モデルがUSキーボードということがあり、がっつり持ち出して使うメインのWindowsノートを買うとなるとThinkPadXPSくらいしか選択肢がなくなります。

自分の場合はThinkPadトラックポイントの良さなどを感じていることもあり、長年、WindowsノートにはThinkPadを使ってきました。 この間出た、新型のIntel LunnerLakeを搭載したThinkPad X1 Carbonがついに1kgを下回ったと聞き、購入を非常に楽しみにしていたのですが、なんとカスタムモデル無し日本語キーボードOnlyでの展開となりました。 辛い。辛すぎる。

また、外である程度のGPUパワーが欲しいことありますよね?そういう時のためにGPUを詰んだゲーミングノートなんかも購入検討したいですが、これはもう全く選択肢がありません。RazorやMSIのほんの一部の製品しか対応していません。 うーん辛い(まあこれは、小さい外付けGPUを持ち歩くというので解決できそうな問題ではある)

はどこに進めばいいのか

もうUSキーボードとも10年の付き合いです。このまま、一生USキーボードで良いだろうと少し前までは思っていたのですが、今では迷い始めています。

時々、日本語キーボードでタイピングをしないといけないときに、かなりコーディング速度が遅くなるのは、明確なデメリットです。(専門学校などで授業などをする際、備え付けのPCを使うことが多い)

やはり、プロ?たるもの、初期装備でもある程度戦えるべきなのでは?そう考えています。 全く話は変わりますが、AIによるコーディング支援も、無くては開発できないというレベルの依存にならないように、定期的に完全に自力でコーディングするということをやるようにしています。

とりあえずAmazonで安くてある程度まともそうな日本語キーボードを買ってみました。Fujitsu純正のノートPC向けのキーボードをデスクトップで使える物。もちろん安いので打ち心地は悪いですが、これで少し日本語キーボードに慣れてみようと思います。(このブログも日本語キーボードで書いています。辛い)

BlazorWebAssemblyを使ってコメントスクリーンみたいなものを作った話

今回、割と目新しい技術であるBlazorWebAssemblyを使って開発をやったので、どんな感じに開発をしたのかまとめてみます
作ったソフトの名前はbolideといいます。

github.com

メントスクリーンとは

メントスクリーンはZoomなどで画面共有している所に、ニコニコ動画のようなコメントを流せるソフトです。
メントスクリーン非常に使いやすいのですが、複数のユーザーのPCでコメントを流すことが出来なかったり(実はできた)、有料化でかなり使いにくくなっていたので似たようなソフトをOSSで開発しようという話になりました。

システム構成

システムとしては、コメントを送信するWebクライアントアプリ(Blazorで作成)・コメントを受信してデスクトップにコメントを表示するデスクトップクライアント・コメントをWebクライアントアプリとデスクトップクライアントで受け渡すサーバーアプリで構成されています。

Webクライアントアプリ

コメントを送信&他の人が送信したコメントも見れるWebクライアントアプリです。
技術としてはC#+BlazorWebAssemblyを利用しています。

f:id:MogamiTsuchikawa:20210709231444p:plain

デスクトップクライアント

サーバから送られてきたコメントをデスクトップ画面上に表示するアプリです。 技術としてはC#+WindowsFormsを利用しています。

f:id:MogamiTsuchikawa:20210709231537p:plain

サーバーアプリ

これに関しては自分ではなく、

twitter.com

cordx56先輩に作成していただきました。
技術としてはPython+Flaskで組まれています。
サーバーアプリではWebクライアントアプリからコメントがPOSTされてくるので、それをWebSocketに流す作業を行なっています。

BlazorWebAssemblyを採用した理由

BlazorWebAssemblyC#用フロントエンドフレームワークBlazorWebAssemblyが組み合わさった物です。
WebAssemblyを使っていないBlazorとしてBlazorServerというものがあります。これはブラウザ側のアクションをサーバーに送り、そこでC#で処理するものです。そのため、オフラインでの動作やGitHubPagesのような静的ページのホスティングしかできないサービスでは使用できません。
f:id:MogamiTsuchikawa:20210712122349p:plain BlazorWebAssemblyではBlazorServerでの問題を解決しており、また当たり前ですがC#でロジックの実装ができます。そのため、今回作ったシステムではデスクトップクライアントとコードが一部共有でき、開発の短縮に繋がりました。
f:id:MogamiTsuchikawa:20210712122516p:plain 具体的に、デスクトップクライアントを作ったあと、フロントエンドの実装には30分もかかっていません。
もし、自分がReact+TypeScriptで同じクライアントを作ろうとしたら、最低でも2時間はかかってしまうと思います。 また、処理にバグが見つかった際も同じように修正ができ、機能追加も簡単にできます。

BlazorWebAssemblyのデメリット

散々ベタ褒めしたわけですが、デメリットもあります。
- ネット上の資料が少ない - 実行速度が割と遅い - 初回アクセス時のダウンロードするものが多い

まず、ネット上の資料が少ない理由ですが、これは正式版リリースが2020年の5月と、まだあまり時間が経っていません。
BlazorWebAssemblyでは実行にWebAssemblyで記述されたインタプリタで実行しています。そのため、他のWebAssemblyに直接コンパイルするものに比べ遅いらしいです。
参考資料↓

docs.microsoft.com

初回アクセス時のダウンロード量が多い問題は、C#のランタイムをダウンロードしていることが大きいです。サイズとしては1.5MBほどです。

無料の業務自動化ツール、PowerAutomate Desktopを触ってみた

経緯

友人がyoutube-dlと何かを組み合わせて、任意のチャンネルの最新動画を探してダウンロードしてくる処理を作れないかという話になり、そういえば少し前に話題になったときに入れたPowerAutomate Desktopを全然使っていないことを思い出し、試しにその処理を自動化してみることとした。

やりたいこと

https://www.youtube.com/c/KohAoki/videos
のようなYoutubeチャンネルのURLをリストにしたテキストファイル「channelList.txt」から読み出し、最新の動画(一番上左にある動画とする)のリンクを取得、list.txtに改行区切りで書き込み、最後にyoutube-dlを動かす友人お手製のバッチファイルを実行するというものである。
主にWebスクレイピングとファイル読み書きとなっている

完成形

完成したPowerAutomate Desktopのコードは以下のようになった f:id:MogamiTsuchikawa:20210527031057p:plain

ハマった点

ブラウザープラグインが分かりにくい

PowerAutomateプラグインを導入したMicrosoftEdgeを使用しWebページ上の要素の詳細を取得しますブロックを用いて<a>要素のURLの取得を行った。
本来下記画像のように、ブロックを編集中にプラグインが導入されているブラウザを立ち上げれば、DOM要素を指定して、指定部分のhrefなり情報を抜き出せるのだが、それが全然出てこなかった。 f:id:MogamiTsuchikawa:20210527031727p:plain プラグイン一覧を確認したところ、プラグインが無効化(したつもりはないので最初からなっていた?)されていた。これを有効化することで画像のようにDOMの選択が可能となった。

改行コードを指定してテキストを分割できない

PowerAutomate Desktop、MSが作っていることもあり非常に完成度が高いのだが、非常に残念な事に改行コードがサポートされていない。 具体的には文字列に改行を加えたり、改行を区切り記号として分割するなどができないのだ...
ひょっとして無料版だけのMSの意地悪かと思ったが、どうやらそうではないらしい...
仕方なく、channnelListにはURLと各行の最後に@を加えて改行したものに変更し、PowerAutomate Desktopでの処理は最初に@でテキスト分割を行い、その後テキストのトリミングで空白や改行コードを削除し、ブラウザに開かさせる処理とした。

残念な点

エクスポート・インポート機能が無い

エクスポート・インポート機能が無い。正しくは無料版には無い。
基本的に自分のMSアカウントにログインしているアプリからでしか利用出来ないようである。
GASなどではJSで書いているので当たり前にプログラムコードをネットから流用や共有ができ、便利に使えているので、これはちょっと辛い。

改行コードや空白文字の扱いが良くない

先ほど書いたとおり改行コードを明示的に利用出来ず、空白文字にかんしてもifで直接扱えず、変数を通して入力するという、かなり面倒な仕様となっている。
これは正直アップデートで解決して欲しい。

良さそうな点

Webスクレイピングが簡単

Webスクレイピングが結構簡単にできるのが非常にメリットだと思う。これだけでPythonなりで組むのとかなり迷う。

PDFやOCR、システム周りを触れて便利そう

PDFを簡単に扱えたり、OCRといった機能が使えたりと、使用用途に寄ってはかなり便利そうである。 特に驚いたのはコンピュータのシャットダウンやロック、画面解像度の変更、環境変数の指定などこういった業務自動化ツールで使えなさそうなものが使えるのに魅力を感じる。単に事務作業だけでなく色々と自分のPCをカスタマイズするのに役立ちそう。 f:id:MogamiTsuchikawa:20210527033500p:plain

少し癖はあるが、かなり有用なのでデスクトップでの処理の自動化に積極的に使っていきたいですね。

ASUSTORのNASは絶対に買うな

令和元年6月2日、自宅のNASがまた壊れた。しかも二台同時に。公式のアップデートによって。
自分でも未だに何が起こっているかわからん。ということで、

急行能登@闇落ちなう… (@exp_noto) | Twitter

さんの勧めもあってブログに今までのNASの崩壊話をまとめたいと思う...

我が家に来た初めての10G対応NAS

f:id:MogamiTsuchikawa:20190603004123p:plain

あれは高校三年のころだっただろうか...

SynologyのNASを試しに買ったところ便利さに虜にされ、ポータブルHDDやUSBメモリの使用を殆ど止めてしまった。

保存しているデータが増えてきていたため、4ベイタイプの新しいNASの購入を決めた。せっかく新しいNASを買うのだから10GbaseT対応にしようと思い、当時4ベイNASで10Gbase対応なのに破格なASUSTORのAS4004Tを購入した

実販売価格45k円なのにLANは10G対応が一つと1G対応が二つと豊富なIOを備えていて購入に迷いはなかった。

購入後Synologyの2ベイNASからデータを移行し運用を開始した。当時はTOSHIBAの6TBのHDDを4台RAID10構成にしていた。

そして、しばらくして悲劇が始まる

定期的にネットワークに繋がらなくなる

購入してから半年後、私は浪人生になっていた。浪人していてもコンピュータを使わないことは無く、NASは生活必需品だった。

そして悲劇は起きる。

ある日を境に、NASが定期的にネットワークがダウンするようになってしまった。

最初購入代理店に連絡したところ、データを採りだした後にOSを再インストールすることをおすすめしてもらった。が、まいった。4ベイのRAID10のNASから一体どうやってデータを取り出せば良いのか...負荷がかかるとネットワークが落ちるようだったので、ネットワーク経由では全ては取り出せない。しょうがなく、重要なデータのみを取り出し初期化をした。このときRAID10でもNASのOSが壊れればOUTという経験を得れた。

その後大容量の外付けHDDを接続して、これに一週間ごとにバックアップを自動でするようにした。

NASが起動に失敗する

先の障害から半年後、冬になっていた。浪人生にとってはセンター試験が近づき神経質になっている時期だった。

また障害が起きた。今度はフリーズ後に再起動してもNASが起動に失敗する致命的なものだ。正直ここまでの障害、今度はソフトウェアではなくハードウェアの問題だろうと思った。

親の仕事データもNASに入れている関係上、復旧は迅速に行わなければならないので、同じ機種のNASをもう一台購入した。これならHDDを入れ替えるだけで復旧が可能なはず。

だが現実は厳しかった...購入した新しいNASにHDDを載せ直したところ同じ症状が起きるだけだった。ここでようやくハードウェアではなくソフトウェアの問題だと発覚。NASの初期化をし、外付けHDDよりデータを復旧した。

ここでさらなるバックアップ体制が必要だと考え、新しく購入したNASにもHDDを購入して搭載し、一日おきでデータをバックアップし、メインのNASが故障した際にそのまま同じデータがすぐに利用できるサブNASとした。

世界に平和が訪れた...

(私はセンターを失敗した...)

レッドアラート!!...戦争は終わらなかった...

RAID崩壊事件

センター試験が終わった。(二重の意味で)

そして、NASの信頼性をあげる目的でHDDを普通のHDDからNASなどの24H稼働を想定したHDD、SeagateのIronWolfに交換をした。一枚一枚交換してRAIDを再構築。簡単な作業のはずだった...

だが、壊れた。また初期化して入れ直した。このときはサブNASが役に立った。

 

大学生活と共に10GbaseLAN化!

大学生として一人暮らしを始めると共に、ネットギアの10G対応スイッチやAUひかり5Gなどを契約してようやくNASの10Gインターフェイスが生かせるようになった。

f:id:MogamiTsuchikawa:20190603002714p:plain

NASへの接続も早くなり、大学生活も順調だった...はずだった...

NAS書き込み不能事件

ある日を境に、いきなりNASへ大容量のデータを書き込みできなくなった。いや、書き込みは出来る。転送中に失敗するのだ。だが低速なWiFi経由だと成功する。もう無理。と思いながら原因もろくに探さず初期化した。すぐ治った。いいかげんにしろよ殺すぞ。

メイン・サブともに完全崩壊。ASUS許さねぇぞ

アップデートがきた。NASのアップデートだ。メジャーアップデートじゃない普通の更新プログラムだ。普通にアップデートするだろ?して大丈夫だと思うだろ?

ダメでした

いや、もう訳ワカラン

HDDが1,2番が認識されなくなったんだよね。一時的なものかなって再起動したら

これ。

f:id:MogamiTsuchikawa:20190603003519p:plain

はい。障害。ん?

お前4ベイNASのAS4004Tだろ?いつからAS4002Tになったんだよ!?

意味ワカラン、訳ワカラン。ん?サブNASはどうしたかって?サブNASはねぇ...更新しちゃった後だったんですよ...もう言わなくても分かるよなぁ??

f:id:MogamiTsuchikawa:20190603003811p:plain

OSが壊れているのか、外付けHDDのバックアップ状況もワカラン。死にたい...

 

 

もう、ムリデス。新しいNAS購入します。

えっ?どこのメーカーのをって?

少なくともASUSTORのは買いません。

はい。では僕はデータ復旧頑張ります

SDK v1.0出たしFlutter触ってみる(環境構築)

Flutterとは?

GoogleDartというGoogle自身が開発した言語でAndroidiOSどちらのアプリもネイティブに開発できるという結構楽しそうなやつです。
Googleが将来的にAndroidを捨て新しいOSをリリースする際にFlutterアプリが増えていれば簡単に新OSの方でもアプリが揃い、最初からアプリ不足に悩まずにいけるのを狙っているらしいです。
しらんけど。
ちなみにDart自体はJSなどに変換できるそうです。

ちなみに公式サイト

flutter.io

Flutterを使えるようにする

今回はWindows10(1809)にエディタとしてVisualStudio Codeを利用していきます。
使う端末はAndroid Pie(9)のPixel 3です。
## Android Studioをインストールする 特に説明は必要無いでしょう。
AndroidStudioをインストールします。

Android StudioDartとFlutterのプラグインを入れる

もしかしたらVS Codeで使うなら必要無いのかもしれませんが、とりあえず入れます。
Android Studioを起動し、Configure - Pluginsを選択します。
f:id:MogamiTsuchikawa:20181205125936p:plain 画面下のBrowse repositoriesをクリックします。
f:id:MogamiTsuchikawa:20181205140915p:plain 新しい画面に切り替わるのでそこで検索ボックスにflutterと入力し検索します。
FlutterFlutter i18nが出てきますがFlutterの方をインストールします。
同時にDartもインストールするか聞かれるのでYesを選んでください。

Google USB Driverをインストールする

Windowsユーザーのみ必要な作業のようです。
下記URLよりダウンロードします。
https://developer.android.com/studio/run/win-usb

VS Codeのセットアップ

VS Codeの拡張よりFlutterプラグインをインストールします。
インストールが終わったら再読込をしておきます。

FlutterのSDKをセットアップする

下記URLより flutterのSDKをダウンロードします。

Windows install - Flutter

zipファイルですし後々問題を起こしたくないのでzipファイルのプロパティよりセキュリティの項目にチェックを付けて適用します。
f:id:MogamiTsuchikawa:20181205150309p:plain

zipファイルを解凍し、flutterフォルダを任意の場所に置きます。
今回はC:\src\flutterという構成にしました。Program Filesフォルダー内はオススメされません。
SDKの配置が終わったら次はPowerShellを起動し先ほどのC:\src\flutterに移動します。
まずは、flutterフォルダないのflutter_console.batを実行します。
.\flutter_doctor.batと打って実行します。
まずはAndroid SDKのライセンスに同意する作業をします。
flutter doctor --android-licensesと打ちます。そうするとライセンス文出てくるんで(しっかり読んで)yを入力して同意していってください。
同意するのは何個かあります。
それが終わったら最後はUSBデバッグモードをONにした端末をPCに繋ぎます。
flutter doctorと打って環境が正しく構築されているかを確認します。問題なければ全てチェックマークが付きます。PowerShellだと色も付くのでわかりやすいですね。
f:id:MogamiTsuchikawa:20181206092553p:plain 上記の画像ではあえてスマホを繋がずにエラーを出しています。スマホも含め全て問題なければ[!]は無くなり、全て[√]がつきます。

VS Codeで動くか検証する

flutter doctorコマンドをVS Code でも動くかを確認します。
VS Codeのコマンドパレットにdoctorと打ちます。そうすると候補にFlutter:Run Flutter Doctorと出てくるのでクリックして実行します。
そうすると、右下にFlutterのSDKどこだよ?的なメッセージが出てきますんで、そのメッセージをクリックして先ほどのC:\src\flutterフォルダを指定します。
flutter doctorコマンドで先ほどと同じように全て[√]が出たら環境構築は正しく出来ています。

サンプルをとりあえず動かしてみる。

まず、プロジェクトを作りたいフォルダをVS Codeで開きます。
VS Codeのコマンドパレットを出しFlutterと打ちます。候補の中からFlutter:New Projectを選択します。
そうするとプロジェクトの名前をどうするか聞かれるので入力してください。
プロジェクト作成完了したら早速F5キー押して実行しましょう。
ビルドなどには時間がかかるので気ままに待ちましょう。
apkなどが出来るとスマホに転送されデバッグが開始されます。
初期アプリでは画面右下の+ボタンを押すことでカウントが増える者みたいですね。

おわりに

結構説明を省いているところがあるので、分からないこととかあったら是非Twitter等で聞いてください。
@MogamiTsuchikaw
自分もFlutter勉強中なのでFlutterチョットデキルようになったらまた続きを書きます。

新しいプロダクト開発にPython使ってみた

久しぶりに開発ツール開発

f:id:MogamiTsuchikawa:20181101173906p:plain

高校生のころに作ったC#_GO(C#のポータブル軽量開発環境)から、あまり開発系ツールを作っていなくて久しぶりにそういう系統の物が作りたくなったのでやってみました。(まあ今回作るツールも需要ないだろう...とは思いながら)

開発にPythonを使ってみる

f:id:MogamiTsuchikawa:20181101174007p:plain

最近流行っている言語?であるPythonを使ってみました。 Pythonというと機械学習のライブラリが豊富だったり、言語仕様的に行列演算とかが強いとかでAI・機械学習によく使われていますが、マルチプラットフォームな点でも良さげな言語です。マルチプラットフォームならC#だってmonoやら.NET coreでマルチプラットフォームじゃんと言われそうですが、しっかりとC#ではなくPythonを選ぶ理由があるんです。

C#を選ばない理由

C#マルチプラットフォームなアプリを作るには今.NET coreが熱いですが、.NET coreはGUIライブラリ機能を有していません。
一応.NET core3からはWindows環境では今までのWindowsFormやWPF,UWPのGUI機能を使えるようになりますがそれを利用するとMacLinuxでは動きません。monoを利用する場合でもGUI付きの場合Gtk#などを使う必要があります。Gtk#ですがちょっとググって見ましたが恐ろしいほど情報が少なかったので諦めました(公式資料読みあさってやっても良かったけど、ブログのネタにもなりそうだし) PythonならGUIライブラリを使っても普通に他のOSでも動きますし無難かなと思いました(´・ω・`)

Pythonを選ぶ理由

上記で条件にマルチプラットフォームに対応出来ることをあげましたが他にも条件がありました。それは開発環境の構築が大変じゃ無いこと。世の中にはマルチプラットフォーム向け開発に対応した開発ソフトが沢山ありますが大抵が入れるの大変で重くてでかいです。正直機能沢山の開発環境はVisualStudioやVScode,Unityでお腹いっぱいなので基本コンパイラテキストエディタでゴリゴリとコードでUIも書けちゃうやつが良いなと思いました。

手軽に動作を確認出来る対話型インタプリンタ

「こんな感じで処理したらどういう動作をするんだろう?範囲外にならないかな?」と心配になるときがありますが、こういう時にはまずは一回その部分だけで実行できるようにして動作を確認するのですが、C#などの場合、一度テスト用のプロジェクトを作ったり案外手間がかかります。Pythonの場合、こんな事をしなくても対話型のインタプリンタでコードを確認出来ます。途中の変数内の値もprintなどを使わず、そのまま変数名を入力するだけで確認することが出来ます。

高機能なPythonIDEiOS向けにある

Appleって少し前からiPadをノートPCの代わりとして推していますが(ならMacって何なんだよっていう思いですが...)iPad向けには現状PCの代わりになるほどアプリケーションが充実していません。特に開発系に関しては絶望的です。AndroidなどではC++などを使いAndroidのアプリケーションを作成出来るアプリケーションなどがありますが現状iOS向けには単体でiOSのアプリケーションを開発するソフトは存在しません。

f:id:MogamiTsuchikawa:20181101174546p:plain

ですが最近「Pythonista3」というアプリを見つけました。これはiOS上でPythonのコードを実行するアプリで一見よくありそうなアプリに見えますが3000円もすることもあってエディタの機能はしっかりとしていますしiOSの機能を使ったりホーム画面に自分の作ったコードの実行ショートカット(実質単体アプリのように使える)も作れるとよく出来ています。さらにとあるコードを実行することでAppleで禁止されているDropBoxでのコードの共有機能やシェル機能(pipなどでnumpyなどのライブラリを取得することが出来ます。)が使えます。これさえあれば色々とiPad向けにAppleが許してくれなさそうなアプリを作って共有することが出来そうです。

f:id:MogamiTsuchikawa:20181101174706p:plainf:id:MogamiTsuchikawa:20181101174719p:plain

こんな感じでPythonが案外気に入ったのでこの後もPythonに関することをブログにまとめていきたいと思う。主にwxPythonなどのGUIライブラリやPythonia3のお話をメインにPythonについてこのブログにまとめて行こうかなと思っています。

あとは最近α版がリリースされ始めた.NET Core3などについてもちょくちょく書いていきたいですね。