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 技育展(オンライン)
   

   View Slide

2. スライドの撮影
   SNSへの投稿OK
   Speaker : @AtriaSoft
   

   View Slide

3. • Zoomのコメントに
   貼れたら貼ります
   • 僕のTwitterアカウントでも
   URLを公開しています
   • 僕のTwitter→@AtriaSoft
   Speaker : @AtriaSoft
   本日の発表資料
   

   View Slide

4. スライド枚数59枚(やばい)
   時間がないのでサクサク進みます
   Speaker : @AtriaSoft
   

   View Slide

5. Who am I ?
   @AtriaSoft
   http://atriasoft.work/
   Atria64
   • 畑 大地(a.k.a. Atria)
   • 公立はこだて未来大学B2
   – 北海道にある情報系大学！
   • 普段は.NET技術に
   触れています
   • C#がだいすきです
   Speaker : @AtriaSoft
   

   View Slide

6. 唐突ですが
   Speaker : @AtriaSoft
   

   View Slide

7. みなさん
   “ハッカー”に憧れませんか?
   Speaker : @AtriaSoft
   

   View Slide

8. “ハッカー”の共通点
   文字ばっかりな画面・コマンド入力
   Speaker : @AtriaSoft
   

   View Slide

9. 僕も”ハッカー”ぽくなりたい！
   Speaker : @AtriaSoft
   

   View Slide

10. 作った。
    

    View Slide

11. 作ったもの
    Speaker : @AtriaSoft
    

    View Slide

12. • PC/タブレット/スマートフォン
    でアクセス可能なデザイン
    • コマンドを打つことで情報に
    アクセスできる
    • なによりハッカーっぽい
    – かっこいい
    – 触っていて楽しい
    – 作っていて楽しい
    CUI風ポートフォリオ
    Speaker : @AtriaSoft
    

    View Slide

13. • PC/タブレット/スマートフォン
    でアクセス可能なデザイン
    • コマンドを打つことで情報に
    アクセスできる
    • なによりハッカーっぽい
    – かっこいい
    – 触っていて楽しい
    – 作っていて楽しい
    CUI風ポートフォリオ
    Speaker : @AtriaSoft
    

    View Slide

14. • PC/タブレット/スマートフォン
    でアクセス可能なデザイン
    • コマンドを打つことで情報に
    アクセスできる
    • なによりハッカーっぽい
    – かっこいい
    – 触っていて楽しい
    – 作っていて楽しい
    CUI風ポートフォリオ
    Speaker : @AtriaSoft
    

    View Slide

15. • 制作作品の絞り込み
    • 色変更
    • コンソールのクリア
    • コマンドのハイライト
    • ↑↓キーで過去の入力に
    アクセス
    • ほか色々な遊び心
    色々な機能
    Speaker : @AtriaSoft
    

    View Slide

16. • 制作作品の絞り込み
    • 色変更
    • コンソールのクリア
    • コマンドのハイライト
    • ↑↓キーで過去の入力に
    アクセス
    • ほか色々な遊び心
    色々な機能
    Speaker : @AtriaSoft
    

    View Slide

17. Worksコマンド(1)
    →そのまま入力ですべての作品を表示する
    コマンドの一部紹介[works]
    Speaker : @AtriaSoft
    

    View Slide

18. Worksコマンド(2)
    →works {言語名} で、その言語で作られた作品のみ抽出する
    コマンドの一部紹介[works]
    Speaker : @AtriaSoft
    

    View Slide

19. changecolor {target} {color}で
    コンソールの色変更も可能
    コマンドの一部紹介[changecolor]
    Speaker : @AtriaSoft
    

    View Slide

20. デモ
    https://atria64.github.io/CUIPortfolio/
    Speaker : @AtriaSoft
    

    View Slide

21. 技育(Geek)的な話
    Speaker : @AtriaSoft
    

    View Slide

22. 全体で使っている技術
    

    View Slide

23. 全体で使っている技術
    

    View Slide

24. CUI風ポートフォリオを作った
    C#/Blazorを用いた
    CUI風Webアプリの制作
    Speaker:@AtriaSoft
    2020/09/26 技育展(オンライン)
    

    View Slide

25. CUI風ポートフォリオを作った
    C#/Blazorを用いた
    CUI風Webアプリの制作
    Speaker:@AtriaSoft
    2020/09/26 技育展(オンライン)
    

    View Slide

