放流作業

ネットの海に放流するのでいつか戻ってきてほしい

Myレポート製造環境2021

これはKCS AdventCalendar2021の17日目の記事です。

16日目|18日目

今期、私が大学のレポート用に使っている環境を紹介しようと思います(まだ1本しか書いてないですが)。

コア部分

190ikp/basic-experiment-report-b2をFolkしたorganic-nailer/eee-report-b3を使っています。

github.com

使っているのは

です。本家との違いは、電○情○工学実験用に一部変更を加えているということ、環境構築にコンテナを利用しているということの2点です。

VSCode

code.visualstudio.com

軽くて便利なエディタ。上のリポジトリVSCode用に構築しています。

Pandoc

pandoc-doc-ja.readthedocs.io

Haskell製の文書変換ライブラリです。MarkdownからTex形式を経由してPDFに出力させるために使っています。

Markdown

www.markdown.jp

元々HTMLに出力するための簡易な文章記法です。ブログやGitHubのドキュメントなどで書いたりするかと思いますが、Pandocと組み合わせることでレポート製造言語に進化します。

 

 

f:id:Nageler:20211217141418p:plain

製造ラインの図

使い方の詳しくはリポジトリを見てほしいのですが、だいたい上の図のような形でレポートが生成できます。

環境の利点としては

  • 数式をTeX形式で書ける
    • 数式エディタ?なんですかそれ
  • データはテキスト形式になるので管理が楽
    • バイナリは壊れる
  • Imageが用意されているので環境構築が楽
    • 日本語LaTeXやPandocの環境構築は骨が折れる
  • 図表番号を自動で振ってくれる
  • 体裁が自動的に良くなるので評価が上がる
    • これ重要(特に1,2年は体裁のウェイトが非常に大きいので効果的)
  • 記述がMarkdownでできるのでTeXほどつらくない

といったところです。

便利なのでみんな使ってほしいなぁ...

実験科目ごとに表紙が指定されていると思いますが、これはTeXで自作する必要があります。

 

参考:

qiita.com

VSCode拡張

eee-report-b3に合わせて使っている拡張たちです。

Remote-Containers

marketplace.visualstudio.com

コンテナ内にVSCodeで接続できるだけでなく、`.devcontainer/devcontainer.json`を記述するとプロジェクトを開いただけでコンテナを用意してくれます。

Character Count

marketplace.visualstudio.com

特に意味はないですがレポートの文字数をカウントして左下に表示してくれます。

Paste Image from local pc

marketplace.visualstudio.com

クリップボードの画像をmarkdown内に貼り付けることができます(画像はカレントディレクトリに保存)。

グラフなどをマウス操作でコピペできるので圧倒的に作業効率upが望めます。

これはPaste ImageのFolkなんですが元だとコンテナ内でコピペできないんですよね...

Markdown+Math

marketplace.visualstudio.com

ワークアラウンド的ですが数式のタグ付けに伴うプレビューの崩れを解決してくれます。

 

その他

レポート作成に使っているものたち

Google Drive

複数のPCからレポートを書いているのでPC間はGoogle Driveで同期しています。

版管理もしてくれているので万が一やらかしても安心。

Desmos

www.desmos.com

グラフを書くアプリ。形状を確認したり数式を書いたり方程式を解いたり簡易にできて便利です。

desmos2excel

desmos2excel.fastriver.dev

上のDesmosで書いた数式をExcelで使える形式に変換するやつです。ボード線図の理論値をExcelでプロットしたいときなどに活躍しました。

Excel

グラフ書くのに使ってます。グラフのテーマを保存しておけばある程度体裁も困らないものができます。

iPad+OneNote

レポートに挿入する図やグラフにお絵かきするのに使っています。OneNoteはPCとほぼリアルタイムで同期できるのでiPadで書く->OneNoteで同期->スクリーンショットクリップボード->mdに貼り付けという完璧な流れを実現できます。

KoClip

www.vector.co.jp

クリップボードに画像が入ってきたら自動で保存しておいてくれます。Matlabで大量に画像を保存しないといけないときなどに活躍。

Nuance Power PDF

レポートの末尾に添付資料をつけたいときなどにこれで合体させてました。スキャナを買ったらついてきたなにかです。Win11非対応そうでつらい

 

使っていないもの

  • Word: つらいから
  • Google Sheet: グラフの体裁が弱い
  • Google Docs: Wordより弱い
  • Markdown All in One: 機能が多すぎる
  • LaTeX: 書けません
  • Git: レポートだと必要ないかな

 

