ヘルプ

目次

1. このサイトは?

ここは、HSPで作られたプログラムを、hsp3dish.jsを利用することで公開することの出来るサイトです。 プログラムの種類に制限はなく、HSPで作られたプログラムでしたら、ゲーム・デモプログラム・ちょっとしたテストや実験など、ジャンルを問わず公開することができます。 また、コメント機能やいいね機能などによって、プレイした人からのフィードバックを受けとることができるのも大きな特徴です。

2. 基本的な使い方

以下の手順で使われている画像は、開発途中のものです。実際の画面とは多少異なることがあります。

2-1. プログラムを探す

HSP部屋では、ユーザが投稿したプログラムを、作成日いいね数名前順、またはタイトルの検索によって調べることが出来ます。

○ 作成日・いいね数・名前順で探す

HSP部屋上部の「プログラムを探す」を開きます。

次に、画面左から探したい方法を選択します。

プログラムの検索結果が表示されます。

○ タイトルから検索する

画面上部の検索ボックスに、調べたいプログラムのタイトルを入力し、Enterキーを押します。

プログラムの検索結果が表示されます。

2-2. プログラムを実行する

プログラムを探す」ページや、プログラムの検索結果を開きます。

実行したいプログラムのタイトルを開きます。

プログラムが実行されます。

2-3. ログイン

HSP部屋では、Twitterアカウントを利用してログインすることで、プログラムの投稿機能や、いいね機能を使うことができます。

ログインするためには、HSP部屋右上にある、「ログイン」を開きます。

Twitterのログイン画面に移動しますので、ログイン情報を入力しログインします。(既にTwitterへログインしている場合は、この手順は不要です。)

「連携アプリを認証」というボタンを押します。

無事ログインが終了すると、HSP部屋に自動的に戻ります。

2-4. ログアウト

HSP部屋右上の、アカウント名を開きます。

「ログアウト」を押します。

HSP部屋右上表示が「ログイン」へ変わっているのを確認してください。

2-5. プログラムにいいねする

以下の手順はログインが必要です。

いいねをしたいプログラムを開きます。 → プログラムを実行する

プログラム名の右にある、笑顔マークを押します。

画面下部に「いいね!しました」と表示されたことを確認してください。

2-6. いいねを取り消す

以下の手順はログインが必要です。

HSP部屋右上のアカウント名を開きます。

一覧より、「管理画面」を開きます。

管理画面メニューより、「いいね!一覧」を開きます。

取り消したいいいねを選び、右側の「取り消し」を押します。

2-7. プログラムにコメントする

コメントしたいプログラムを表示します。 → プログラムを実行する

実行画面右側の、「TWITTERを使ってコメントする…」ボタンを押します。

Twitterでつぶやく画面が表示されますので、コメントを記入して投稿してください。

このとき、ハッシュタグ#hsproom#プログラム名を削除してしまうと、コメントして表示されなくなりますのでご注意ください。

2-8. プログラムを作成する

プログラムを作成するには二種類の方法があります。

HSP部屋で作成する方法は、手軽にどこでもプログラムを作成できるので、気軽にプログラムを作成したいときにオススメです。

パソコンで作成する方法は従来通り、HSPエディタを使用してプログラムを作成する方法です。

2-8-1. HSP部屋で作成する

HSP部屋のプログラム作成画面には、色分けに対応したエディタ、その場で実行できるプレビュー機能、ヘルプを引くことができる機能などがあり、1ファイルに収まるようなプログラムであれば十分作ることのできる環境が整っています。

以下の操作にはあらかじめログインしている必要があります。

まずHSP部屋上部の「プログラムを作成する」ボタンを開きます。

プログラム作成画面が開きますので、タイトルなどを入力します。

また、画面中央の黒いエディタに、プログラムを入力することができます。

エディタの上部にはツールバーがあります。

例えば、別のテンプレート(ひな形)を開くときは、「ファイル」→「テンプレートを選ぶ…」を押します。

すると、テンプレートの一覧が表示されますので、開きたいテンプレートを選び、「開く」を押します。

こうすることで、選んだテンプレートがエディタに反映されます。(それまで入力していたソースコードは消えてしまいます。)

また、プログラムを作成している間にわからない命令があったときは、命令の上にキャレットを置きF1キーを押してみましょう。

すると、Online Help Document Libraryが開きます。

プログラムを一通り入力し終わったら、実行してみましょう。

