CUI風ポートフォリオを作った/I made a CUI-style portfolio.

2020/09/29(土) サポーターズ主催テックカンファレンス "技育展" 無駄開発部門 発表資料
技育展公式HP -> https://talent.supporterz.jp/geekten/2020/
作ったポートフォリオ -> https://atria64.github.io/CUIPortfolio/

Transcript

1. CUI風ポートフォリオを作った C#/Blazorを用いた CUI風Webアプリの制作 Speaker:@AtriaSoft 2020/09/26 技育展(オンライン)
2. スライドの撮影 SNSへの投稿OK Speaker : @AtriaSoft
3. • Zoomのコメントに 貼れたら貼ります • 僕のTwitterアカウントでも URLを公開しています • 僕のTwitter→@AtriaSoft Speaker : @AtriaSoft 本日の発表資料
4. スライド枚数59枚(やばい) 時間がないのでサクサク進みます Speaker : @AtriaSoft
5. Who am I ? @AtriaSoft http://atriasoft.work/ Atria64 • 畑 大地(a.k.a. Atria) • 公立はこだて未来大学B2 – 北海道にある情報系大学！ • 普段は.NET技術に 触れています • C#がだいすきです Speaker : @AtriaSoft
6. 唐突ですが Speaker : @AtriaSoft
7. みなさん “ハッカー”に憧れませんか? Speaker : @AtriaSoft
8. “ハッカー”の共通点 文字ばっかりな画面・コマンド入力 Speaker : @AtriaSoft
9. 僕も”ハッカー”ぽくなりたい！ Speaker : @AtriaSoft
10. 作った。
11. 作ったもの Speaker : @AtriaSoft
12. • PC/タブレット/スマートフォン でアクセス可能なデザイン • コマンドを打つことで情報に アクセスできる • なによりハッカーっぽい – かっこいい – 触っていて楽しい – 作っていて楽しい CUI風ポートフォリオ Speaker : @AtriaSoft
13. • PC/タブレット/スマートフォン でアクセス可能なデザイン • コマンドを打つことで情報に アクセスできる • なによりハッカーっぽい – かっこいい – 触っていて楽しい – 作っていて楽しい CUI風ポートフォリオ Speaker : @AtriaSoft
14. • PC/タブレット/スマートフォン でアクセス可能なデザイン • コマンドを打つことで情報に アクセスできる • なによりハッカーっぽい – かっこいい – 触っていて楽しい – 作っていて楽しい CUI風ポートフォリオ Speaker : @AtriaSoft
15. • 制作作品の絞り込み • 色変更 • コンソールのクリア • コマンドのハイライト • ↑↓キーで過去の入力に アクセス • ほか色々な遊び心 色々な機能 Speaker : @AtriaSoft
16. • 制作作品の絞り込み • 色変更 • コンソールのクリア • コマンドのハイライト • ↑↓キーで過去の入力に アクセス • ほか色々な遊び心 色々な機能 Speaker : @AtriaSoft
17. Worksコマンド(1) →そのまま入力ですべての作品を表示する コマンドの一部紹介[works] Speaker : @AtriaSoft
18. Worksコマンド(2) →works {言語名} で、その言語で作られた作品のみ抽出する コマンドの一部紹介[works] Speaker : @AtriaSoft
19. changecolor {target} {color}で コンソールの色変更も可能 コマンドの一部紹介[changecolor] Speaker : @AtriaSoft
20. デモ https://atria64.github.io/CUIPortfolio/ Speaker : @AtriaSoft
21. 技育(Geek)的な話 Speaker : @AtriaSoft
22. 全体で使っている技術
23. 全体で使っている技術
24. CUI風ポートフォリオを作った C#/Blazorを用いた CUI風Webアプリの制作 Speaker:@AtriaSoft 2020/09/26 技育展(オンライン)
25. CUI風ポートフォリオを作った C#/Blazorを用いた CUI風Webアプリの制作 Speaker:@AtriaSoft 2020/09/26 技育展(オンライン)
26. Speaker : @AtriaSoft Blazorとは
27. Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 (Blazor WebAssemblyは今年5月正式リリース) • フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NET資産を使える(多くのライブラリやNuGet)
28. Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 (Blazor WebAssemblyは今年5月正式リリース) • フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NET資産を使える(多くのライブラリやNuGet)
29. Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 (Blazor WebAssemblyは今年5月正式リリース) • フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NET資産を使える(多くのライブラリやNuGet)
30. Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 (Blazor WebAssemblyは今年5月正式リリース) • フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NET資産を使える(多くのライブラリやNuGet)
31. Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 (Blazor WebAssemblyは今年5月正式リリース) • フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NET資産を使える(多くのライブラリやNuGet)
32. • オープンソースのフレームワーク • かなり新しい技術 (Blazor WebAssemblyは今年5月正式リリース) • フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NET資産を使える(多くのライブラリやNuGet) Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ シングルページアプリケーション （Single Page Application） 単一のWebページでアプリケーションを構成する設計構 造の名称 「なんかいい感じのやつ」と捉えておけばいいと思います
33. [特徴1] Blazorで用いる構文(Razor構文) • C#とhtml/cssの融合系 • “@”を起点として C#コードを混ぜて記述できる • 条件分岐や 繰り返しはお手のもの • ラムダ式だって使えちゃう • 慣れるとめちゃくちゃ便利 Speaker : @AtriaSoft
34. [特徴1] Blazorで用いる構文(Razor構文) • C#とhtml/cssの融合系 • “@”を起点として C#コードを混ぜて記述できる • 条件分岐や 繰り返しはお手のもの • ラムダ式だって使えちゃう • 慣れるとめちゃくちゃ便利 Speaker : @AtriaSoft
35. [特徴1] Blazorで用いる構文(Razor構文) • C#とhtml/cssの融合系 • “@”を起点として C#コードを混ぜて記述できる • 条件分岐や 繰り返しはお手のもの • ラムダ式だって使えちゃう • 慣れるとめちゃくちゃ便利 Speaker : @AtriaSoft
36. [特徴2] JavaScriptをC#から呼び出せる • "JavaScript 相互運用" • C#からJSを呼べるため 複雑な処理にも耐えうる • これによりp5.jsなどの JSライブラリを呼び出せる Invoke! Speaker : @AtriaSoft
37. [特徴2] JavaScriptをC#から呼び出せる • "JavaScript 相互運用" • C#からJSを呼べるため 複雑な処理にも耐えうる • これによりp5.jsなどの JSライブラリを呼び出せる Invoke! Speaker : @AtriaSoft
38. [特徴2] JavaScriptをC#から呼び出せる • "JavaScript 相互運用" • C#からJSを呼べるため 複雑な処理にも耐えうる • これによりp5.jsなどの JSライブラリを呼び出せる Invoke! Speaker : @AtriaSoft
39. [特徴3] C#でフルスタック開発できる • “基本的に”処理部分を すべてC#で実現できる • 言語が統一されているため 開発が非常に楽 • Microsoft Azure との相性が良い場合が多い YES! ALL C#!! Speaker : @AtriaSoft
40. [特徴3] C#でフルスタック開発できる • “基本的に”処理部分を すべてC#で実現できる • 言語が統一されているため 開発が非常に楽 • Microsoft Azure との相性が良い場合が多い YES! ALL C#!! Speaker : @AtriaSoft
41. [特徴3] C#でフルスタック開発できる • “基本的に”処理部分を すべてC#で実現できる • 言語が統一されているため 開発が非常に楽 • Microsoft Azure との相性が良い場合が多い YES! ALL C#!! Speaker : @AtriaSoft
42. 全体で使っている技術 Speaker : @AtriaSoft
43. 全体で使っている技術 Speaker : @AtriaSoft
44. GitHubの機能の1つ 予め定義したビルド・テスト・デプロイなどを行える GitHub Actions Speaker : @AtriaSoft
45. 全体で使っている技術
46. 全体で使っている技術
47. GitHub Pages Speaker : @AtriaSoft • GitHubがユーザーに提供するホスティングサービス • 静的なウェブページをデプロイできる • なんと無料！(技術で遊びたい学生に優しい)
48. 快適な作業環境を作るために Speaker : @AtriaSoft
49. Issueの管理・運用 Issue Templateを用いてIssueを爆速で立てる Speaker : @AtriaSoft
50. プロジェクト名/.github/ISSUE_TEMPLATE に配置することで使用できる Issue Template(1) Speaker : @AtriaSoft
51. Issueを立てるときにボタンから用途に合わせて テンプレートを選択できる Issue Template(2) Speaker : @AtriaSoft
52. Issueを立てるときに考えることを減らし 開発に専念することができる Issue Template(3) Speaker : @AtriaSoft
53. GitHub Projectsを用いて進捗を管理する GitHub Projectsを導入し、快適な開発環境を作り出す Speaker : @AtriaSoft
54. GitHubの機能の1つ 進捗管理を簡単化してくれる GitHub Projects(1) Speaker : @AtriaSoft
55. 自分が今やるべきことを可視化できる 「次に何をすればよいのだろう」という迷いが消える GitHub Projects(2) Speaker : @AtriaSoft
56. いろいろなものを使った Speaker : @AtriaSoft Invoke!
57. たのしい Speaker : @AtriaSoft Invoke!
58. • ディレクトリ概念の追加 – ls,cd,cat叩きたいよね • ジョーク機能の追加 – slっていうLinuxコマンド作りたい • アニメーションの強化 – 色々アニメーションさせて 動かしたい！ 今後のCUI風ポートフォリオ Speaker : @AtriaSoft
59. CUI風ポートフォリオを作った C#/Blazorを用いた CUI風Webアプリの制作 Speaker:@AtriaSoft 2020/09/26 技育展(オンライン)