レポート環境は暇なときに整えようね!

空から見る矢上キャンパスの変遷

この記事は、慶應理工アドベントカレンダー2021の13日目の記事です。

 

adventar.org

 

こんにちは、Fastriver(@fastriver_org)です。

せっかくなので理工のアドベントカレンダーに参加させていただきました。

 

さて、理工学部にとってどのような年かご存知でしょうか。

 

なんと、1971年10月に矢上台で授業が開始されてからちょうど50年なんですね!!!!

理工学メディアセンターでは松下記念図書館50年の特集を行っているのですが理工学部ではとくに目立ったことはやっていないかな...?

というか理工学部として完全移転したのは1972年4月なので来年が50周年という感じなのでしょうか。

 

libguides.lib.keio.ac.jp

 

まあ細かいことはさておき節目の年なのでこの矢上キャンパスが50年どのように成長してきたのかを航空写真を交えながら見ていこうと思います。

 

航空写真サービスについて

過去の航空写真、昔はGoogle Earthで簡単に見られた気がするのですが、ブラウザ版になってから使い方がわからなくなりました。

他で航空写真をさかのぼって見られるサービスには以下のようなものがあります。

 

地理院地図

maps.gsi.go.jp

国土地理院が提供している地図サービスです。様々な地図を閲覧したり重ねて比較したりかなり多機能です。

地図・空中写真閲覧サービス

mapps.gsi.go.jp

こちらも国土地理院の地図検索サービスです。航空写真の1枚1枚からアクセスできます。

スーパー地形

www.kashmir3d.com

3D地図アプリ。複数のデータソースから得られた情報を見られますが、航空写真閲覧では地理院地図のラッパー的な立ち位置で利用できます。

 

矢上キャンパスの歴史

さて、古い順に見ていきましょう。

古代(~1939)

f:id:Nageler:20211213152713p:plain

矢上・日吉周辺(1939/08/14, 国土地理院)

矢上台は中央上から右下に流れる矢上川の南部に位置した高台になります。左側日吉は第一校舎と第二校舎、グラウンドが見えます。この時期の矢上台は耕作地として使われていたようですね(高台で水はどうしていたんだろうか)。

ちなみに日吉と矢上の間の谷ですが、谷の中央に小さな川が流れていたらしいです(現在は暗渠になっている)。

藤原工業大学開設、土地の購入(1939~1940)

f:id:Nageler:20211213153733p:plain

矢上(1941/04/02, 国土地理院)

1939年に藤原工業大学が日吉台に開校、翌年1940年7月に矢上台の土地をキャンパス建設用地として購入しています。日吉と矢上の間の谷も藤原銀次郎が寄付していたということで、だいぶ大掛かりなキャンパスの構想が描かれていたことが伺えます。

ちなみに上の写真で矢上台の右下部分が削られていますが、これは1938年に義塾がそこで土取りをしたついでに観音松古墳の発掘調査をしたためと考えられます。

調査内容について詳しくは↓

koara.lib.keio.ac.jp

現在該当部分は矢上小学校になっています。

 

ということで戦前の開校から既に矢上キャンパスの構想を持っていた藤原工業大学ですが、その後の戦争の激化により戦時中は日吉に学校を構えることになります。

写真の左下部分、今の第四校舎、第六校舎の辺りに校舎を持っていたようです。

幻のペーパープラン

f:id:Nageler:20211213155258p:plain

幻のペーパープラン(慶應義塾大学理工学部五十年史より)

戦前に藤原工業大学が描いていたキャンパスは「幻のペーパープラン」と呼ばれ上のような絵のようなものだったとされています。手前側が広大な庭園であることを考えると日吉キャンパスとシームレスに繋がったものを想定していたのでしょうか。

あと入り口の坂が少なそうでいいなぁ...

 

放置(~1967)

f:id:Nageler:20211213200633p:plain

米軍による日吉占領時(1947/04/09, 国土地理院)

戦前は日吉に拠点を構えていた藤原工業大学ですが、1944年8月慶應義塾への寄付がなされ慶應義塾大学工学部へ変わりました。しかし戦後日吉キャンパスが米軍により接収されたことで拠点を失い、目黒・登戸・溝ノ口・小金井など転々としていくことになります。

その間矢上台は放置されていたのですが、ここに移転するだけの資金力がなかったためと考えられます。

日吉と矢上の間の谷の部分は戦時中耕作を許していたため、農地改革により失われたということです。