ツールバーより「実行」ボタンを押すか、F5キーを押すことでプログラムを実行することができます。

エディタ上で使うことのできる機能は以下の通りです。

機能 ショートカットキー
テンプレートを開く なし
ソースコードをダウンロード Ctrl+S
AXファイルをダウンロード なし
実行 F5
文法チェック なし
ヘルプ F1

すべての入力が完了したら、「投稿」ボタンを押しましょう。

2-8-2. パソコンで作成する

以下の手順は、Windowsを使用していて、最新版のHSPフルセットがインストールされていることを前提としています。 HSPをまだインストールしていない方は、こちらからインストールしてください。

基本的には、通常のhsp3dish向けアプリの作成と手順は同じです。

HSP部屋ではプログラムの実行ファイルとして、「HSP3Dish helper」によってhsp3dish.js向けに変換された(プログラム名).axファイルを使用します。

axファイルを作成する

Windowsのスタートメニューより、「HSP3Dish helper」を開きます。

「hsp3dish.js」ボタンをクリックします。

作成したスクリプトを指定し、「変換」ボタンをクリックします。(データフォルダは指定しなくても問題ありません。)

正常に変換された場合、スクリプトと同じフォルダに、「(プログラム名).ax」が生成されます。

ここで生成されたaxファイルはHSP部屋に投稿することができます。 → プログラムを投稿する

HSP部屋で正常に実行されるためには、以下の点に気をつけてください。

・ プログラムの先頭に#include "hsp3dish.as"または、#include "hgimg4.as"の記述がある

・ 横640x縦480のサイズで作成されている

hsp3dish.js (WebGL/JavaScript版)プログラミングガイドに則っている

・スクリプトエディタの、「start.axファイルを作成」機能を使用する場合は、日本語が文字化けする

2-9. プログラムを投稿する

以下の手順はログインが必要です。

あらかじめ、プログラムのサムネイル画像(どのようなプログラムか分かる画像)、axファイルプログラムで使用するファイルを用意してください。

HSP部屋上部の「プログラムを投稿する」を開きます。

プログラムの情報を入力するフォームが表示されますので、それぞれ注意事項に気をつけて入力してください。

サムネイル画像、プログラムは、ドラッグ&ドロップまたは、選択ボタンを押すことで選択することができます。

プログラムの説明文は、Markdown記法を利用して記述することが出来ます。Markdown記法については、日本Markdown記法ユーザの会の説明が参考になります。

すべて入力しましたら、「投稿」ボタンを押して投稿してください。

2-10. プログラムを編集する

以下の手順はログインが必要です。

一度投稿したプログラムはいつでも、管理画面、またはプログラム実行画面の編集ボタンから編集することが出来ます。

まず、HSP部屋上部より「アカウント名」を開いて、「管理画面」を開いてください。

または、プログラム実行画面の編集ボタンからもこのページを開くことができます。

管理画面メニューより、「プログラムの編集」を押してください。

投稿したプログラムの一覧が表示されますので、編集したいプログラムを選び、「編集」を押してください。

プログラムを投稿する際と同様のフォームが表示されますので、変更したい項目を編集してください。→ プログラムを投稿する

axファイルを変更する際は、以前のaxファイルが表示されている箇所に新しいaxファイルをドラッグ&ドロップすることで、変更することが出来ます。

編集が終わりましたら、フォーム下部の「更新」ボタンを押してください。

2-11. プログラムを削除する

以下の手順はログインが必要です。

投稿したプログラムは管理画面からいつでも削除することができます。

まず、HSP部屋上部より「アカウント名」を開いて、「管理画面」を開いてください。

管理画面メニューより、「プログラムの編集」を押してください。

投稿したプログラムの一覧が表示されますので、削除したいプログラムを選び、「削除」を押してください。

プログラムが削除されました。

3. ブログパーツの使い方

HSP部屋では、公開されているプログラムをブログパーツとして外部のブログや、Webサイトに埋め込むことができます。

埋め込むには以下のHTMLタグを目的のブログ、Webサイトに記述してください。

<iframe src="http://hsproom.me/program/remote_view/?p=<プログラムID>" width=640 height=480 frameborder=0 scrolling="no"></iframe>

<プログラムID>には、埋め込みたいプログラムのURL(http://hsproom.me/program/view/?p=<プログラムID>)のものを使用してください。

注意

スマホなどのモバイルデバイスには現時点で対応していません。