Stack Overflow風サービスも手軽に作れる「Telescope Nova」を使ってみよう

2017/06/16

Jelena Jovanovic

33

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

ReactとMeteorを使ったモダンなフレームワーク「Telescope Nova」を使えば、自分好みにカスタマイズしたStack Overflow風のソーシャルサービスを手軽に作れます。

Telescope Novaは現在、Vulcan.jsにリブランド中です。この記事では掲載時のままTelescope Novaと表記しています。

Telescope Novaは、ソーシャルWebアプリを手早く作りたい人に最適なフレームワークで、Sacha Greifによる無料のオープンソースプロジェクトです。アプリのフロントエンドをReactライブラリー、バックエンドをMeteorフレームワークで開発しています。どちらも、現在もっとも普及している言語であるJavaScriptで書かれています。

私たちの会社ではMeteor.jsをバックエンド開発で使っていることもあり、Meteorアプリ開発で大人気のツール、Telescope Novaのカスタマイズを試さないなんて考えられませんでした。

この記事では、Telescope Novaのカスタムテーマを作成する方法を学んでいきます。まずは開発環境を整えましょう。

Node.js、npm、Meteor.jsのインストール

Novaをインストールする前に、あらかじめNode.jp、npm、Meteor.jsがインストールされている必要があります。まだであれば以下の手順で導入してください。

  1. Node.jsNPMをインストールする。もしWindows環境でインストールできない場合、Dave McFarlandによるNode.jsとNPMのWindowsへのインストール方法を参照。
  2. Meteor.jsをインストールする

Telescope Novaのインストール

ローカルホストにNovaを導入します。コマンドライン上で以下を入力します。

git clone https://github.com/TelescopeJS/Telescope.git

cd Telescope

npm install

meteor

http://localhost:3000/を表示するとアプリが実行されていることが分かります。

Novaのインストールは開発元のGitHubでさらに詳しく解説でされています。

独自のテーマパッケージを作成

アプリを起動して、以下の手順で外観をカスタマイズします。

  1. Telescope>packagesフォルダー開き、my-custom-packageフォルダを探す
  2. my-custom-packageフォルダをコピー&ペーストして、ファイル名を変更する。ここでは、custom-themeとする。以上で独自のパッケージが完成となる
  3. custom-themeパッケージ内のpackage.jsファイルをエディタで開き、パッケージ名name: “my-custom-package”を変更する。今回はcustom-themeとする
  4. ターミナルでTelescopeフォルダーに移動してmeteor add custom-themeと入力し、アプリに新しいパッケージを適用する
  5. コマンドmeteorを入力しアプリを開始する
  6. 最後に、http://localhost:3000を開き、ロゴの周りに星の絵文字が表示され、外観の変更を確認する。

Telescope Nova theme with star-shaped emojis around logo

コンポーネントのカスタマイズ

コンポーネントをカスタマイズする前に、以下を確認します。

  • 変更を加えたいコンポーネントの多くはpackages>nova-base-componentsフォルダーに入っている
  • 元のファイルを絶対に編集しないこと!  カスタムファイルのみを編集する
  • classではなく、classNameを使うことを忘れずに
  • <img src="/" alt=""></img>をはじめ、終了タグを必ず記述する

画面右側のアバター(人を示す絵柄)を取り除きます。該当する箇所の特定にはブラウザーのデベロッパーツールにあるinspect elementが便利です。対象のclassがすぐに見つかるはずです。

Examining your Telescope Nova theme for customization

以下の手順で進めます。

  1. ファイルパス:nova-base-components>lib>posts>PostsCommenters.jsxでPostsCommentersコンポーネントを開き、中身をすべてコピーする
  2. パッケージ内に、新規ファイル「CustomPostsCommenters.jsx」を作成する。ファイルパスはcustom-theme>lib>components>CustomPostsCommenters.jsxとなる
  3. その中に、コピーしたPostsCommenters.jsxの中身を貼り付ける

元のコードは以下の通りでした。

