SPAやPWAを開発する時に、サーバーサイドを構築するのではなく、クライアント側にデータを保存したいこともあると思います。

この記事では、ブラウザにデータを保存可能な方法とそれぞれの違いを紹介します。

0. まとめ

まとめると以下のようになります。

1. 種類

データを保存するAPIとして以下のようなものがあります。

• Local Storage
• Session Storage
• Indexed Database

2. データの保存期間

• Local Storage
  • 永続的（ブラウザやタブを閉じても残ります）
• Session Storage
  • セッション（ブラウザやタブを閉じると消えます）
• IndexedDB
  • 永続的（ブラウザやタブを閉じても残ります）

3. 保存可能な容量

• Local Storage
  • 5MB ~ 10MB
• Session Storage
  • 5MB ~ 10MB
• Indexed Database
  • 5MBだが、ユーザーが拡張を承認するとディスク空き容量の全体の50%まで使用可能

4. 格納可能なデータ種別

• Local Storage
  • 文字列のみ
• Session Storage
  • 文字列のみ
• Indexed Database
  • 全てのJavaScriptデータタイプを格納可能

5. 条件抽出など

• LocalStorage
  • キー・バリューペアでの管理のため、不可
• Session Storage
  • キー・バリューペアでの管理のため、不可
• Indexed Database
  • Dexie.js の Whereメソッドで条件抽出が可能

6. ソート・並び替え

• LocalStorage
  • キー・バリューペアでの管理のため、不可
• Session Storage
  • キー・バリューペアでの管のため、不可
• Indexed Database
  • Dexie.js の sortBy、reverseメソッドでソートが可能

7. LocalStorageの基本的な使い方

LocalStorage はJavaScriptで以下のように書きます。

書き込み

1

window.localStorage.setItem(key, value);

抽出

1

var value = window.localStorage.getItem(key);

削除

localStorage.removeItem(key);

8. IndexedDBはdexie.jsを使うと簡単！

Indexed DB はラッパークラスである dexie.js を使うと簡単に実装できます。

https://usefuledge.com/howtousedexiejs.html

Indexed DBとは、クライアントサイド（ブラウザ側）に構築されているデータストアで、キーで紐づけられたデータを扱うことができます。

Local Storageに比べて、大容量のデータを扱うことができます。

この記事では、Indexed DBを簡単に実装できるDexie.js の使い方について紹介します。

1. Dexie.js とは

https://dexie.org/

Dexie.jsは Indexed DBの JavaScriptラッパーで、gzip圧縮で22KBという超軽量なライブラリです。

オープンソースであり、GitHubで公開されています。

https://github.com/dfahlander/Dexie.js

2. Dexie.js のインクルード方法

インクルード方法はとっても簡単です。

headタグの中に以下を追加するだけでOKです🙆‍♀️🙆‍♂️

1

<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>

3. データベースとストアの作成

データベースを作成するには、以下のように記述します。

1

var db = new Dexie("NoteDataBase");

データストアを作成するには、以下のように記述します。

1
2
3

db.version(1).stores({
    Note: '++id, NoteID, SavedDateTime, Title, Contents'
});

このデータストアの定義は以下になります。

• バージョン番号：1
• データストア名：Note
• キー：id （オートインクリメント）
• データ：NoteID, SavedDateTime, Title, Contents

クライアントサイドのバージョン番号が古い場合、自動的にデータストア定義が更新されます。

4. レコード作成・更新

レコードを作成・更新するには、以下のコードで実現できます。

1
2
3
4
5
6

await db.Note.put({
        NoteID: 1,
        SavedDateTime: Date.now(),
        Title: "はじめてのノート",
        Contents: "はじめてのノートです。サクサク快適にメモできます。"
    })

Noteというデータストアに対してレコードを更新しています。
キーにしていた「id」はここでは指定していません。オートインクリメントですので、自動的に採番されます。

5. 全件取得

