More than 5 years have passed since last update.

jThird Editorの使い方

Last updated at 2015-03-08Posted at 2015-01-09

#jThirdは作品の引用とWeb3Dでの投稿が可能なプラットフォームです。

「作ったWeb3D作品を投稿するプラットフォームが欲しい」という声から生まれたのがWeb3D投稿・視聴サービス『jThird』です。
全ての機能を無料で使うことが出来ます。

この記事では登録が完了したユーザーのために専用開発ツールであるjThird Editorの使い方を解説します。

##開発に必要な環境

IE以外のWebGL対応PCブラウザを使ってください。
本来はIE11もWebGLに対応しているのですがファイルのドラッグアンドドロップに対応できなかったので当面サポート対象外です。

視聴ページ自体はAndroidやiOS8のスマホ・タブレットでも動作します。

##新規にプロジェクトを作成する

初めてログインすると以下のように真っ白な画面が登場します。

中央上部のプラスボタンで入力フォームが現れます。
ブラウザによってデザインは異なりますが機能は同じです。

4~20文字の半角英数またはアンダースコアを使って作品のIDを入力してください。
「/works/」直下のディレクトリ名になります。
作品のタイトルとは関係ありません。

正しく入力すると全ての機能が有効になり以下の2か所にIDが反映されるはずです。

##画面の見方

1画面だけで開発から公開まで全ての作業を行うことが出来ます。
プロジェクトの流れに沿って左から右に各機能が配置されています。

全体で5つのブロックに分かれており画像の番号付近にあるボタンをクリックすることで展開が可能です。
おおまかな役割は以下の通り。

① ファイルのアップロード
② コードエディタ
③ jThreeのスニペット集
④ 公開設定
⑤ 作品の完成プレビュー

##ファイルのアップロード

1アカウントにつきコードも含め合計200MBまで好きなデータを保存できます。
(PHPファイルや.htaccessはアップロードできません。)
作品URLのルート以下に3つのディレクトリがありそれぞれに異なった役割があります。
/assets/と/works/ディレクトリ合わせて100MBまで、/share/ディレクトリ単体で100MBまでアップロードできます。

/
┣ assets/
┣ works/
┗ share/

<img src="/assets/img/hoge.png" />のようにルートからの絶対パスで指定するといいでしょう。
全てのデータはブラウザからの直接アクセスや他サイトからの直リンクが出来ない設定になっています。
（ただし、jThirdの公開ページからダウンロードされてしまう可能性があることに留意してください。）

###assetsディレクトリ
各ユーザー専用で自由にディレクトリを作成しファイルを保存できます。

###worksディレクトリ
新規でプロジェクトを作成するたびに作品IDを名前にした子ディレクトリが自動生成されます。
作品IDディレクトリ以下には隠しファイルとして「index.html」「index.css」「index.js」「index.goml」が存在しコードエディタでのみ編集が可能です。

ディレクトリの作成やファイルのアップロードは作品IDディレクトリ以下で自由に行えます。
プロジェクトを削除すると対応する子ディレクトリも消去されます。

###shareディレクトリ
jThirdユーザー全員でファイルの共有が可能なディレクトリです。
自分のユーザーIDの子ディレクトリ内は自由に変更できます。
全てのユーザーにリンクを使ってもらうことが可能で自身も他のユーザーのディレクトリをコードから参照できます。

(現在公開されているjThreev2.1.0ではtxrタグから/share/以下への参照が出来ません。mmdタグなどは動作します。次のバージョンで修正する予定です。)

① クリックで開閉し右側にディレクトリ内の詳細を表示できます。

② クリックした場所のパス。ルートからの絶対パスなのでそのままコピペしてコード内で使えます。パスを入力して簡易な探索もできます。

③ ディレクトリ内のファイルや子ディレクトリの一覧。ブラウザで閲覧可能な形式のファイルをクリックすると右にプレビューされます。「×」ボタンで削除。

④ ファイルのプレビュー。バイナリファイルなどの場合はダウンロードされます。

⑤ ディレクトリ新規作成フォーム。名前を入力してエンターで生成されます。

⑥ 各ディレクトリの残容量表示。

⑦ ドロップ操作によるファイルアップロードエリア。日本語名のファイルにも対応してます。

##作品ファイルの編集

各プロジェクトごとにHTML/CSS/JavaScript/GOMLファイルを編集できます。
GOMLファイルの書き方はスクリプト0行で驚くほど描けるWebGLを参照してください。

① 編集するプロジェクトの変更が可能です。

② プロジェクトの作成・削除ボタン。削除すると公開されている作品でもデータが破棄されます。同時に/works/ディレクトリ以下のプロジェクト用ディレクトリも消去されます。

③ ツールバー。戻る・進む・エディタ内検索・ローカル保存・クラウド保存・拡大・縮小・エディタカラー変更が可能です。
ローカル保存（フロッピーボタン）はブラウザの保存領域を使うので公開済みの作品にも影響を与えず編集が出来ます。保存するたびに右側でプレビューできます。
クラウド保存（雲ボタン）は「/works/作品ID/」以下に保存します。公開済みの作品なら更新されます。

④ ファイル変更タブ

⑤ コードエディタ。フォーカス中は以下のショートカットキーが使えます。