ウンcodeプログラマの日常

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

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

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

Unityでの開発ノウハウ?

芝浦工業大学デジクリ アドベントカレンダー3日目。
今回は共同開発する上でのUnity&C#&プログラミングのノウハウを紹介していきたいと思います。
(自分と同じサークルの方は分かると思いますが、ネタはかなりrgb_rpg企画から出ています。)

経緯

自分が参加しているサークルで行われていたゲーム開発にPGとしてピンチヒッターとして参加したところ、なんかヤバイことになっていた(´・ω・`)
全体のお話はデジクリアドベントカレンダー1日目に記載されているのでそちらを見てください。

hackmd.io

Unity初めて触る人大量&プログラムの設計を事前に行って居なかったため、まあ酷いUnityプロジェクトとなっていました。
そこで、プログラムの設計をするSEがいないなどの組織的な問題は別にしてプログラム・設計の面+Unityで何をしなければならなかったのかを、まとめて行こうと思う。

参考例環境

PGだけでも12人ほどいた、サークルとしては大人数での開発
Unityによる2Dゲーム・アクションRPG

プログラミング一般

まずはバッドコードの例を。
実際にrpg_rgb企画のバッドコードを例に使います。

このコードについて今から話していきます。

コメントを適切に書こう

いつコメントを使うか

コメントを書きましょうと書きましたが、全ての行にコメントを書く必要はありません。
変数の宣言部分に関しても、明らかに何が入るかわかる変数にはコメントは必要無いでしょう。
コメントに関しては、処理のコードのブロックごとに何をしているのかなどをメモする程度で書けば良いと思います。
コメントというよりも処理ごとにメソッドにまとめて、メソッド名でどんな処理をしているのかを分かるようにするのがベストですね。

Summaryを活用せよ

VisualStudioの機能としてSummaryというものがあります。
変数やメソッドの前にスラッシュ三本を使って書くことで、変数やメソッドを使う時に書いたコメントをVisualStudioが表示してくれます。
f:id:MogamiTsuchikawa:20191202221849p:plain f:id:MogamiTsuchikawa:20191202223059p:plain f:id:MogamiTsuchikawa:20191202223106p:plain

特に書いた本人以外が使用する可能性があるpublicなメソッドの場合、絶対に書きましょう。

製作者を明記しよう

チーム開発の時、このように製作者やクラスのちょっとした使い方や説明などを書いておくと、バグの報告や質問などがしやすいです。
デジクリではメンバーが全員オフラインで作業するのはなかなかないので、しっかりとslack名やメールアドレス等を記載しておくのもいいかもしれません。

命名規則をしっかり守ろう

C#では変数名などはCamel形式、クラス名・メソッド名はPascal形式となっています。
- Pascal形式:Time / Text
- Camel形式:time / text

また配列やListなどはsなどをつけて複数形の名前にしたり
bool型ではflag_**is**のような名前を心がけましょう。

メソッドをつくろう

参考コードのGenerateメソッドの中を見てみましょう。
このコードの問題点としては、

  • メソッド内のコードの量が多い
  • ネストが深い
  • 局所局所に何の処理をしているかのコメント等がない。

正直上の問題を挙げていますが、このコードはまだ読める(何をやっているのか想像しやすい)方な気がします。 他のクラスではUpdateメソッド内に大量のif文・深いネストがあるヤバイやつがあったので...

このコードの場合、三角形(132~163行目)・四角形(117~129行目)・円形(167~174行目)を生成するところをそれぞれprivateなメソッドにするのがよさそうですね。
処理方法を思いついて無心に書いているときにはだら~っと書きがちなので書いた後にネストが深くないかなど客観的に見れるポイントでチェックしておきましょう

列挙体を活用しよう

一定の種類しか無いもので処理をわけたりなどするときは列挙型を使いましょう。あまりサンプルコードでは見られませんが、stringで頑張っているコードが多い気がします。
例えば当たったものがどのキャラクターか判断するコードを書くとして、それの判別をstringで行った場合、"Player""player"として書き間違えるだけで処理が上手くいきませんし問題の発見も難しいです。
UnityのGameObjectタグなどで経験した方も多いのではないでしょうか?
まあ、詳しい使い方などはC#ツヨツヨな方のサイトをみましょう。

ufcpp.net

配列・List・辞書型を適切に使おう

結構全体のコードを見て思うのが、配列以外のListや辞書型、列挙型がなかなか上手く利用されていないのを感じます。
Listや列挙型などはUnity側で操作がしやすいのでよく利用するのがお勧めです。
具体的な例として、自分が開発しているものを見せます。
List型をpublicなどで作っておくと図のようにUnity側から入力が可能です。
f:id:MogamiTsuchikawa:20191203004858p:plain speedSetsList<int>speedSetsNameList<string>です。
宣言時は[SerializeField] List<int> speedSets = new List<int>();でできます。
列挙型はUnityの画面ではListBoxで表示されます。 f:id:MogamiTsuchikawa:20191203005655p:plain また、列挙型なListも作って表示が出来ます。面白いですね。 f:id:MogamiTsuchikawa:20191203005854p:plain ただ残念なことにDictionaryではこのようにUnity側で変更できるように使えないのでちょこっと不便ですね。

プロパティを活用せよ

クラス外からは変数のように振る舞い、内部からはメソッドのように振る舞う。それがプロパティです。
例えばstring型の変数に文字を代入したらUnity内部のUIのTextにも反映させるといったことや、値を取り出した回数などを記録するなどのことが出来ます。

privatei_txttxtの実態です。
また、取得はクラス外でもOKだが代入はクラス外はNGにしたい場合、プロパティ全体をpublic(上のコードのような状態)にして、setprivateをたしてprivate setとします。
このように出し入れで違うアクセス修飾子を付けたい場合でもプロパティは有効です。
また、このようにアクセス修飾子目的で使う場合、txtの実態であるi_txtは省略することが出来ます。(i_txtのような実態はシステムが自動生成します。)

また、getterのみ記述するものもあります。これではreadonlyなものが内部で生成されます。readonly要素を付けるよりはstring hoge{get;}と書くように心がけましょう。

C#の知らない機能をもっと知ろう

++C++を読め!💢

ufcpp.net

Unity

こっからが本番です。(はぁもう書くの疲れてきたので雑に行きます)

GameObject.Find() GetComponentは魔の呪文

GameObject.Find()GetComponentは重いので極力書かないようにしてください。
よくStart()内に書いてRigidBodyなりいろいろなComponentを変数に参照させていますが、そんな邪悪な書き方をせずに[SerializeField]で変数を作り、それにUnity上からドラッグアンドドロップしましょう。

GameObject.tagを乱用するな

これは特に最初の設計である程度考えておかないといけない物ですが、tagは必要最低限にしましょう。tagはstringということもありスペルミスでバグが起きたりする可能性も高いですし、全部の識別にtagを使用していてはtagの量が大量になってしまいます。
タグを大量に使うだけでは無く、タグに.区切りでデータを保管しているようなコードも見受けられました...正直最初何をやっているコードかわかりませんでしたし、分かってからめちゃ怖かったです。

で、タグを乱用しないように自分では以下のような方法で解決しています。

  • tagは大きく役割が違う物にしか付けない
  • 共通のtagを持つ物には共通のクラスを付ける
  • 共通のクラス内に列挙型などで詳しい種類を指定できるようにする

例えばEnemyタグを持った物にはEnemyBaseというクラスを付け列挙型EnemyKindやEnemyには確実に必要であるHPやダメージを受取るOnDamage()などを実装したりします。
このような組み方をするだけで、tagによるミスだけでなく列挙型が使えることによりエディタからの支援も受けれます。

オブジェクトに複数のスクリプトを付けよう

共通の処理などをする部分は、普通のプログラミングでは継承を用いて楽をしますが、Unityでは操作するオブジェクトに対して複数のスクリプトが当てれるので、役割をスクリプトごとに分けて共通化を図れるようにしましょう。

リソースに日本語を使うな

リソース(画像など)に日本語を使わないでください。 テキストなどを使う際もShift_JISなんて使わないように。
僕はUnityプロジェクトを開いて数分後に見たiOSの画像(1).pngがトラウマになって夜も寝れません(寝れています)

Gitを使うときは注意せよ

UnityでGitを使う際にはいくつも注意すべき点があります。

gitnore

gitnoreにしっかりと無視する物を書きましょう。Libraryとか全然無視してかまいません。
とりあえず簡単に使えるようにサンプルを落としておきます。

Sceneを弄る人間は限定せよ

皆さん知って居るとおりSceneを複数人で同時に弄ることにより、直すことが難しいコンフリクトを起こします。 Sceneを弄る人は限定しましょう。

GitLFSを活用せよ

UnityではGitが本来扱うに適していないバイナリーデータを大量に扱い、画像などの素材はかなりの容量があります。
GitHubなどのリポジトリは2GBを超えると警告メールが飛んでくるので、GitLFSを用いてバイナリーふぁいるを極力リポジトリから減らしましょう。
GitLFSでは指定されたバイナリーファイルはLFSサーバー上に保管され、リポジトリの方にはポインタファイルが保管されます。
ローカルリポジトリでは特に変わることはないので使ってみましょう。
ただGitLFSはむりょうでは1GBしか使えないため、課金して50GB使えるようにするのがおすすめです。月5ドルしかしないので非常にお安い!!!!!!!

終わりに

はぁもう2時30です。眠いです。
自分の言いたいことはまだまだありますが、とりあえずはここまでと。
rgb企画はここからリスタート。同じプロジェクトの皆さん。一緒に頑張りましょう。
自分はSEとしてクラス設計などの設計をメインにPGの方を支えていきます。
Unityのことについての質問など気軽にしてください。

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などについてもちょくちょく書いていきたいですね。

SurfaceGoを買ったぜぇ!最高だぜぇ!!

なんか勢いでSurfaceGoを購入してしまったのでレビューしちゃいます。

スペックシート

以下のものは上位モデルのものです。

CPU GPU RAM ストレージ OS 液晶解像度 ポート類
PentiumGold 4415Y HD Graphic 615 8GB SSD128GB Windows10Home S mode 1800 x 1200 USBTypeC Surfaceコネクタ 3.5mmジャック

ちなみに下位モデルではRAMが4GBになるほかに、ストレージがSSDより遅いeMMCの64GBになります。特別な理由が無い限り上位モデルを選ぶべきかと思います。
以下ベンチマーク関連です。

Passmark

CrystalDiskMark

ちょっとNVMeなSSDにしては遅いですね。

案外快適なPentiumGoldプロセッサ

SurfaceGoの購入を考えている中で一番気になったのがCPU
Pentiumというと今ではローエンドCPUというイメージですよね。
最近では4コアCPUが一般的になっていますが、こちらは2コア4スレッド しかも第七世代です。さらにターボブーストも無い。正直そんなに期待はしていませんでした。
が、良い意味で期待は裏切られました。
起動して一通りソフトを入れたりしていましたが、AtomやN系統のCeleronPentiumのような遅さを全然感じませんでした。おそらくストレージやソフト面で支えているんだと思います。なので単純にCPU性能を求められるような操作ではCPUの非力さを実感します。(ですが、十分ストレスにならない程度ですし、Atom Z8700に比べたらめちゃ速いです。)
Atomとかを搭載したPCってOffice作業やらWebブラウジングでも少々引っかかったりしますが、SurfaceGoではそれが全然無いんです。

10inchi機のくせに使いやすいキーボードとトラックパッド


(レビューに使ったSurfaceGoはUS版なのでキーボードはUS版です。日本で売られるSurfaceGoはJISキーボードです。)
10inchiぐらいの端末になってくるとキーボードってお世辞にも使いやすいとは言いにくくないですか?
あとキー配列が変だったり...(USキーボードを無理矢理JISっぽくしたりね)
ですが、Goのキーボードはかなり良いです。普通にブラインドタッチが出来ます。
少し不満点を言うなら「`」キー、JIS配列でいう半角/全角キーが小さいことです。
これはアメリカ人なら感じないのかもしれませんが、日本人だと無い半角/全角キーの代わりに「Alt」+「`」でIMEのON/OFFをするので小さいと少し使いづらいですね。

トラックパッドに至っては驚異的です。
よくこの本体サイズでこのサイズを用意できたなっていう感じですね。
使いやすさも今までのSurfacePro並です。Macerが使ってもストレスは無いかと。

でもちょっと気になる点があります。
それはキーの押し心地です。
キーストロークもしっかりあり、使いやすいキーなのですが押し心地が...なんというか...懐かしい...
なんと表現すればいいか分かんないのですが、昔のメンブレン式キーボード?それに似た押し心地が最初にきて、その後がパンタグラフの感触です。
自分は嫌いじゃないし逆にくせになっていますが、人によっては苦手かもしれません。

USB TypeC

SurfaceGoでは従来のSurfaceでは必ず搭載されていたUSB TypeAが廃止され、USBポートはTypeCが一つのみとなっています。
そしてこのTypeCポートは充電に対応しています。充電に関する挙動は後に記述します。
このUSB TypeCですが、AltModeとしてDP出力に対応していますのでよくあるTypeCから映像出力ポートに変換するアダプタが使えますし、充電機能やUSBハブ機能を搭載したTypeC接続の液晶に繋げばケーブル一本でデスクトップのように使うことも出来ます。

二系統選べる充電

SurfaceGoでは従来のSurfaceに搭載されているSurfaceコネクタ経由とUSB TypeCポート経由の充電に対応してます。
純正品のアダプタとしてSurfaceコネクタを搭載した30Wの充電器が付属していました。
Surfaceコネクタは昔のMacBookProやMacBookAirのように磁石で簡単にくっつき外すのも簡単なのでとても使いやすいですが、専用コネクタであるためどこでも充電したりするのが難しいです。
SurfaceGoではTypeCでの充電に対応しているので外出先で汎用のTypeCコネクタの充電器やモバイルバッテリーを使うことが出来るので、非常にモバイル性が上がっています。
学生や外回りをするビジネスマン、ノマドワーカーには嬉しい機能だとおもいます。

また、SurfaceGoのTypeC充電は制限がかなり緩いです。大抵のノートPCはUSB PDかつ最低何Wからと決まっている物(自分のTinkPadE480は30W以上から)が殆どですが、SurfaceGoでは下限はなく、しかもUSB PDにアダプタが対応している必要はありません。
自分が試したところUSB 5V 1Aでの充電(市販のスマホ向け充電器+TypeAtoCケーブル使用)でも充電が可能と言うことが分かりました。つまり、普通に売られているTypeA出力のスマートフォンタブレット向けモバイルバッテリを使えることが分かります。
ですが充電速度を考えると、極力USB PDに対応したモバイルバッテリーを使った方が良さそうです。
スマートフォンも最近はUSB PDに対応した物が出てきているので、買い換えるのも良いかもしれませんよ?
自分は既にUSB PDに対応したモバイルバッテリーは3つほど所有しています。
ちなみに上限は30W(20V 1.5Aもしくは15V 2A)なので専用充電器とは充電能力は同じですね。

驚異的なバッテリの持ち

SurfaceGoですが驚異的にバッテリーが持ちます。
ブラウザーで映画を見ながらなら普通に6時間ほどもちました。
少々負荷がかかりっぱなしになる作業も2時間ほど経っても半分以上、60%以上持っていました。
iPadなどと比較するとやはりバッテリの持ちは低いかもしれませんが、Windowsタブレットとしては驚異的です。

格安機とは言わせない!Surfaceのアイデンティティーを持つハイコストパフォマンス機

Surfaceといえば綺麗な液晶、ペン入力、WindowsHello顔認証、キックスタンド、マグネシウムボディですよね。
SurfaceGoでは値段が圧倒的にSurfaceProから低いのにその全てを受け継いでいます。

格安機と呼ばれるWindowsPCでは大抵がFullHDもなくキーボードは打ちにくくペン入力や顔認証は当たり前ですがありません。そして、筐体はプラスチックで安っぽいことが殆どです。
前にDellの6万ほどの格安機を買ったのですが液晶は大変見にくくキーボードも打ちにくいしトラックパッドに関しては毎回ストレスを感じさせる物でした。
特定用途にしか使わないと自分は割り切って使っていましたが、もしこれを親からPC入門用に渡されていたらPCが嫌いになっていたかもしれません。

買うべき?

約一週間SurfaceGoを使ってみて、Webブラウジングからちょっとしたアプリケーションのコーディングなどもしてみましたが、ストレスは殆ど感じませんでした。ちなみにこのブログも今SurfaceGoで書いています。
正直メイン機として使うのは無理ですが外出時に鞄にさっと入る大きさとCPU性能、電池性能はサブ機としては全然ありです。
また、大学生の方や特に初めてPCをもつお子さんに買うのも凄く良いと思います。
やっぱり始めて使うPCがキーボードやトラックパッドが使いにくかったり画面が見にくいと、スマホの方が良い・PCはクソとなっちゃうと思うんですよね。

と、ここまではSurfaceGo最高だよ!と書いてきましたが最後にお一つ辛口なコメントを添えておきます。

日本で売られる個人向けSurfaceGoには必ずOfficeがバンドルされて価格が2万ほど高くなっています。学生でないかつ会社で買えないかつOfficeをよく使う方には関係ないと思いますが、それ以外の方には安さが売りのSurfaceGoが二万も高くされるクソ仕様な他ありません。学生の方でも教育機関版を学生協から買えるか分かりませんし、Officeが無駄になるケースは多いと思います。
自分もOfficeを五台まで使えるOffice365 Businessを契約しているので、Officeバンドルの日本版はもったいないと思いUS版を輸入しました。

なんでMicrosoftJapanはOffice非搭載版を売ってくれないのか...まじでMSJP意味分からん。 ふぁっきゅーMSJP(´・ω・`)