f:id:Nageler:20211213201904p:plain

グラウンド造成(1955/01/21, 国土地理院)

f:id:Nageler:20211213202401p:plain

日吉から見た矢上グラウンド(慶應義塾大学理工学部75年史より)

とはいってもずっと遊ばせていたわけではなく、西側は体育会のグラウンドとして利用されていました。上の写真では現塾生会館の裏の宅地の造成も始まった様子が見られます。

f:id:Nageler:20211213202142p:plain

新幹線!(1963/06/23, 国土地理院)

1963年には東海道新幹線のトンネルを作っている様子も見られます。なぜ理工キャンパスの地下に鉄道を許したのか、と思ったら順番が逆だったんですね。

また日吉では第四校舎や旧日吉記念館が既に見えます。

矢上移転(1967~1972)

f:id:Nageler:20211213204744p:plain

小金井キャンパス(1961/08/27, 国土地理院)

しばらくは小金井キャンパスにいた工学部ですが、1967年11月にやっと矢上移転(日吉復帰?)が可決されます。

そして

1970年9月22日: 矢上キャンパス地鎮祭

1971年10月4日: 一部授業開始

同日: 松下記念図書館開館

1972年3月10日: 小金井からの移転完了

1972年3月27,28日: 新校舎落成披露

ということで矢上に移転しました。

f:id:Nageler:20211213214805p:plain

建設中(1971/04/25, 国土地理院)

f:id:Nageler:20211213221933j:plain

移転初期の校舎の構成は

  • 教室棟(12棟)
  • 松下記念図書館(15棟)
  • 旧厚生施設棟(16棟)
  • 教育・研究実験棟本館(23,24,25棟)
  • 教育・研究実験棟別館(33,34,35棟)
  • 電気棟(31棟)

のようになっていました。12棟,15棟,23-25棟,35棟はまだ現役ですね。

f:id:Nageler:20211213222918p:plain

完成当初(慶應義塾大学理工学部75年史より)

矢上キャンパスを作る前、1969~1970年頃に日吉第六、七校舎も作られました。

 

拡張(~1973)

f:id:Nageler:20211213224102p:plain

(1975/01/03, 国土地理院)

f:id:Nageler:20211213224258j:plain

実験棟(32棟)と旧体育館、旧部室棟ができました。
あと1973年に遅れて東側グラウンドも整備されています。

f:id:Nageler:20211213224539p:plain

旧体育館周辺(KEIO UNIV. SCIENCE AND TECHNOLOGY 1981-1985より)

f:id:Nageler:20211213224807p:plain

旧16棟周辺(同上)

厚生棟、昔は平屋だったんですね

 

数理工学科発足

f:id:Nageler:20211213224934j:plain

数理工学科ができたので1975年に数理工学科棟(36棟, 現産学連携棟)が建ちました。

 

理工学部発足

f:id:Nageler:20211213225229p:plain

(1984/12/12, 国土地理院)

f:id:Nageler:20211213225339j:plain

1981年、工学部から理工学部に再編し、学科もいくつか増えたので

  • 教室棟(11棟)
  • 教育・研究実験本館(22棟)

の2棟が新たに作られました。

f:id:Nageler:20211213225632p:plain

入口付近(KEIO UNIV. SCIENCE AND TECHNOLOGY 1981-1985より)

14棟がなかった頃は右手に図書館、左手に池がありました。

12棟は今の建物の他に東側に平屋の建物があり(現14棟西の位置)、そこは大講堂だったらしいです。

f:id:Nageler:20211213225732p:plain

現26棟の位置を望む(KEIO UNIV. SCIENCE AND TECHNOLOGY 1981-1985より)

現26棟の土地は駐車場になっていました。

50周年事業

f:id:Nageler:20211213230349p:plain

(1997/06/30, 国土地理院)

f:id:Nageler:20211213230442j:plain

1989年に理工学部が50周年を迎えたので

  • 総合科学研究センター棟(26棟)
  • 厚生棟(16A棟)
  • 課外活動棟(16B棟)

が建てられました。

組織改変

f:id:Nageler:20211213231105p:plain

(2007, 国土地理院)

f:id:Nageler:20211213231209j:plain

色々学部内を再編したり外部からの資金を注入したりして

  • 分子・超分子・超構造体リサーチセンター棟(16D棟)
  • 現体育館(27棟)
  • 創想館(14棟)

が建てられました。

 

75周年事業

f:id:Nageler:20211213231736p:plain

(2017/05/30, 国土地理院)

