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

サイトをつくってみた

Avatar for matumoto matumoto
April 21, 2021
Technology
0
27

 サイトをつくってみた

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

matumoto

April 21, 2021
Tweet

More Decks by matumoto

See All by matumoto
sync/v2 プロポーザルの 背景と sync.Pool について
Avatar for matumoto matumoto
0
52
Goトランザクション処理
Avatar for matumoto matumoto
0
35
いまいちどスライスの 挙動を見直してみる
Avatar for matumoto matumoto
0
320
Go1.22のリリース予定の機能を見る
Avatar for matumoto matumoto
0
61
GoのUnderlying typeについて
Avatar for matumoto matumoto
0
180
Typed-nilについて
Avatar for matumoto matumoto
0
280
GoのType Setsという概念
Avatar for matumoto matumoto
0
23
GoのRateLimit処理の実装
Avatar for matumoto matumoto
0
320
Webプッシュ通知触ってみた
Avatar for matumoto matumoto
0
31

Other Decks in Technology

See All in Technology
ゆるSRE #11 LT
Avatar for Kaoru okaru
1
640
白金鉱業Meetup_Vol.19_PoCはデモで語れ！顧客の本音とインサイトを引き出すソリューション構築​
Avatar for BrainPad brainpadpr
2
390
vLLM meetup Tokyo
Avatar for jpishikawa jpishikawa
1
240
Model Mondays S2E01: Advanced Reasoning
Avatar for Nitya Narasimhan, PhD nitya
0
360
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
Avatar for Sansan R&D sansan_randd
1
340
What's new in OpenShift 4.19
Avatar for Red Hat Livestreaming redhatlivestreaming
1
250
脅威をモデリングしてMCPのセキュリティ対策を考えよう
Avatar for GMO Flatt Security flatt_security
4
1.7k
菸酒生在 LINE Taiwan 的後端雙刀流
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
210
「どこにある？」の解決。生成AI(RAG)で効率化するガバメントクラウド運用
Avatar for Toru_Kubota toru_kubota
2
430
堅牢な認証基盤の実現 TypeScriptで代数的データ型を活用する
Avatar for KAKEHASHI kakehashi
PRO
2
230
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
Avatar for Kosuke ENOMOTO coosuke
PRO
1
270
讓測試不再 BB！ 從 BDD 到 CI/CD， 不靠人力也能 MVP
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
220

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Navigating Team Friction
Avatar for Lara Hogan lara
186
15k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
50
8.4k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.9k

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. 君もホームページを作ってみないか？