Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

Atria

September 26, 2020
Tweet

More Decks by Atria

Other Decks in Programming

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