26. Speaker : @AtriaSoft
    Blazorとは
    

    View Slide

27. Blazor
    Speaker : @AtriaSoft
    C# でSPA開発ができる今熱いフレームワーク！
    • オープンソースのフレームワーク
    • かなり新しい技術
    (Blazor WebAssemblyは今年5月正式リリース)
    • フロントエンド、バックエンドをC#で一貫して書ける
    • 豊富な.NET資産を使える(多くのライブラリやNuGet)
    

    View Slide

28. Blazor
    Speaker : @AtriaSoft
    C# でSPA開発ができる今熱いフレームワーク！
    • オープンソースのフレームワーク
    • かなり新しい技術
    (Blazor WebAssemblyは今年5月正式リリース)
    • フロントエンド、バックエンドをC#で一貫して書ける
    • 豊富な.NET資産を使える(多くのライブラリやNuGet)
    

    View Slide

29. Blazor
    Speaker : @AtriaSoft
    C# でSPA開発ができる今熱いフレームワーク！
    • オープンソースのフレームワーク
    • かなり新しい技術
    (Blazor WebAssemblyは今年5月正式リリース)
    • フロントエンド、バックエンドをC#で一貫して書ける
    • 豊富な.NET資産を使える(多くのライブラリやNuGet)
    

    View Slide

30. Blazor
    Speaker : @AtriaSoft
    C# でSPA開発ができる今熱いフレームワーク！
    • オープンソースのフレームワーク
    • かなり新しい技術
    (Blazor WebAssemblyは今年5月正式リリース)
    • フロントエンド、バックエンドをC#で一貫して書ける
    • 豊富な.NET資産を使える(多くのライブラリやNuGet)
    

    View Slide

31. Blazor
    Speaker : @AtriaSoft
    C# でSPA開発ができる今熱いフレームワーク！
    • オープンソースのフレームワーク
    • かなり新しい技術
    (Blazor WebAssemblyは今年5月正式リリース)
    • フロントエンド、バックエンドをC#で一貫して書ける
    • 豊富な.NET資産を使える(多くのライブラリやNuGet)
    

    View Slide

32. • オープンソースのフレームワーク
    • かなり新しい技術
    (Blazor WebAssemblyは今年5月正式リリース)
    • フロントエンド、バックエンドをC#で一貫して書ける
    • 豊富な.NET資産を使える(多くのライブラリやNuGet)
    Blazor
    Speaker : @AtriaSoft
    C# でSPA開発ができる今熱いフレームワーク！
    シングルページアプリケーション
    （Single Page Application）
    単一のWebページでアプリケーションを構成する設計構
    造の名称
    「なんかいい感じのやつ」と捉えておけばいいと思います
    

    View Slide

33. [特徴1] Blazorで用いる構文(Razor構文)
    • C#とhtml/cssの融合系
    • “@”を起点として
    C#コードを混ぜて記述できる
    • 条件分岐や
    繰り返しはお手のもの
    • ラムダ式だって使えちゃう
    • 慣れるとめちゃくちゃ便利
    Speaker : @AtriaSoft
    

    View Slide

34. [特徴1] Blazorで用いる構文(Razor構文)
    • C#とhtml/cssの融合系
    • “@”を起点として
    C#コードを混ぜて記述できる
    • 条件分岐や
    繰り返しはお手のもの
    • ラムダ式だって使えちゃう
    • 慣れるとめちゃくちゃ便利
    Speaker : @AtriaSoft
    

    View Slide

35. [特徴1] Blazorで用いる構文(Razor構文)
    • C#とhtml/cssの融合系
    • “@”を起点として
    C#コードを混ぜて記述できる
    • 条件分岐や
    繰り返しはお手のもの
    • ラムダ式だって使えちゃう
    • 慣れるとめちゃくちゃ便利
    Speaker : @AtriaSoft
    

    View Slide

36. [特徴2] JavaScriptをC#から呼び出せる
    • "JavaScript 相互運用"
    • C#からJSを呼べるため
    複雑な処理にも耐えうる
    • これによりp5.jsなどの
    JSライブラリを呼び出せる
    Invoke!
    Speaker : @AtriaSoft
    

    View Slide