import Telescope from 'meteor/nova:lib';
import React from 'react';
import { Link } from 'react-router';
import Posts from "meteor/nova:posts";

const PostsCommenters = ({post}) => {
  return (
    <div className="posts-commenters">
      <div className="posts-commenters-avatars">
        {_.take(post.commentersArray, 4).map(user =>
          <Telescope.components.UsersAvatar key={user._id} user= {user}/>)}
      </div>
      <div className="posts-commenters-discuss">
        <Link to={Posts.getPageUrl(post)}>
          <Telescope.components.Icon name="comment" />
          <span className="posts-commenters-comments-count">{post.commentCount}</span>
          <span className="sr-only">Comments</span>
        </Link>
      </div>
    </div>
  )
}

PostsCommenters.displayName = "PostsCommenters";

module.exports = PostsCommenters;
export default PostsCommenters;

アバターを取り除くには、カスタムファイルから(元のファイルからではない)該当部分のコードを削除します。

<div className="posts-commenters-avatars">
  {_.take(post.commentersArray, 4).map(user =>
  <Telescope.components.UsersAvatar key={user._id} user={user}/>)}
</div>

元のファイルをカスタムファイルと入れ替えます。
コードの中から、以下を探します。

const PostsCommenters = ({post}) => {
  return (
    <div className="posts-commenters">
    // more code here
    </div>
  )
}

PostsCommenters.displayName = "PostsCommenters";

module.exports = PostsCommenters;
export default PostsCommenters;

以下のように変更します。

const CustomPostsCommenters = ({post}) => {
  return (
    <div className="posts-commenters">
    // more code here
    </div>
  )
}

export default CustomPostsCommenters;

大切なのは、カスタムしたファイルやコンポーネントには名前の先頭にCustomを付けることです。残りは元のファイル名のままにします。

仕上げは、custom-theme>lib>components.jsにあるファイルcomponents.jsに、数行コードを加えます。

import CustomPostsCommenters from "./components/CustomPostsCommenters.jsx";

Telescope.components.PostsCommenters = CustomPostsCommenters;

変更するコンポーネントに対して、上記と同じ手順を繰り返します。手元のcomponents.jsファイルは以下のようになるはずです。

Component js file inside Telescope Nova theme

以上でアバターが画面に表示されなくなります。テーマの外観はこうなります。

Result of customization of Telescope Nova theme

CSSのカスタマイズ

Telescope Novaのテーマ構成だけではなく、スタイルシートを変更することで見た目をカスタマイズできます。

カスタマイズの方法を解説します。

パッケージにあるファイル「custom.scss」に独自のスタイルを記述します。ファイルパスはcustom-theme>lib>stylesheets>custom.scssです。

もしSassよりもCSSのほうが慣れているならば、新規ファイル「custom.css」を作ります。

試しにファイルの中身を変更します。

a {
  color:red;
}

custom.cssファイルを保存し、custom-theme>lib>package.jsにあるpackage.jsファイルを開きます。

以下のコードを探します。

api.addFiles([
  'lib/stylesheets/custom.scss'
], ['client']);

作成した新しいファイルへ以下のパスを加えます。

api.addFiles([
  'lib/stylesheets/custom.scss',
  'lib/stylesheets/custom.css'
], ['client']);

ここで保存して、アプリをリロードします。リンクの色が赤に変わりました。

Customized red links on Telescope Nova theme

私たちのTelescope Novaテーマのライブバージョンもぜひチェックしてください。

もっと詳しく知るために

Telescopeのカスタムテーマ制作をさらに詳しく知るには、以下のサイトを参考にしてください。

さあ、次はあなたの番です。オリジナル作品を制作してください。

(原文:Quick Tip: How to Build Your Custom Theme for Telescope Nova

[翻訳:西尾 健史/編集:Livit

Copyright © 2017, Jelena Jovanovic All Rights Reserved.

Jelena Jovanovic

Jelena Jovanovic

Vanila.ioの共同創始者で、Web開発者です。TwitterとInstagramで最新情報を配信しています。

Loading...