Skip to content

SENSlab/senslab.github.io

Repository files navigation

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は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の機能で実装できるので、できるだけそちらの方法を検討してください。