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

748cf16e1d5fdb508f9725cd91fe1768?s=47 Atria
September 26, 2020

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

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

748cf16e1d5fdb508f9725cd91fe1768?s=128

Atria

September 26, 2020
Tweet

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