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

サイトをつくってみた

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for matumoto matumoto
April 21, 2021
Technology
0
31

 サイトをつくってみた

2021/4月に行われた新入生歓迎LTの発表資料です

Avatar for matumoto

matumoto

April 21, 2021
Tweet

More Decks by matumoto

See All by matumoto
testingを眺める
Avatar for matumoto matumoto
1
180
sync/v2 プロポーザルの 背景と sync.Pool について
Avatar for matumoto matumoto
0
620
Goトランザクション処理
Avatar for matumoto matumoto
1
65
いまいちどスライスの 挙動を見直してみる
Avatar for matumoto matumoto
0
380
Go1.22のリリース予定の機能を見る
Avatar for matumoto matumoto
0
74
GoのUnderlying typeについて
Avatar for matumoto matumoto
0
210
Typed-nilについて
Avatar for matumoto matumoto
0
350
GoのType Setsという概念
Avatar for matumoto matumoto
0
38
GoのRateLimit処理の実装
Avatar for matumoto matumoto
0
450

Other Decks in Technology

See All in Technology
私たち準委任PdEは2つのプロダクトに挑戦する ～ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践～ / 20260212 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
110
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
460
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
Avatar for Masahiro Yoshizawa muziyoshiz
1
2k
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
1
160
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
450
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
160
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
510
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
590
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.6k
Context Engineeringが企業で不可欠になる理由
Avatar for Hirosato Gamo hirosatogamo
PRO
3
630
AIエージェントを開発しよう！-AgentCore活用の勘所-
Avatar for YukiOgawa yukiogawa
0
180
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
300

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
100
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
220
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
660
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.3M
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k

Transcript

  1. s1280136 松本響輝

  2. ・人物紹介 ・作ったサイトの紹介 ・全体像 ・作った手順の説明

  3. 拓実 よろしくたのむよ

  4. いいんじゃな いかな

  5. おーすごい

  6. よくできているな

  7. HTMLファイル

  8. None

  9. ・必要な分ページを作る 例: `/` → `/aiueo` ・マークダウンファイルを読み込んで表示する aaa.mdとかbbb.mdを読み込む ・マークダウンファイルから他のファイルを読み込む ライブラリを紹介するのでc++のファイルを乗っけたかった ・いい感じなデザインにする

  10. ・2020の年末に行ったZli の開発合宿で vueに触れたので使ってみようと思った 1. npm (パッケージ管理ツール)をインストールする 2. npmでその他色々をインストールする Vue.js（ヴュー・ジェイエス）またはVueは、Webアプリケーション におけるユーザーインターフェイスを構築するための、オープンソー

    スのJavaScriptフレームワークである。他のJavaScriptライブラリを 使用するプロジェクトへの導入において、容易になるように設計され ている。 なんでVueを使おうと 思ったんだい？

  11. ワイヤーフレームと呼ばれる雛形が すでに用意されている 誰でもすぐ簡単にホームページ が作れそうだね

  12. マークダウンを一つのファイルか らURLに応じて呼び出せない 理想 /power /combination

  13. None

  14. ページの遷移 vue-routerを作る 内部でvue-routerが作られてる vuetify 使える 使える 初期設定 routerの設定とかが多い 自動的に設定されている サイトの生成

    npm run buildでできる npm run generateでできる

  15. ・必要な分のページも作れた！ pages/hoge.vue /hoge -> hoge.vueが表示される！ ・URLに対応してマークダウンファイルも呼び出せそう！ pages/_id.vue /aiueo -> _id.vueの中で`aiueo`っていうURLが使える

    aiueo.mdを呼び出せばいい あとはC++ファイルを呼び出せば・・・

  16. URLに応じてマークダウンファイルを読 み込めない 読み込むのにwebpackのraw-loaderというのを使っていた

  17. 3.import文では変数を使えなくてさようなら… 2. import文ではシングルクオートかダブルクオートしか使えない 1. raw-loaderではimport文を使う必要がある

  18. None

  19. /contentディレクトリに書き込むことで以下の形式のファイルを取得できる ・Markdown ・JSON ・YAML ・XML ・CSV _slug.vue 右のようなコードでマークダウンファイルを 呼び出せる→ あとはc++ファイルを呼び出せば…

  20. 豊富な拡張機能！ remark-◦◦をnpm install するとmarkdownで色んな拡張機能が使える！ 今回はremark-code-import-replaceというのを使いました。 素晴らしい！

  21. HTMLファイル $ npm run generate HTMLを生成するコマンド (/dist/にHTMLファイルなどが自動で作られる)

  22. HTMLファイル 1.GitHubでリポジトリを作っておく 2.push-dirをインストールする 3.push-dirの設定をする 4.コマンド一つで公開!

  23. 1.GitHubでリポジトリを作っておく GitHubに登録して を押してリポジトリを作る

  24. 1.GitHubでリポジトリを作っておく cloneする 作業中… addして commitして pushする pullする

  25. 2.push-dirをインストールする $ npm install push-dir push-dirをインストールするコマンド こんな簡単にできるのか

  26. 3.push-dirの設定をする ・ベースパスの設定をする 「/」→「/リポジトリ名/」 ・アセット(アイコンの画像とか)のパスの設定をする GitHub PagesではURLが「ユーザ名.github.io/リポジトリ名/」となる。 「ユーザ名.github.io/」がNuxt.jsでの「/」に対応しているので、Nuxt.jsの設定を「/リポジトリ名」 にする必要がある。

  27. 4.コマンド一つで公開! $ push-dir --dir=dist --branch=gh-pages Github Pagesにページをのっける --dir=dist さっきnpm run

    generateで作ったdistディレクトリをGitHub Pagesにのっける --branch=gh-pages ブランチをgh-pagesという名前で作成する (ブランチは複数あるセーブデータの内の一つみたいなもの) ↓公式ドキュメント https://github.com/L33T-KR3W/push-dir

  28. HTMLファイル 1.Nuxtとかの環境を整える 2.開発する 3.HTMLファイルを生成する 4.GitHub Pagesにのっける

  29. 君もホームページを作ってみないか？