だら$ちっぷす

仕事の覚書です

flutter、VSCodeで自動整形しないようにする

VSCodeで表示されるコードって、わたしにとってはものすごーく見辛いんですよね。
何書いてあるんか頭に入って来ないくらい見辛いです。
なので、愛用のさくらエディタで見やすいように自分で整えて、自分なりのコメントも書き込んで、やっと何が書いてあるんかわかって来ました。
整形したコードはそのままVSCodeにも反映されています。(VSCodeは外部エディタで変更されたやつも連動して表示してくれます)
にこにこ(´∀`*)

ところが、実行してみたらエラーが出ます。
なんで?と思ったら、コメント書いてるとこが赤くなってる。
大丈夫なとこもあるので、書いてはいけないとこに書いてるぽいです。
で、そこ直してて気づいたんだけど、せっかく整形しなおしたコードがいつの間にか戻ってるーーー!!><;
見やすく改行したとこが全部取り消されてるし、4タブが2タブになってるしー!
まあ、2タブはええけど、改行は取り消さんとってほしい!ギチギチに詰まってたら見づらいねん!::: (ノ'A`)>:::
VSCodeでの表示だけの問題かと思ってたら、さくらエディタで開いても元に戻っていました。( ‘ᾥ’ )凸
どうやら、ファイルを保存するときに書き直されてしまうっぽい。

というわけで、自動整形をやめてもらうことにしました。・3・

画面左下の「歯車」をクリック→「設定」をクリックすると設定画面が開く。


「設定の検索」のところに、「editor:format」と入れる。
すると、自動整形関係の設定が色々出てくる。
自分は、”保存するときにフォーマットする”てやつに困ってたので、「Editor: Format On Save」のチェックをはずしました。

flutter開発環境構築 その3.Visual Studio Codeの設定

後はエディターを設定して、プログラムを組めるようにするだけだ!(๑•̀ㅂ•́)و✧

docs.flutter.dev

VS Codeのインストール

 自分のマシンには既にVScodeがインストールされてるので省きます。
 (node.js のデバッグに使っています。デバッガとしてしか使ってないのでそれ以外の使い方は全く知りません><;)


VS Codeのセットアップ

docs.flutter.dev
 上のページの、ここクリック


docs.flutter.dev
 「Install VS Code」になってなかったら、ここをクリックしてタブを切り替える


 ここに書いてあることをやっていく。


flutter拡張機能をインストールする

 VS Codeを立ち上げて「拡張機能」のページを開く。
 (日本語化済みなので、日本語化パックが入っています)



 「flutter」と入力して検索。
 flutterが見つかったら「インストール」をクリック。



 入ったので「インストール」ボタンが消えました。^^



 検索文字列を空にしたらインストール済み一覧が出てきました。
 Fultterを入れたらDartも一緒に入るようです。




VS Code の設定を検証する

 「表示」→「出力」の右上ドロップダウンから「flutter」を選ぶ、って書いてあるのですが、
 これがどうしても出てこない。(つ﹏<)・゚。



 めっちゃ調べたけど、ここの作業を書いてる人はあって当然なように書いてるし、それ以外の人はなんも書いてないし。。。
 埒が明かないので、とりあえずこれは後回しにします。><;
 (この次の作業で解決?しました^^v)


試運転。アプリを作成

