senslab.github.io

某研究室HPのソースコード。

Information for maintainers

記事の更新

webサイトの変更を行った場合は5minほど待ってください。

※変更が反映されるのに少し時間がかかります。もし変更されない場合はmoji先生に連絡をしてください。

※ Publicationの情報はGoogleスプレッドシートから動的に取得しているので、そちらを編集してください。

初回のみ

1. SENSLabリポジトリのOwnerの方から、こちらより、Ownerにしてもらいましょう。
2. Node.jsをインストールする
3. Gitをインストールする
4. GitHubのアカウント登録とSSH Keyの登録をする
5. Git Bashを開き、このリポジトリをCloneする
   git clone git@github.com:SENSlab/senslab.github.io.git

ルーティン

1. リモートリポジトリ(GitHub)と同期させて最新の状態にする
   git pull
2. Nodeパッケージに変更があればインストール
   npm install
3. 編集
   • 各ページのHtmlはsrc/app/xxxxx/xxxx.component.html
   • News, History, Researches, Membersの情報を格納しているJSONとリーフレットのPDFはsrc/dataの中
   • 各種写真はsrc/imagesの中
4. 仮のサーバーを立ち上げて変更内容を確認
   npm start -- -o(勝手にブラウザが開きます。確認後は<Ctrl> + cで終了)
5. 変更をステージ
   git add -A
6. コミット
   git commit -m "適当なコミットメッセージ"
7. 本番サーバーに変更を反映
   npm run deploy
8. 変更後のソースコードをリモートリポジトリ(GitHub)にアップロード
   git push origin develop

メンバー写真

メンバー写真は350*350pxのjpg形式です。

Information for developpers

Angular

開発には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

デザインは主にBootstrapを利用して作成しています。 また一部でMaterial Design for BootstrapのUIコンポーネントを使用しています。 これらはNode.jsのパッケージ管理システムnpmを通してインストールしています。

jQueryはファイル容量とレンダリング速度を重くする上、多用するとバグを埋め込みやすくなるため利用していません。 ボタンを押したときに処理などは大抵Angularの機能で実装できるので、できるだけそちらの方法を検討してください。