f:id:Nageler:20211213231825j:plain

75周年ということで

  • テクノロジーセンター棟(07棟)
  • 教育研究棟(34棟)

が建てられました。

旧33棟と34棟は取り壊されました。

 

これで現在の矢上キャンパスの形ができました!

 

参考

  1. https://www.keio.ac.jp/ja/assets/download/about/learn-more/publications/juku/289/289_04.pdf
  2. 慶應義塾大学工学部「慶應義塾大学工学部三十五年史」(慶應義塾大学工学部, 1974年)
  3. 慶應義塾大学理工学部慶應義塾大学理工学部五十年史」(慶應義塾大学理工学部, 1989年)
  4. 慶應義塾大学理工学部慶應義塾大学理工学部75年史」(慶應義塾大学理工学部, 2014年)
  5. 国土地理院地理院地図」

    https://maps.gsi.go.jp/

  6. 国土地理院「地図・空中写真閲覧サービス」

    https://mapps.gsi.go.jp/

 

Microsoft Edge(Chromium)でPDFをプレビューしたい

問題

普段私はPDFリーダとしてMicrosoft Edgeを利用しています。シンプルで高速・そこそこ高機能なのがお気に入りです。

しかし1つ問題点が。エクスプローラでPDFを選択したときに右側に出せるプレビューに対応していないんです。うーん不便だ

f:id:Nageler:20211015114256p:plain

表示されないプレビュー

やりたいこと

- デフォルトのPDFリーダはEdge

- エクスプローラでプレビューが使えるようにする

- あわよくばサムネイル表示を

解決策

Microsoftのフォーラムで同じ質問している人がいました

answers.microsoft.com

これによるとAcrobat DCを入れればよいとのこと

手順

Acrobat Reader DCを手に入れる

get.adobe.com

 

f:id:Nageler:20211015114519p:plain

オプションに気をつけろ

インストール完了すると[デフォルトに指定する]などのダイアログが出ますが無視します。

インストール後エクスプローラを見にいくとプレビューが見られるようになっていました!

f:id:Nageler:20211015115350p:plain

まとめ

- Acrobatを入れるだけでPDFリーダを変えずにプレビューを出せるようになる

- Acrobatの設定に[サムネイル表示]の項目があるが、これはAcrobatをデフォルトにしたときのみ

J-STAGEのPDFから論文概要へ飛ぶ

やりたいこと

普段レポートを書くときにJ-STAGEの論文を検索しているが、引用するときの情報がほしい

-> PDFとは別に論文概要の頁があるので移動したい、しかしリンクがない

方法

PDFのURLは

https://www.jstage.jst.go.jp/article/xxx/xxxx/xxxx/_pdf

のようになっているので、

https://www.jstage.jst.go.jp/article/xxx/xxxx/xxxx/_article/-char/ja/

のように変更する(要は_pdf -> _article/-char/ja/)

解決!

もっとよい方法があったら知りたいです

AndroidStudioで「Flutter Device Selection」が表示されない

現象

f:id:Nageler:20200903001641p:plain

「MAIN.DART」の左側に表示されるであろう、デバッグするデバイスを選択できるメニューが何故か表示されない

これがないとWebでのデバッグが面倒(コマンド叩かないといけない)

解決

StackOverflowの微妙な場所に解決策を持つ神が居りました。

stackoverflow.com

May be you have not setup environment variable for android sdk

ということでAndroid SDKのパスを正しく設定しましょう!

f:id:Nageler:20200903002107p:plain

AndroidStudioに戻ると

f:id:Nageler:20200903002259p:plain

表示されましたね

後記

このあと再現のためにPATH弄ったんですが消えなかったんですよね...

Flutter Webでホームページを作ってみた所感

Flutter Webでホームページを公開しました

こんにちは、Fastriver(@fastriver_org)です。先日私の所属しているKCS(Computer Society)の新歓特設サイトを制作、公開させていただきました。

kcs1959.jp

Flutterはモバイル向けのフレームワークなので、「普通の」Webサイトを作ってみた事例は少ないと思われるためここに所感を書いておきます。

環境

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel unknown, v1.14.6, on Microsoft Windows [Version 10.0.18363.720], locale ja-JP)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[√] Chrome - develop for the web
[√] Android Studio (version 3.6)
[√] IntelliJ IDEA Community Edition (version 2019.2)
[√] VS Code (version 1.43.1)
[√] Connected device (2 available)

• No issues found!