docs.flutter.dev
 「表示」→「コマンド パレット」



 「flutter」と手入力
 ・・・あれ?ずっと探し続けてた「Flutter: Run Flutter Doctor」が、しれっとあるよ?Σ( ̄□ ̄;



 押してみる。



 あるやん!!
 なんやねん、それ!!(つ﹏<)・゚。
 まあ、上記の問題は解決したってことで。(ー''ー)





 気を取り直して、お手本に戻る。
 「Flutter: New Project」を押す。



 「Application」を押す。



 フォルダ選択



 プロジェクト名入力。(デフォルトで表示されたやつをそのまま使いました)



 「保存」を押しました。



 「保存」を押しました。



 なんか出来た!



 エクスプローラで見たらこんなん。



アプリを実行

 ステータスバーの表記の部分をクリック。
 (愚痴:こんなとこがクリックできるとか考えもしやんかった。。。めっちゃ悩んだ。。。(;´д`)だってステータスバーってステータスの《表示》するとこやんなあ?・3・)



 デバイスを選択



 「実行」→「デバッグの開始」



 待つ。



 なんか立ち上がってきた!!



 右下の「+」のとこ押したら1ずつ足し上がる。



 ソース上で表示されてる文言の行みつけて、書き直してみた。
 書き直したら、上の雷マークをクリック。



 なんかコンパイルしてるぽい。



 文言変わったー!^^v



長い戦いに勝利した!!✧。٩(ˊᗜˋ)و✧*。

flutter開発環境構築 その2.Androidデバイスの設定

「flutter開発環境構築 その1」の途中で行ったAndroidバイスの設定を抜き出しました。


Androidバイスをセットアップする

 >Androidバイス上で Flutter アプリを実行およびテストする準備をするには、Android 5.0 (API レベル 21) 以降を実行している Androidバイスが必要です。
 ふむふむ。pixel7を取り出して…「設定」→「デバイス情報」で確認。わたしのは14なのでOKですね^^

developer.android.com

開発者向けオプションとUSBデバッグを有効にする

 pixel7を取り出して「設定」→「デバイス情報」で、「ビルド番号」を7回タップ。
 なにその隠しコマンドみたいなん!!おらぁワクワクすっぞ!!(๑˃́ꇴ˂̀๑)◞♡
 次に、「設定」→「システム」→「開発者向けオプション」で、「USBデバッグ」をONにする。


Androidエミュレータをセットアップする

Android Studioを起動し、デバイス マネージャアイコンをクリック。



バイスの作成をクリック。
※なんか既に1つ居ますが、これは昔試しに入れてみたやつかなあ?機種が古いし。無視。^^;



>デバイス定義を選択し、[次へ]を選択します。



>エミュレートする Android バージョンのシステム イメージを 1 つ以上選択し、[次へ]を選択します。x86またはx86_64イメージが推奨されます。
こう書かれてるんですが、自分の環境では、これしか選べませんでした。他のを選んでもエラーメッセージが表示されて「Next」がアクティブになりませんでした。



>「エミュレートされたパフォーマンス」で、「ハードウェア - GLES 2.0」を選択してハードウェア アクセラレーションを有効にします。
>AVD 構成が正しいことを確認し、[完了]を選択します。



「▶」押してみる。



なんか、走り出したー!!Σ( ̄□ ̄;
ブロックされてるやつのアクセスは許可しました。



こんな感じ。



「■」を押したら終了しました。


flutter開発環境構築 その1.flutterインストール、Android Studioインストール、Visual Studioインストール

AndroidiPhoneとを共通で開発できるflutterなるものがあると聞き及んだので試してみようと思う。

ぐぐった。おおー、Googleのやつなのねー。
codelabs.developers.google.com
windowsMacLinux、web(web?どういう意味やろ?ブラウザ対応?PaaSとかIaaSとか?)でも使えるらしい。
なにその万能感。( ゚o ゚)


基本的に、上記記述に沿って開発環境を構築しようと思います。
自分のマシンはwindows10です。


エディタ
  なんでもええらしい。
  自分はnode.jsでVScode使てるんで、そのままそれを使います。


開発ターゲットを選ぶ
 pixel7使てるんで、androidで。。。と思ったら、そういう意味ではないようだ。
 開発マシンがwindowsなんで、windowsを選ぶ方がいいらしい。


FlutterSDKをインストールする


docs.flutter.dev

docs.flutter.dev

ここからは、基本的に上記のサイト(Windows install | flutter)の記述に沿ってインストールしていきます


FlutterSDKを入手する



 zipが落ちてくるので、インストールしたいディレクトリに置いて、解凍。
 (解凍=インストールなやつのようです。インストーラはありません)
 このとき、ディレクトリ名に特殊文字とかスペースを含んではだめ。
 昇格した特権が必要なディレクトリに置いてはだめ。例えばちょっと置きたい気持ちになるけど、program Filesの下とかはダメ。(まあ、スペース入ってるしそこであかんわなー)

 わたしは、まあ、適当に「c:\google\flutter」にしました。
 お手本はc:\src\flutterなんだけど、なんかc:\直下にsrcって名前のディレクトリ置くのってやだなーって感情で。^^;


flutter\binにパスを通す







ちゃんとできてるかドクターに診断してもらう

 実行できる環境になってるかどうか、ドクターが診断してくれるらしい。
 助かる。^^

 C:\google\flutter>flutter doctor



 なんかキャッシュが残ってるぽい?
 指摘されてる通り、dart pub cache clean を実行してみた。



 なくなった。めっちゃ親切やな。感動。
 次いきます。
 自分の環境では3つほど必要なものがないらしいが、インストールの手引書通りに進めれば全部入るのかな?


Android Studioをダウンロード

developer.android.com



 同意する。



 「プロフィールを作成」を選んでみたらなんか色々入力しないといけなかったんで、やめて、「表示しない」を選んだ。



Android Studioをインストールする

 上記ダウンロードで落ちてきたexeを起動。



 ざくざく進めて…

 完了。結構時間かかった。



 flutter doctor で確認


 Android studioが√になった。^^v


 ここで、お手本に沿って、
  Androidバイスをセットアップする
  Androidエミュレータをセットアップする
 をしたんやけど、ドクターの診断に変更はなかった。
 多分、今、やらなくてもいいと思う。
 ごちゃごちゃするので「flutter開発環境構築 その2」に移します。


 また、お手本通りにやったら他の足りないものが入ると思ってたのに入らなかったんで、行き詰まって、他にインストールしてはる人のブログとか漁ってみた。
 そしてたら、flutterプラグインていうのをインストールしてはったんで、これ入れたら万事解決か?!と思って入れてみた。


flutterプラグインをインストール


 Dartも一緒にいれますか?て聞かれて、はい。て答えたかも。スクショ撮ってない(><;
 プラグインの一覧にDartもあるのでもしかしてInstalledになってなかったらinstallしといた方がいいと思います。



 結果、なんも解決せんかった。悲しみ。(つ﹏<)・゚。
 でも、これはいずれにせよ必要な気がするんで、よかったことにする。
 気を取り直して、ドクターの言葉に耳を傾けて、問題点を1個ずつ潰していく。


Google USB ドライバをインストール

developer.android.com




Android SDK Command-line Toolsをインストール




Androidライセンスに同意する




Android toolchainがOKになった!^^v


残るはVisual Studioか。。。というところで一旦中止。他の仕事します。

  三(‘ω’)三( ε: )三(.ω.)三( :3 )三(‘ω’)三( ε: )三(.ω.)三( :3 )ゴロゴロゴロ

久々に続きをやります。
flutter doctor を走らせたら、後1つ足りないのと、バージョンアップしろというのが来ていました。



とりあえず指示通りのコマンド打ち込んでバージョンアップしました。

  C:\google\flutter>flutter upgrade

バージョンアップも教えてくれるのか。親切やなー。^^
さて。最後に残ったVisual Studio関連に取り掛かる。


Windowsのセットアップ

 C#いろてるからVisual Studioは入れてるのになんであかんのかなーとおもてんけど、そういえばC++を入れてなかったかも。

learn.microsoft.com

 インストーラ(VisualStudioSetup.exe)を起動。
 インストーラ、既に入ってるVisual Studioのメニューかスタートメニューにあるかなあ?と思って探したけど見つからなかったです。そういうものなの?exeを探し出してダブルクリック。



 これかなあ?と思って「C++によるモバイル開発」にチェックをつけて、「変更」をクリック。
 結果、ドクターの診断は変わらなかったので、これは必要ないかもです。一応、入れたので書いとく。



 インストール、めっちゃ時間かかりました!><

 ドクターに見てもらったが状況変わらず。
 もしかしたら、こっちかな?

 「C++によるデスクトップ開発」にチェックをつけて、「変更」をクリック



 またまた、めっちゃ時間かかります!
 しかも今度はインストール終わったら「再起動した方がいいよ」て言われました。
 マシンを再起動する。
 ・・・もしかしたら、Visual Studioを再起動って書いてただけかも?^^;

 まあ、ええわ。患者の意識が戻りました!ドクター!



 うおおおお!✧
。٩(ˊᗜˋ)و✧。やった!ドクターのお許しが出ました!完全体です!



Android Studio日本語化

後、ついでなので、Android Studioを日本語化しておきます。


日本語化パックはマーケットプレイスにないので、JET BRAINS のサイトからダウンロードしてきます。
plugins.jetbrains.com
Android Studioを起動して、「設定」→「About」

バージョンをチェックする

該当するバージョンのプラグインを選んで、ダウンロード



Android Studioの「plugin」のタブで、「設定」→「Install Plugin from Disk...」

ディスク上からダウンロードしたファイルを選択して「OK」

日本語化パックが表示されるので、「Restart IED」をクリック

「Restart」をクリック

再起動されて、日本語になりました!じゃーん!°˖✧◝(⁰▿⁰)◜✧˖°

プラグイン」「インストール済み」に入ってるのを確認

C#はじめました。画面を複数作る。

他のことしてたんで久々。

visualstudio2022を起動
「新規作成」
windowsアプリケーション」で最初の画面を作る

とりあえず、「DB画面」というボタンを作った
ここをクリックしたら画面が開くようにしたい

右端の「ソリューションエクスプローラー」てとこで、プロジェクト名を右クリック
「追加」クリック
「新しい項目」クリック


こんなん出た


ここで最初、名前を入力して「追加」をクリックした
そしたら、ソリューションエクスプローラーに、「C# formDB.cs」ていう表示が、「C# Program.cs」の上に追加された
これは意図したこととは違うなー^^;フォームが作りたいねん
そいつは消してやり直し。 同じところで「すべてのテンプレートの表示」をクリック


「新しい項目の追加」という画面が出た
ここで選ぶんかー!
「フォーム(windowsフォーム)」を選んで「追加」
(注意)名前はここで下の方にある入力欄に入力します。
    気が付かんかったのでForm2.csでできてしまいました。><;
    まあ、後で名前変えたらええだけですけども。


Form1のデザイン画面で、ボタンをダブルクリック


ソースコードを入力するとこが開く


「form」と入力すると、選択肢がずらーっと表示される
「Form2」を選ぶ


なんか勝手に出てきたー!!「tab」キー押す


もっかい「tab」キー


なんか勝手に入力してくれた!すげー!
ここで、「改行」キーを押す


なんかまた「tab」押せゆうてる。押す


やたー!プログラムできたよー!Σ( ̄□ ̄;しかし今どきのIDEはすげえな


メニューのとこで「開始」押してプログラム走らす


「DB画面」押す


2つ目の画面開いたー!
あれ?ボタンなんか追加したっけ?^^;なんか間違えて触ったんかもです

C#はじめました。Excelを使う。

しまった。。。スクショは撮ったのに書くの忘れててあんま覚えてない。変なとこあるかも。。。と思いつつ、まとめる。


Excelを使いたいので調べる。

とりあえず、ぐぐって先頭に出てきた本家Microsoftがおすすめする、Microsoft Excel ObjectLibraryを入れてみる。
けど、これだとだめだわーということに気づく。なにがだめだと思ったのか覚えてないんやけど。。。(^^;
なんやったかなあ?DBで取ってきたデータを貼り付けようとしてrangeで書き込む方法探してたらみつからなくて、代わりにrangeで書き込めないと書かれてるのを見つけたとか、そういうことだったと思います。

とりあえず、そんな感じで、他を探す。

ClosedXML
NPOI

このどっちかがよさそう。
使いやすいのはClosedXMLだけど、グラフ生成機能がないのが難点らしい。
NPOIは多機能だけどクセがすごいんじゃー!らしい。
今回はグラフは外からは作らない方針なので、ClosedXMLをインストールしてみる。


<大事!!>
以下、自分がやった履歴を書いてますが、後から見るとやらんでええことをいろいろやっています。
以降、赤字で書いてるとこは、多分、いらんことやと思います。


ClosedXMLは、NuGetからインストールするらしい。

ツール→NuGetパッケージマネージャ→パッケージマネージャコンソール


パッケージマネージャコンソール→パッケージソース→Microsoft Visual Studio Offline→nuget.org



パッケージマネージャコンソールから、closedXMLインストールを指示するらしい。

なんかエラー出たー(つ﹏<)・゚。


「install」「-package」 じゃなくて、「install-Package」なのねー。
意外と、ここで時間くったw

またエラー出たー(つ﹏<)・゚。



パッケージソースをnuget.orgに変更しなきゃですね。
よく気がついた!わたし!σ-`д・´)☆



なんかまだ怒られる・3・
SixLabord.Fontsてなんやねん。


なんか、コマンドラインからじゃなくて、パッケージマネージャとやらからインストールしてはる人を見かけたので、そっち試してみる。

とりあえず、今、ごちゃごちゃ入れたのをクリアする。

ツール→オプション

NuGetパッケージマネージャ→全般→規定のパッケージ管理形式→PackageReference


NuGetパッケージマネージャ


NuGet・ソリューション→ClosedXML


プロジェクトにチェックを入れてインストール


まだ文句いわれてるー(つ﹏<)・゚。



いっぺん、パッケージをクリアしてからやりなおせって書いてるのを見たのでクリアしてみる。



もっぺんインストールしてみたら、上のエラーは消えたけど、SixLabord.Fontsのエラーは相変わらず残っている。





さらから始めるんやったら、ここからスタートでOK!やと思う!多分!


SixLabord.Fontsを個別でインストールしないとだめらしい。



なんかキター!



同意します!



closedXMLを再再再度?インストール!!



同意します!



やった!!遂に、インストール成功!!✧。٩(ˊᗜˋ)و✧*。



こんな感じのプログラムでExcelファイルの作成に成功しましたよ。(๑•̀⌄ー́๑)b

using ClosedXML.Excel;

・・・

        private void btn_excel_Click(object sender, EventArgs e)
        {
            using var wb = new XLWorkbook();
            var ws = wb.Worksheets.Add("シート1");

            ws.Range(1, 1, 10, 10).SetValue("(∩´∀`)∩");

            wb.SaveAs(@"test.xlsx");
        }

C#はじめました。postgreSQLに繋ぐ

postgreSQLをインストールしました。

適当にテーブル作りました。

ツールボックスからDataGridViewというのをFormに貼り付けました。
ここにDBから読み込んだデータを表示したいと思います。


ソース、こんなかんじ

using Npgsql; 

・・・

        private void btn_DBconnect_Click(object sender, EventArgs e)
        {
            try
            {
                // 接続文字列
                var conStr = "Server=localhost;Port=5432;Username=postgres;Password=daradara;Database=test";
                using NpgsqlConnection con = new(conStr);
                con.Open();

                using NpgsqlCommand cmd = new();
                cmd.Connection = con;

                for (int i = 0; i < 3; i++)
                {
                    //データを作る
                    cmd.CommandText = $"INSERT INTO syain(name, birthday) VALUES ('社員{i}', '{DateTime.Now}');";
                    ret = cmd.ExecuteNonQuery();
                }

                //データを読み込む
                IDataAdapter dataAdapter = new NpgsqlDataAdapter("select * from syain", con);
                var dataSet = new DataSet();
                dataAdapter.Fill(dataSet);

                //グリッドにデータセットをリンク
                this.dataGridView1.DataSource = dataSet.Tables[0];
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex);
            }


エラー出た(><;
なんかバージョン古いて言われてる。



shincode.info
要は、プロジェクトファイルを書き換えればいいってことね。
というわけで、ソリューションの下のプロジェクトの下に「.csproj」ていう拡張子のファイルがあるんで、それをエディターで開いて、LangVersionを書き加えてやる。
8.0以上を使え言うてるやつと、9.0以上使え言うてるやつの2つがあるので、9.0にしてみる。



VisualStudio再起動。

エラー出やんと走ったー。(´∀`*)



他のマシンからもDB参照できるようにする。

postgresweb.com
C:\Program Files\PostgreSQL\15\data を開いて、

postgresql.conf を書き換え。

# - Connection Settings -

listen_addresses = '*'  # what IP address(es) to listen on;
                    # comma-separated list of addresses;
                    # defaults to 'localhost'; use '*' for all
                    # (change requires restart)


pg_hba.conf に下の1書き加え。

# IPv4 local connections:
host    all             all             127.0.0.1/32            scram-sha-256
host    all             all             0.0.0.0/0            scram-sha-256   # 2023-08-07 追記



postgreSQL再起動(。。。すんのなんかめんどいからマシン再起動した)

OK!^^