某研究室HPのソースコード。
webサイトの変更を行った場合は5minほど待ってください。
※変更が反映されるのに少し時間がかかります。もし変更されない場合はmoji先生に連絡をしてください。
※ Publicationの情報はGoogleスプレッドシートから動的に取得しているので、そちらを編集してください。
- SENSLabリポジトリのOwnerの方から、こちらより、Ownerにしてもらいましょう。
- Node.jsをインストールする
- Gitをインストールする
- GitHubのアカウント登録とSSH Keyの登録をする
- Git Bashを開き、このリポジトリをCloneする
git clone git@github.com:SENSlab/senslab.github.io.git
- リモートリポジトリ(GitHub)と同期させて最新の状態にする
git pull - Nodeパッケージに変更があればインストール
npm install - 編集
- 各ページのHtmlは
src/app/xxxxx/xxxx.component.html - News, History, Researches, Membersの情報を格納しているJSONとリーフレットのPDFは
src/dataの中 - 各種写真は
src/imagesの中
- 各ページのHtmlは
- 仮のサーバーを立ち上げて変更内容を確認
npm start -- -o(勝手にブラウザが開きます。確認後は<Ctrl> + cで終了) - 変更をステージ
git add -A - コミット
git commit -m "適当なコミットメッセージ" - 本番サーバーに変更を反映
npm run deploy - 変更後のソースコードをリモートリポジトリ(GitHub)にアップロード
git push origin develop
メンバー写真は350*350pxのjpg形式です。
開発にはAngular（オープンソースのフロントエンドWebフレームワーク）を利用しています。
AngularはTypeScriptをデフォルトのプログラム言語とし、Node.jsを実行環境とするフレームワークです。
大幅な改修をする際は、最初にNode.jsの基本的な使い方の勉強と、Angularのチュートリアルを試すことをおすすめします。
- Angular公式チュートリアル(Tour of Heroes)
- coursetroのAngularチュートリアル
- こちらの方が簡潔にまとまっている気がする
AngularはGoogleを中心とする開発コミュニティが開発を進めているフレームワークで、2018年現在6ヶ月ごとのmajor releaseが企画されています。 このリポジトリではAngularの非常に基本的な機能しか使っていないため、神経質にAngularのバージョンを更新する必要はありません。 ただ、Angularには簡単にバージョン移行をするためのツールが用意されていますので、できるだけ最新の状態に保つようにご協力ください。
Tips
Angularは以前、AngularJSという名前でJavaScriptをデフォルトの言語として開発が行われていました。 その後version 2をリリースするタイミングでAngularという名前に変わり、言語をTypeScriptに切り替えるなど大幅な変更が加わりました。 ネットで記事を検索する際、AngularJSと題された記事は古いものであることに留意してください。
デザインは主にBootstrapを利用して作成しています。
また一部でMaterial Design for BootstrapのUIコンポーネントを使用しています。
これらはNode.jsのパッケージ管理システムnpmを通してインストールしています。
jQueryはファイル容量とレンダリング速度を重くする上、多用するとバグを埋め込みやすくなるため利用していません。 ボタンを押したときに処理などは大抵Angularの機能で実装できるので、できるだけそちらの方法を検討してください。