データストアのレコードを全件取得するには以下のようにコーディングします。

1

let allrec = await db.Note.toArray();

6. レコード検索

whereメソッドを使用して検索することも可能です。

1
2
3
4
5

let NoteRecord = await db.Note
                            .where({
                                NoteID : parseInt(_NoteID),
                                SavedDateTime: parseInt(_SavedDateTime)
                            }).toArray();

7. ソート・並び替え

並び替えするには、sortByメソッドを使用します。
reverseメソッドと組み合わせると、降順ソートも可能です。

1

let NoteRecords = await db.Note.where('NoteID').equals(parseInt(_NoteID)).reverse().sortBy('SavedDateTime');

8. レコード削除

削除するには、deleteメソッドを使用します。

whereメソッドを使用してレコードを絞り込み、最後にdeleteメソッド呼び出してレコード削除します。

1
2
3
4
5

await db.Note
            .where({
                NoteID : parseInt(_NoteID),
                SavedDateTime: parseInt(_SavedDateTime)
            }).delete();

Blazor は c# でSPAが作れるフレームワークです。
Blazor(c#)からJavaScriptを呼び出せるので、JavaScriptから window.location.href でページ遷移することもできますが、この記事では、Blazor(c#)側でページ遷移する方法を紹介します。

1. 使い方

NavigateTo メソッドは以下のように使用します。

まず、.razor ファイルの先頭で inject します。

1

@inject NavigationManager NavigationManager

これで、NavigationManagerが使用可能になります。

続いて、@code ブロックの中で以下のように記載します。
このコードは、 /page というURLに遷移するメソッドになります。

1

NavigationManager.NavigateTo($"/Page", false);

2. 公式ドキュメント

公式ドキュメントは以下になります。

https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.navigationmanager.navigateto?view=aspnetcore-5.0

NavigateTo メソッドは以下の2つの引数を持ちます。

1

public void NavigateTo (string uri, bool forceLoad = false);

1. URI
   　遷移先のURIです。

2. forceLoad
   　bool 型で指定します。初期値はfalse です。
   　trueの場合、クライアントサイドでページ遷移が行われます。強制的に遷移させたい場合にもtrueを指定します。
   　falseの場合、Blazorフレームワークで処理が行われますので高速ページ遷移が行われます。

読書していますか？ほとんど全ての情報がインターネットで公開されていると思われている時代ですが、本の方が情報が網羅されていたり、分かりやすかったり、メリットが多いことがあります。

一方で、本を読むのは苦手だったり、まとまった時間が取れず進まないこともあると思います。

この記事では、読書が嫌いな人のための読書法を紹介します。

1. 読書の必要性を理解する

まず、なぜ本を読むのか、本を読まないといけない理由を自分の中で確認しましょう。

例えば、プログラミングの方法を勉強するために本を読むという場合は、自分の知りたい内容をピンポイントで短時間で習得することを目標にしましょう。

もちろん、自分の知りたかった内容以外にも、重要な情報が書かれていると思いますが、本に書かれていること全てを細かく理解するのは大変です。文章量も多いですし、著者によっては難解な表現をしている書籍もあります。

本の目次などをさらっと読んで、この本から習得する内容を３つ決めましょう。その３つをしっかり習得することを、本を読む目的・目標とするといいです。ビジネス書はすべてを読む必要はありません。自分が決めた３つの目標を達成するために、必要な箇所だけ読みましょう。

一方、小説などは、ストーリーを楽しむことが読書の目的になります。そのため、最初から最後までじっくり読む必要があります。小説の著者も、最後までスピードを落とさずに読ませるような文章を書いていますので、楽しく読むことができると思います。

2. 固定観念を捨てる

本を読むにあたり、以下のような固定観念を持ってはいないでしょうか？

• 全てをしっかり読む必要がある
• 細部まで理解する必要がある
• 読みにくい本も理解しようと努力する

これらはすべて捨てましょう。言い換えると、以下のようになります。

• 全てをしっかり読む必要は無い。自分の読書の目的を達成する箇所だけ読みましょう。
• 細部まで理解する必要はありません。難解な本を読むのは疲れますので、易しく書かれた本で知識を習得しましょう。
• 読みにくい本は、さっさと諦めましょう。著者と読者（自分）の相性が悪いこともあります。相性のいい著者を探しましょう。

読書の必要性をしっかり理解していれば、自然と、その目的を達成することを念頭においた読書方法になると思います。さきほども述べたように、ビジネス書であればすべてを細かく読む必要はありません。
その本から得たい３つの情報を得られる箇所だけ読みましょう。

3. 15分だけ集中して読書する

人間の集中力は長くありません。ポモドーロタイマーを使用したことがある人は、25分ごとに5分または15分の休憩を入れたと思います。テレビ番組であれば、15分おきに必ずCMをはさみます。これらは心理学の観点からも証明されており、人間の集中力は15分～25分程度とされています。

そのため、まずは15分だけ集中して読書をしてみましょう。15分だけ、スマホを通知をオフにし、PCもテレビも消して、本に集中してみましょう。

たった15分と思うかもしれませんが、集中すると5～6ページは読めます。これを毎日続けると、1年間で91時間の読書時間を得ることができます。

毎日5ページ読んだとすると1年間で1825ページになります。

もちろん、15分経過後に、もっと読みたいという気持ちになれば、読みすすめてOKです。本を読んでいるうちに楽しくなり続きが読みたいと思った経験が誰でもあるでしょう。時間を忘れて読み進めることで、有意義な時間になると思います。

4. 本は常に持ち歩く、色々なところに置いてすぐに読めるようにする

本は、読みたいときに読めるようにしておくといいです。鞄の中や寝室の枕元、トイレの中など、いろいろなところに本を置いておいて、読みたいと思ったときにパラパラとめくってみる。そうすると、隙間時間で知識を得ることができます。

読みたいときに手元に本が無いと、せっかくのタイミングを逃してしまうことになります。読みたいときにすぐに読めるように、本をいろいろなところに設置しておくのがいいです。

そういった意味では、紙の本よりも電子書籍に軍配が上がります。大体の人は、スマホを常に持ち歩いているからです。スマホを開けば本が読める、このような状態になっていると、本を読みたいタイミングを逃すことはなくなります。

しかし、電子書籍よりも紙の本のほうがメリットがある理由があります。それは次の章で述べてみます。

5. 電子書籍より紙の本

電子書籍は、スマホやタブレットで読んでいる人が多いと思います。もちろん、専用端末で電子書籍を読んでいる人もいるでしょう。ここでは、スマホやタブレットで電子書籍を読んでいる場合で論じてみますが、スマホやタブレットの場合、SNSやゲームへの誘惑が非常に多いです。また、通知が多いことで集中力を遮られます。

そのため、せっかく本を読もうと電子書籍アプリを開いても、数分後にSNSの通知がきてそちらに流れてしまうと、まとまった時間で本が読めません。このようになってしまう人は、紙の本がおすすめです。

紙の本では、ゲームもSNSも通知もありませんから、邪魔されずに自分の時間を過ごすことができます。

また、紙の本は他にもメリットがあります。それは、「中古本で安く購入できる場合がある」ことと、「売れる」ということです。

電子書籍は購入方法によっては安く購入できることもあります。本の種類と場合によるかもしれませんが、中古本のほうが、安く手に入ることもあるでしょう。

また、電子書籍は売れませんが、紙の本は売れます。物理的に場所をとるというデメリットもありますが、そんなときは気分転換にブックオフに出かけて、売ってしまえばいいのです。

そこで売って得たお金でちょっと豪華なお昼ごはんを食べる、そんな過ごし方もいいと思います。

計画や準備をしっかりしていますか？仕事でも個人開発でも、ブログを書くということ１つとっても、計画をしっかりしているとスムーズに進めることができます。また、しっかり練られた計画で作業を進めると品質の高い成果物をアウトプットできます。

この記事では、計画や準備の重要性について紹介します。

1. 場当たり的な対応は必ず崩壊する

場当たり的に作業したものは、必ず悪い方向に進みます。

例えばアプリを開発することを例にして考えてみましょう。

アプリを開発するには、

1. コンセプトを決める
2. ターゲットとなるユーザー層を決める
3. どれだけのユーザー数を獲得するか、仮説を立てる
4. 画面デザインをする
5. データモデルやクラスを設計する
6. プログラミングをする
7. テストを行う
8. デプロイする
9. プロモーションを検討する
10. プロモーションを作成して公開する
11. 仮説が正しいか検証する

このように、最初から最後までを考える必要があります。コンセプトを決めたタイミングで、このようなプロモーションをしようというプランがあれば、より良いものが出来上がりますが、コンセプトの検討が十分でなければ、作業工程途中でブレてしまい、よくわからないアプリが出来上がってしまうこともあります。

プログラミング１つをとっても、計画が十分にできていないと、以下のような不具合が発生することが考えられます。

1. スパゲッティコードになり、メンテナンスが難しくなる
2. 似た機能のコードが複数存在することになる
3. コーディング効率が下がる

2. 計画・準備が8割

計画は全体の8割くらいで考えておいた方がいいでしょう。アプリを開発する場合は、すぐにプログラミングしたくなる気持ちを抑えて、コンセプトや設計に注力しましょう。

このアプリを作るにあたり、ターゲットとするユーザーは誰なのか、どんな画面デザインにするのか、データベースは何を使うのか、採用するフレームワークは？

考えることはたくさんありますので、しっかり考えましょう。

蛇足ですが、これはアプリ開発に限った話しではありません。

たとえば、スマホの回線契約をMNPで変更する場合は、以下のことを考える必要があります。

1. 現在契約している事業者からMNP転出番号を取得する方法は？すぐに発行してもらえるのか？

2. 解約金はかからないか？

3. 解約日までの料金の支払いはどうなるのか？日割り計算で請求？1か月分を支払って、後から返金？

4. 乗り換え先の契約に必要なものは？

これらの準備ができていないと、二度手間になったり、予想以上に時間がかかったりして、いいことは何一つありません。

しっかり計画や準備ができていると、スムーズに作業が進み、ゆっくりできる時間も増え、一石二鳥です。

3. 残り2割で作業

作業は全体の2割ほどで考えておくといいと思います。

考える時間と作業する時間を完全に切り離すことが重要です。プログラミングであれば、データモデルやクラス設計を十分に検討することが準備の時間、コードに書き起こすところが作業の時間です。

コードに書き起こすだけであれば、ながら作業で進めることができます。音楽を聞きながらだったり、Netflixで映画を見ながらでもできます。こうしておくと、楽しく作業できますよね。

すべてに当てはまることかもしれませんが、楽しくないと長続きできません。仕事を楽しくするためには、可能な限り単純化し、楽しいことと一緒に実行することが大事だと思います。

4. 人間は長い時間集中できない

人間は長い時間集中できません。30分も集中できれば素晴らしい分類に入ると思います。

そのため、ある程度集中したら、必ず休憩をとりましょう。良く知られている手法にポモドーロタイマーがありますが、これを活用してもいいと思います。

締め切りや何かに終われていれば、長い時間集中できることもありますが、大きな反動が自分に跳ね返ってきます。

ブログでもアプリ開発でも、大きなことを成し遂げようと思うと、短期集中型ではうまくいきません。5年や10年など長い期間かけて取り組む必要がありますので、無理なく続けられる習慣を身に着ける必要があります。

5. 常日頃から準備する

準備は歩きながらでも考えることができます。最近はスマホを持ち歩いていることが多いですので、歩きながら考えて、整理できたタイミングでメモ入力しておくのです。

後からそのメモを見返して、その通りに作業する、こうしておくと、単純化がしやすくなると思います。

PCに向かっている時間だけが仕事の時間ではありません。段取りや計画などは、資料を見ながらやることも多いと思いますが、煮詰まったらときは、歩きながら考えたほうがいいアイデアが浮かぶこともあります。

10分考えて良いアイデアが浮かばなければ、5分ほど散歩するといいと思います。コーヒーを買いに行くでもいいです。その方が気分転換になり、アイデアも浮かんできます。

そうやってしっかり練られた計画を、あとは実行するだけ、という状態になっていれば、作業がぐんぐん進んで、充実した1日を過ごせると思います。

日々努力していますか？私も今の仕事一辺倒の生活が嫌で、なんとか自力で収入を得たいと思っていますが、
ブログや個人開発を、今までなかなか続けることができませんでした。

なぜ続けられないか考え抜いた結果、以下の要因が考えられると思いましたので、ブログに残しておきたいと思います。

1. Todoアプリで管理しても続けられない理由

Todoアプリは一度は使ったことがあると思います。簡単なもので言えばiPhoneに標準でインストールされている「リマインダー」もありますし、GoogleやMicrosoftをはじめ、多くのToDoアプリが存在しています。

ToDoアプリにタスクを登録して、いざやるぞ！と意気込んでも、なかなか続けることは難しいと思います。

なぜ、続けられないのでしょうか？その原因は、タスクの量が大きすぎるからです。

いくらやる気があっても、その作業をこなそうとすると、疲れます。疲れは蓄積します。

かつ、今までやってきていませんので、余計に疲れます。

そのため、まず最初は、３分で終わらせることができるタスク量に細分化しましょう。

ブログであれば、「１章だけ書く」だったり、プログラミングであれば、「１画面分の構成だけ考える」などです。

この３分のタスク量を毎日休むことなく続けられれば、3日坊主は卒業です。

負荷が高すぎて疲れたので、明日は休もう・・・。では駄目です。

毎日休まず続けられるタスク量に細分化しましょう。

2. やることを宣言することの重要性

☀️今日のやること！☀️

** 20日目 **
✅筋トレ
✅1.QuickMemoアプリ開発
✅2.Daily Stackアプリを売り込むブログを1章書く

https://t.co/tK16pHOYqn #今日の積み上げ

— はる🐱 (@Harus0313) February 21, 2021

今日のやることを宣言することは重要です。Twitterでツイートするだけでも効果はあります。

やることを宣言すると、宣言した内容を友人やフォロワーが見ることになりますので、必ずレスポンスがあります。

「すごいね」「頑張ってるね」といったポジティブなレスポンスから、「本当にやってるの？」「やっても意味ねぇよ」などネガティブなものまで様々ありますが、ポジティブでもネガティブでもレスポンスがあると、続けていこうという気持ちが上がります。

やることを宣言して何もしていないと、顰蹙を買うことになりますので、どうしてもやり遂げようという気力が生まれます。

どうせ作業をするのは自分ひとりなのですが、やることを宣言するだけでこんなにもメリットがあります。

また、ハッシュタグ「#今日の積み上げ」は１時間に数千ツイートもされていますので、多くの人の目に見られることになります。また、いいねをしてくれる人も多いので、励みになることと思います。

今日一日のタスクを決めたら、ぜひ「#今日の積み上げ」をつけてツイートしてみてください。

3. DailyStackアプリ

DailyStackアプリは、ブラウザで稼働するToDoアプリです。アプリのインストールは不要で、面倒なアカウント登録もありません。

https://dailystack.usefuledge.com/　にアクセスするだけですぐに使うことができます。

DailyStackは、継続しやすくなるような機能を組み込んだToDoアプリです。どのような機能があるか、どうして継続しやすくなるのか、説明します。

4. ツイート機能がある

DailyStackアプリには、「ツイート」機能があります。

やること画面の上部に「ツイート」ボタンがありますので、これをタップすると、ハッシュタグ「#今日の積み上げ」をつけてTodoをツイートします。

Twitterでは文字制限がありますので、DailyStackアプリでは上位の３つのタスクをツイートします。

わざわざツイート本文を書く必要はありません。タップだけでOKです。

ハッシュタグ「#今日の積み上げ」がついているので、「いいね」をしてくれる人がたくさんいます。

また、ツイート本文の先頭に「xx日目」がつきます。これは、最初にDailyStackアプリを使い始めてからの経過日数が表示されます。

最初は1日目からスタートですが、続けていくと日数も増えていき、継続できていると実感できると思います。

5. 今までやってきたことをふり返ることができる

DailyStackアプリは、今までやってきたことを振り返ることができます。例えば、このアプリの開発はいつからはじめたっけ？とか、筋トレって何日続いてるんだろう？といった内容をすぐに調べることができます。

こうやって振り返ることができると、日々の積み上げがどれくらいか知ることで充実感を得ることができます。

6. ポモドーロタイマーで無理なく続けられる

ポモドーロタイマーは、25分おきに5分休み、３セット終わったら１５分の長い休憩をとる、集中して作業するための方法です。

集中しているとついつい時間が経つのを忘れてしまいますが、反動が大きいことがあります。

そのため、ポモドーロタイマーで無理なく続けることが重要です。

7. 無料＆アカウント登録不要

DailyStackはアカウント登録不要です。無料で使い続けることができます。また、アプリのインストールも不要ですので、https://dailystack.usefuledge.com/　にアクセスするだけですぐに使うことができます。

8. 無理なく毎日続けることが大事

大きなことを成し遂げるためには、長い期間をかけて努力することが重要です。数日や１ヵ月などでは、到底できることではありません。

長い期間をかけるためには、途中でバテない作業スケジュールが重要です。

ブログとか続けられない人は、日々の作業量をかなり小さくしたらいいと思います。

例えば、今日は構成を考えるだけ、とか、今日は1章だけ書く、などです。

牛歩のような進捗になりますが、毎日続けられれば気づけば山のように積み上がってるはずです。

休まず無理せず毎日続けることが大事です。

— はる🐱 (@Harus0313) February 20, 2021

長く続けるためには、作業計画をしっかり練る、ツイート機能でまわりを巻き込む、ポモドーロタイマーで休憩時間を確保する、これらが重要になります。

ぜひ、DailyStackを使ってみてください。

https://dailystack.usefuledge.com/

Blazor wasm は c#で書けるウェブアセンブリなアプリで、サーバーレスで稼働することができます。

この記事では、Blazor wasm で作成したウェブアプリをAWS S3 で公開する方法を紹介します。

1. S3 バケットを作成する

まずはS3バケットを作成しましょう。

作成のしかたはいつもと同じです。コマンドラインが好きな方はコマンドラインからでもいいですし、ウェブコンソールが好きな方は
ウェブコンソールから作成しましょう。

最終的にウェブホスティングを有効にしますので、パブリック・アクセスを許可しておく必要があります。

2. アクセス許可から、バケットポリシーを設定する

バケットの「アクセス許可」からバケットポリシーを選択します。

バケットポリシーを入力して、有効にします。

バケットポリシーは以下のように入力します。

1
2
3
4
5
6
7
8
9
10
11
12

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

3. ウェブホスティングを有効にする

ウェブホスティングを有効にします。

バケットのプロパティから「静的ウェブサイトホスティング」より、有効にします。

このとき、インデックスドキュメントとエラードキュメントの両方に「index.html」を入力することを忘れないようにしましょう。

3. Blazor wasm アプリを Publish する

Blazor wasm アプリを Publish して、デプロイするファイルを生成しましょう。

やり方は至ってかんたんで、プロジェクトディレクトリで以下のコマンドを実行するだけです。

1

> dotnet publish -c Release

以下のように、ファイルが生成されれば成功です。

1
2
3
4
5
6
7
8
9
10
11

haruo@Haruos-MBP dailystack % dotnet publish -c Release
Microsoft (R) Build Engine version 16.8.3+39993bd9d for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  All projects are up-to-date for restore.
  dailystack -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/dailystack.dll
  dailystack (Blazor output) -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/wwwroot
  Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
  Compressing Blazor WebAssembly publish artifacts. This may take a while...
  dailystack -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/publish/

4. S3 バケットにアップロードする

生成されたファイルをS3へアップロードしましょう。

アップロードする方法は何でもOKです。ウェブコンソールからアップロードしても構いませんし、AWS CLI がインストールされていれば、以下のコマンドからでもアップロードできます。

1

> aws s3 sync ローカルディレクトリ名 s3://バケット名 --delete

--deleteオプションは、ローカルディレクトリ側に存在せず、S3バケット側にのみ存在するファイルを削除する、という意味です。

5. URL にアクセスして動作確認する

S3のウェブホスティングURLにブラウザからアクセスしてみましょう。

この図のように、Blazorアプリが表示されれば成功です。

Blazor wasm は c#で書けるウェブアセンブリなアプリで、サーバーレスで稼働することができます。

この記事では、Blazor wasm で作成したウェブアプリをAWS S3 で公開する方法を紹介します。

1. S3 バケットを作成する

まずはS3バケットを作成しましょう。

作成のしかたはいつもと同じです。コマンドラインが好きな方はコマンドラインからでもいいですし、ウェブコンソールが好きな方は
ウェブコンソールから作成しましょう。

最終的にウェブホスティングを有効にしますので、パブリック・アクセスを許可しておく必要があります。

2. アクセス許可から、バケットポリシーを設定する

バケットの「アクセス許可」からバケットポリシーを選択します。

バケットポリシーを入力して、有効にします。

バケットポリシーは以下のように入力します。

1
2
3
4
5
6
7
8
9
10
11
12

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

3. ウェブホスティングを有効にする

ウェブホスティングを有効にします。

バケットのプロパティから「静的ウェブサイトホスティング」より、有効にします。

このとき、インデックスドキュメントとエラードキュメントの両方に「index.html」を入力することを忘れないようにしましょう。

3. Blazor wasm アプリを Publish する

Blazor wasm アプリを Publish して、デプロイするファイルを生成しましょう。

やり方は至ってかんたんで、プロジェクトディレクトリで以下のコマンドを実行するだけです。

1

> dotnet publish -c Release

以下のように、ファイルが生成されれば成功です。

1
2
3
4
5
6
7
8
9
10
11

haruo@Haruos-MBP dailystack % dotnet publish -c Release
Microsoft (R) Build Engine version 16.8.3+39993bd9d for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  All projects are up-to-date for restore.
  dailystack -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/dailystack.dll
  dailystack (Blazor output) -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/wwwroot
  Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
  Compressing Blazor WebAssembly publish artifacts. This may take a while...
  dailystack -> /Users/haruo/Documents/workspace/dailystack/bin/Release/net5.0/publish/

4. S3 バケットにアップロードする

生成されたファイルをS3へアップロードしましょう。

アップロードする方法は何でもOKです。ウェブコンソールからアップロードしても構いませんし、AWS CLI がインストールされていれば、以下のコマンドからでもアップロードできます。

1

> aws s3 sync ローカルディレクトリ名 s3://バケット名 --delete

--deleteオプションは、ローカルディレクトリ側に存在せず、S3バケット側にのみ存在するファイルを削除する、という意味です。

5. URL にアクセスして動作確認する

S3のウェブホスティングURLにブラウザからアクセスしてみましょう。

この図のように、Blazorアプリが表示されれば成功です。

ファイルを削除したいときもあれば、あとで復元させやすいようにするために、ゴミ箱に入れておきたいときもあります。

この記事では、c#でファイルを削除せずにゴミ箱に入れる方法を紹介します。

1. サンプルコード

サンプルコード全文は以下のとおりです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

using System;
using Microsoft.VisualBasic.FileIO;


namespace sendtorecycle
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
            SendToRecycleBin("test.txt");
        }

        static void SendToRecycleBin(string filepath)
        {
            FileSystem.DeleteFile(filepath, UIOption.OnlyErrorDialogs, RecycleOption.SendToRecycleBin);
        }
    }
}