37. [特徴2] JavaScriptをC#から呼び出せる
    • "JavaScript 相互運用"
    • C#からJSを呼べるため
    複雑な処理にも耐えうる
    • これによりp5.jsなどの
    JSライブラリを呼び出せる
    Invoke!
    Speaker : @AtriaSoft
    

    View Slide

38. [特徴2] JavaScriptをC#から呼び出せる
    • "JavaScript 相互運用"
    • C#からJSを呼べるため
    複雑な処理にも耐えうる
    • これによりp5.jsなどの
    JSライブラリを呼び出せる
    Invoke!
    Speaker : @AtriaSoft
    

    View Slide

39. [特徴3] C#でフルスタック開発できる
    • “基本的に”処理部分を
    すべてC#で実現できる
    • 言語が統一されているため
    開発が非常に楽
    • Microsoft Azure
    との相性が良い場合が多い
    YES!
    ALL C#!!
    Speaker : @AtriaSoft
    

    View Slide

40. [特徴3] C#でフルスタック開発できる
    • “基本的に”処理部分を
    すべてC#で実現できる
    • 言語が統一されているため
    開発が非常に楽
    • Microsoft Azure
    との相性が良い場合が多い
    YES!
    ALL C#!!
    Speaker : @AtriaSoft
    

    View Slide

41. [特徴3] C#でフルスタック開発できる
    • “基本的に”処理部分を
    すべてC#で実現できる
    • 言語が統一されているため
    開発が非常に楽
    • Microsoft Azure
    との相性が良い場合が多い
    YES!
    ALL C#!!
    Speaker : @AtriaSoft
    

    View Slide

42. 全体で使っている技術
    Speaker : @AtriaSoft
    

    View Slide

43. 全体で使っている技術
    Speaker : @AtriaSoft
    

    View Slide

44. GitHubの機能の1つ
    予め定義したビルド・テスト・デプロイなどを行える
    GitHub Actions
    Speaker : @AtriaSoft
    

    View Slide

45. 全体で使っている技術
    

    View Slide

46. 全体で使っている技術
    

    View Slide

47. GitHub Pages
    Speaker : @AtriaSoft
    • GitHubがユーザーに提供するホスティングサービス
    • 静的なウェブページをデプロイできる
    • なんと無料！(技術で遊びたい学生に優しい)
    

    View Slide

48. 快適な作業環境を作るために
    Speaker : @AtriaSoft
    

    View Slide

49. Issueの管理・運用
    Issue Templateを用いてIssueを爆速で立てる
    Speaker : @AtriaSoft
    

    View Slide

50. プロジェクト名/.github/ISSUE_TEMPLATE
    に配置することで使用できる
    Issue Template(1)
    Speaker : @AtriaSoft
    

    View Slide

51. Issueを立てるときにボタンから用途に合わせて
    テンプレートを選択できる
    Issue Template(2)
    Speaker : @AtriaSoft
    

    View Slide

52. Issueを立てるときに考えることを減らし
    開発に専念することができる
    Issue Template(3)
    Speaker : @AtriaSoft
    

    View Slide

53. GitHub Projectsを用いて進捗を管理する
    GitHub Projectsを導入し、快適な開発環境を作り出す
    Speaker : @AtriaSoft
    

    View Slide

54. GitHubの機能の1つ
    進捗管理を簡単化してくれる
    GitHub Projects(1)
    Speaker : @AtriaSoft
    

    View Slide

55. 自分が今やるべきことを可視化できる
    「次に何をすればよいのだろう」という迷いが消える
    GitHub Projects(2)
    Speaker : @AtriaSoft
    

    View Slide

56. いろいろなものを使った
    Speaker : @AtriaSoft
    Invoke!
    

    View Slide

57. たのしい
    Speaker : @AtriaSoft
    Invoke!
    

    View Slide

58. • ディレクトリ概念の追加
    – ls,cd,cat叩きたいよね
    • ジョーク機能の追加
    – slっていうLinuxコマンド作りたい
    • アニメーションの強化
    – 色々アニメーションさせて
    動かしたい！
    今後のCUI風ポートフォリオ
    Speaker : @AtriaSoft
    

    View Slide

59. CUI風ポートフォリオを作った
    C#/Blazorを用いた
    CUI風Webアプリの制作
    Speaker:@AtriaSoft
    2020/09/26 技育展(オンライン)
    

    View Slide