公開時点(2020/03/21)では Beta channelはv1.15.17なのですが、flutter runがうまく作動しないためv1.14.6に戻して作業しています。

レスポンシブ対応

Webサイトのレイアウトを考える上でレスポンシブ対応は非常に重要です。 特にflutterだとモバイル向けのデザインになりがちですが、それをPCで見るとつらいものがあります。

f:id:Nageler:20200324140144p:plain
AppBarやTabBarはそのまま使うときつい

ですがFlutter、よく出来ているのでレスポンシブに対応するためのLayoutが多く揃っています。 私はページのベースとしてLayoutBuilderを使いました。

LayoutBuilder

api.flutter.dev

LayoutBuilderはbuilderの引数にBoxConstraintsを持ち、現在の"そのWidgetの"大きさを教えてくれます。 またサイズが変わると都度リビルドをかけてくれるので、その値によってLayoutを組み直します。

情報としては画面のアスペクト比・PC or Phoneが欲しかったので以下のクラスを定義してツリーに流しました。

その他

その他レスポンシブに便利だったWidgetたちです。

AspectRatio

api.flutter.dev

画面の比率に関わらずWidgetを一定の縦横比にリサイズしてくれます

Align

api.flutter.dev

基本はStack内で使うものですが、Alignで囲むと大きさが(部分的に)親に依存しなくなるので便利です

Wrap

api.flutter.dev

Column, Rowに似たもので、Mainの幅が足りなくなると自動的に折り返してくれます。chipとかによく使われるやつですね

Expanded

api.flutter.dev

ColumnやRowに使います。余り部分を埋めてくれます

AutoSizeText

pub.dev

幅に合わせて文字の大きさを自動的に決定してくれます。最高

ExpandedGrid

pub.dev

私が作ったもので、こんな感じのViewが作れます。

パフォーマンス

Flutterさん、クロスプラットフォームにしてはAndroid, iOSでの実行速度が速く問題ないだろうと思っていたのですが、 Flutter Webは現状かなり重いです。

それもそのはずそれぞれの実装は

であり、またFlutter Webは殆どをCanvasで描画しているということがあります。 Stable版に期待したいところです。

特に気になる点

起動

main.dart.jsの読み込みに時間がかかります。

Google PageSpeed Insightsでみると、以下のように8秒以上かかっていることがわかります。

f:id:Nageler:20200327113706p:plain

プロジェクト作ったときのサンプルでも数秒かかります、削減方法はよくわかってないです。

developers.google.com

スクロール

今回一番躓いたのがスクロールでした。文字だけのスクロールでも60fpsを達成できません。 特に画像を中に数枚置くと、動きがガクガクになりました(画像の大きさより数の方が影響が大きい)。

こちらのトップページを見ていただけるとわかると思います。

またしっかり調査したわけではないのですが、周りの反応からみて泥ChromeよりもアイポンSafariの方がスクロールに関してはスムーズだったようです。 (端末のスペックにもよるので一概には言えない)

一応対策として以下のようなStatefulWidgetを作り、スクロールの現在位置を監視しながら表示されていないViewのOpacityを0にすることで 常時読み込みのWidgetを減らしています。

少し長いのでPageでの実装は

github.com

を見てください。

現状Flutter Webでスクロールさせるのはやめたほうがいいです。許されても単純なListViewだけです(ListView.Builderを使おう!)。

パス(URL)

Webサイトにとって完全な単一ページでない限り、それぞれのページにパスを設定し直接飛べるようにしなければなりません。 Flutter Webでは基本全てが"#/"に飛ばされるのでFlutter側でパラメータの読み取り・URLの変更・画面遷移をする必要があります。

公式ではまだまだ対応が少なく(そもそもモバイルのroutingを使っているので面倒)、ライブラリも決定的なものはないようです。

私が実装したかった機能はこれらです

  • 画面遷移時にURLを変更
  • そのURLに直接アクセスするとそのページに飛ぶ(rootからツリーを辿る)
  • パラメータを渡す
  • Modalな画面遷移

画面遷移時のURL変更

これは標準で対応してくれているので、すぐにできます。やり方はMaterialAppsのRoutesに登録する方法と、MaterialPageRoutesを使う方法があります。

MaterialAppsにはroutesという引数があるので、パスと遷移先のページを指定します。

その後遷移したいときに、Navigator.pushNamde()にパスを渡して呼び出します

実はこの方法を取れば2個目の直接遷移ができます。ただしURLには注意が必要で、#/が入っていなければいけません。