このコードのポイントは、名前空間「Microsoft.VisualBasic.FileIO」にあるFileSystem.DeleteFileメソッドです。

2. メソッド説明

公式ドキュメントはこちらです。

https://docs.microsoft.com/en-us/dotnet/api/microsoft.visualbasic.fileio.filesystem.deletefile?view=net-5.0

DeleteFileメソッドは３つのパラメタを入力にします。

1

public static void DeleteFile (string file, Microsoft.VisualBasic.FileIO.UIOption showUI, Microsoft.VisualBasic.FileIO.RecycleOption recycle);

１つ目は、ゴミ箱に入れるファイルのパスです。上記のサンプルコードでは、カレントディレクトリにあるtest.txtを対象にしています。

２つ目は、ユーザーインタフェースの表示おオプションです。ここでは、エラーがあったときのみ表示するUIOption.OnlyErrorDialogsをセットしています。

３つ目は、ゴミ箱に入れるかどうかのオプションです。RecycleOption.SendToRecycleBinだと、ゴミ箱に入ります。ここをRecycleOption.DeletePermanentlyとすると、ゴミ箱に入らず、完全に削除されます。

3. 実行例

このように、カレントディレクトリに「test.txt」が存在するとします。

そして、dotnet runコマンドで実行します。

すると、以下のようにゴミ箱に入れば成功です。

