6

私がした質問(高橋の数の算出について)に対する
myoga さんの回答の中にスニペット実行とあるのですが、

①これは、ボタンを押したときに回答のコードをどこかで実行した結果でしょうか?
もしくはあらかじめ実行した結果を表示しているのでしょうか?

②以下のコードについて上記回答のように
「ボタンを押すことで結果を表示させ、ボタンを押せば結果が閉じる」
ようにするには、どうすればよいでしょうか?

puts 'Hello, Ruby!'
1
  • 2
    スニペット実行はjavascript用ですね。一般的にはスクリプト(言語)実行用のサーバー(あるいはサーバー側のサービスとして?)を用意して連携する必要があります。
    – BLUEPIXY
    Commented 2015年5月17日 8:26

3 件の回答 3

1

myoga です。スニペット実行機能はスタックオーバーフローに備わっている機能で、私はそれをただ利用させて頂いている立場に過ぎません。従って、本来はスタッフ(?)の方にうかがうのが良いのかもしれませんが、質問文に名前があったので失礼致します。

スニペット実行

①これは、ボタンを押したときに回答のコードをどこかで実行した結果でしょうか?
もしくはあらかじめ実行した結果を表示しているのでしょうか?

閲覧者(スニペットボタンを押した人)のブラウザ上で実行しています。ブラウザには JavaScript を実行する機能・HTML を表示する機能が元からあるので、それを利用しているという事です。

②以下のコードについて上記回答のように
「ボタンを押すことで結果を表示させ、ボタンを押せば結果が閉じる」
ようにするには、どうすればよいでしょうか?

Ruby のスニペットを実行する機能は (他の方の回答にある様に) このサイトにはありません。ブラウザに Ruby を直接実行する機能はないので綺麗に対応できないのでしょう。他の方の回答にある様に、外部サイトへのリンクを貼るのが現実的なのでしょう (サイト内で完結していないので、外部サイトが移転・閉鎖したり url が変更された場合にどうなるのかという問題は残るかも知れません)。

(個人的には… 将来的にスタックオーバーフローの機能として Ruby・その他の言語で書かれたスニペットが実行できる様になれば楽しそうと思います。)

Opal - JavaScript で Ruby を実行

それでも JavaScript で動く Ruby インタプリタが存在する様なので、それを使って無理矢理動かすという手段もないことはありません。実際に動かせるのかという 興味本位 で試してみました。例えば、Opal というプロジェクトの提供する opal.js, opal-parser.js を使うと以下の様な形になるでしょうか(てもとでは動く様です):

動作例:
コードは @Manyama さんの 「質問: n進グレイコードの出力について」 から引用させて頂きました。

puts 'Hello world!'
def gray_code(n, k)
  ary = Array.new(k, 0)
  hash = {0.to_s(n) => ary.join}
  (1..n ** k - 1).each{|i|
    j = k - 1
    ary[j] = (ary[j] + 1) % n
    while hash.value?(ary.join)
      ary[j] = (ary[j] - 1) % n
      j -= 1
      ary[j] = (ary[j] + 1) % n
    end
    hash[i.to_s(n)] = ary.join
  }
  hash
end

p gray_code(2, 3)
p gray_code(3, 3)

<script src="http://cdn.opalrb.org/opal/current/opal.min.js"></script>
<script src="http://cdn.opalrb.org/opal/current/opal-parser.min.js"></script>
<script type="text/ruby">
puts 'Hello world!'
def gray_code(n, k)
  ary = Array.new(k, 0)
  hash = {0.to_s(n) => ary.join}
  (1..n ** k - 1).each{|i|
    j = k - 1
    ary[j] = (ary[j] + 1) % n
    while hash.value?(ary.join)
      ary[j] = (ary[j] - 1) % n
      j -= 1
      ary[j] = (ary[j] + 1) % n
    end
    hash[i.to_s(n)] = ary.join
  }
  hash
end

p gray_code(2, 3)
p gray_code(3, 3)
</script>

雛型:

回答欄に記入する時の雛型は以下の様な具合です。

<!-- language: lang-ruby -->

    # ruby codes

<!-- begin snippet: js hide: true -->

<!-- language: lang-html -->

    <script src="http://cdn.opalrb.org/opal/current/opal.min.js"></script>
    <script src="http://cdn.opalrb.org/opal/current/opal-parser.min.js"></script>
    <script type="text/ruby">
    # ruby codes
    </script>

<!-- end snippet -->

問題点:

  • Ruby コードの回りに、本質に関係ない Opal 呼出のための記述が必要で、見にくくなります。また Ruby としての syntax highlight も為されません。(上の例では、Ruby コードの部分とスニペットの部分に分けて2回記述してみました)
  • Opal は最新の Ruby に完全に対応できている訳ではない様です。

注意点:

  • 出力は JavaScript Console に対して行われます。出力結果を確認するには JavaScript Console を自分で開かなければなりません。
  • 閲覧者のブラウザ上で実行するので、時間のかかるコードは載せるべきではありません。閲覧者のブラウザが固まります。
4

「スニペットを実行」ボタンをクリックすると、ボタンの下にインラインフレームが生成され、回答に書かれた HTML・CSS・Javascript がその中で実行されます。
iframe の都合上 StackExchange のサーバーを一度経由しているようですが。

ですから、 Ruby をはじめとする他の言語ではコードスニペット機能を使えません。

代わりに、プログラムをサーバーでコンパイル・実行した結果を共有できるサイトを使うと便利です。Ruby や PHP だけでなく、コンパイルの必要な C++ 等に対応しているものもあります。

コードスニペット機能のようにブラウザ上で Javascript を実行できるサイトもあります。


なお、コードスニペットは「紙に<>と書かれたようなボタン」から挿入することができます。

スクリーンショット

1
  • Rubyの場合は、(コードスニペット機能を使えないので)例えばideoneで実行した結果を貼りつければよいのですね。 (ideone.com/Qeo6un)
    – TOM
    Commented 2015年5月17日 9:44
0

myoga さんの回答をもとに、

puts 'Hello, Ruby!'
(1..10).each{|i| p i ** 2}

を実行させてみる。

puts 'Hello, Ruby!'
(1..10).each{|i| p i ** 2}

<script src="http://cdn.opalrb.org/opal/current/opal.min.js"></script>
<script src="http://cdn.opalrb.org/opal/current/opal-parser.min.js"></script>
<script type="text/ruby">
puts 'Hello, Ruby!'
(1..10).each{|i| p i ** 2}
</script>

3
  • 結果が真っ白のままで上手く実行されていない。
    – TOM
    Commented 2015年5月17日 14:11
  • 1
    myogaさんの回答より「出力は JavaScript Console に対して行われます。出力結果を確認するには JavaScript Console を自分で開かなければなりません。」
    – unarist モデレーター
    Commented 2015年5月17日 14:20
  • (Chromeを使っているのですが)「その他のツール」→「JavaScript コンソール」で結果が表示されました。
    – TOM
    Commented 2015年5月17日 14:38

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。