https://kcs1959.github.io/2020new/#/works

routesに登録していない場合でもMaterialPageRoutesでパスを指定することでURLが変更されます。

パラメータを渡す

Flutter WebがURLから呼ばれたときの挙動は、

  1. routes内に "#"より後(hoge.hoge/#[この部分])の一致するものはあるか確認、ある場合は遷移
  2. onGenerateRoute()を呼び出す
  3. 返り値がnullの場合はhomeに指定されたページに遷移

onGenerateRoute、homeは共にMaterialAppsの引数に取ります。onGenerateRouteは引数にRouteSettingsを取り、 その中(settings.name)に"#"より後のパスが入っているのでこれをパースすることでパラメータを得られます。

後はUriクラスなどを使って適当に処理しましょう。

Modalな画面遷移

f:id:Nageler:20200327205827p:plain
こういう画面を作りたいわけだ

かっこいいのでHeroでつながったポップアップ式の画面遷移にしたい+都合上それぞれにURLを振りたい

ということを考えていました。しかし

  • 自由なレイアウトのためDialogではなくNavigatorで遷移する
  • URLを振るためにPushNamed()で遷移したい
  • ページを重ねるために背景を透明にしなければならない
  • しかしPushNamed()だと背景を透明にすることが出来ない

となっており、一筋縄ではいきません。

3つ目についてですが、Navigatorは内部でStackを利用し、Pageを上に重ねて遷移しているらしい(未確認)ので PageRouteBuilderのopaqueをfalseにすると背景を透明にでき、下のページが見える感じになります。

どうしてもパスの文字列で画面遷移したかったので、routesを保持するクラスを作ってそこからPageRouteBuilderを呼ぶようにしました。

ハイパーリンク

FlutterのTextViewはHTMLの文字とは違い<a>タグでリンクを貼ることができません。 そのためなにかWidgetにタッチイベントを付けてそこから飛ばす実装をすることになります。

Flutter Webでも外部リンクはurl_launcherを使えます。

pub.dev

タッチイベントを貼るのには

  • Card+Icon
  • Button類

辺りが分かりやすいと思います。

hover時にカーソルを変えるのはここを参考にしました。

medium.com

埋め込み

他サイト、HTML、MarkDownなどの埋め込みにはeasy_web_viewが使えました。

pub.dev

内部でdart:htmlを使っているようなので動作も軽快です。ただMarkDownについてはCSSの設定がよくわかりませんでした。

PWA

PWAは現在Flutter Webは標準で対応しています。特段の設定は必要ないようです。情報はweb/manifest.jsonに書けば反映されます。

スプラッシュ画面

パフォーマンスの項でも話しましたが、Flutter Webは起動がなかなか遅いです。白い画面が続くとブラウザバックの率が高まります。 少し考えると、main.dart.jsが読み込まれるまではindex.htmlの内容が表示されているわけで、そこに写真を貼り付ければ スプラッシュ画面の代わりとして使えます。

アナリティクス

google analyticsは、ページごとに統計をとってくれるようなので普通のWebページ用のだとHPに訪問したかどうかしかわかりません(実質単一ページのため)。

Firebaseパッケージではなんとanalyticsが使えます。

pub.dev

なのでPageを読み込む時(initState()とか?)に

analytics().logEvent("PAGE_MAIN", null);

のように埋め込んでイベントを記録することで、ページごとの訪問数を記録できます。

まとめ

  • 現状パフォーマンスにおいて実用には向かない
  • パス周りも苦労を強いられる
  • スクロールさせないSPAであればそこそこ行ける気がする
  • 細かい機能はPackageを漁れば結構見つかる
  • HTML,CSS,JSを書かなくていいのは素晴らしい

Flutter Webの将来は明るいと思います。発展させていきましょう!

Flutter on the WebでFirebase導入して詰まった

状況

Flutter WebはFirebaseを導入する際、モバイルとは違いJavaScriptを読み込んで使う。そのためindex.htmlに\<script>を仕込むのだが、異変が起きた。

Launching lib\main.dart on Chrome in debug mode...
Building application for the web...
Attempting to connect to browser instance..

flutter runをしてもここから一切動かないのだ。ググったらimportを消せとか色々策があったが効果はなかった。

解決

A . main.dart.jsを読み込んだ後にFirebaseの設定をしようとしていませんか?

はい。

<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
      //略
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>

とするのが正解です。

真理

f:id:Nageler:20200208204731p:plain

終わりに

公式の文章はちゃんと読もうね!