ファイルを削除したいときもあれば、あとで復元させやすいようにするために、ゴミ箱に入れておきたいときもあります。

この記事では、c#でファイルを削除せずにゴミ箱に入れる方法を紹介します。

1. サンプルコード

サンプルコード全文は以下のとおりです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

using System;
using Microsoft.VisualBasic.FileIO;


namespace sendtorecycle
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
            SendToRecycleBin("test.txt");
        }

        static void SendToRecycleBin(string filepath)
        {
            FileSystem.DeleteFile(filepath, UIOption.OnlyErrorDialogs, RecycleOption.SendToRecycleBin);
        }
    }
}

このコードのポイントは、名前空間「Microsoft.VisualBasic.FileIO」にあるFileSystem.DeleteFileメソッドです。

2. メソッド説明

公式ドキュメントはこちらです。

https://docs.microsoft.com/en-us/dotnet/api/microsoft.visualbasic.fileio.filesystem.deletefile?view=net-5.0

DeleteFileメソッドは３つのパラメタを入力にします。

1

public static void DeleteFile (string file, Microsoft.VisualBasic.FileIO.UIOption showUI, Microsoft.VisualBasic.FileIO.RecycleOption recycle);

１つ目は、ゴミ箱に入れるファイルのパスです。上記のサンプルコードでは、カレントディレクトリにあるtest.txtを対象にしています。

２つ目は、ユーザーインタフェースの表示おオプションです。ここでは、エラーがあったときのみ表示するUIOption.OnlyErrorDialogsをセットしています。

３つ目は、ゴミ箱に入れるかどうかのオプションです。RecycleOption.SendToRecycleBinだと、ゴミ箱に入ります。ここをRecycleOption.DeletePermanentlyとすると、ゴミ箱に入らず、完全に削除されます。

3. 実行例

このように、カレントディレクトリに「test.txt」が存在するとします。

そして、dotnet runコマンドで実行します。

すると、以下のようにゴミ箱に入れば成功です。