Webっぽい

Webっぽい技術やそうでないことなど書きます。

ゲストOSのRailsにホストOSからアクセスしようと思ったらできなかった

ゲストOSのRailsにアクセスできない

ようやくRailsがインストールできて、テスト的に適当なアプリを生成してみたのだが、

$ rails server

として起動してみても、ホストOSのブラウザから「http://ゲストOSのIPアドレス:3000」としてもアクセスできなかった。

 ゲスト側のアダプターにはホストオンリーアダプターが設定してあるので、ホストOSからゲストOSへのアクセスは通るはずなんだが・・。

ちなみに、WERickで自分でHTTPサーバーを建ててホストOSからゲストOSにアクセスしたところ、ちゃんとアクセスできた。

ここから考えられるのは、Railsの仕業であるいうこと。

そう思って調べてると、どうやらRailsはローカルホスト（ゲストOSの）からのアクセスしか受け付けない設定にデフォルトでなっているようだった。

参考：

Ruby - developmentでWEBrick起動のRailsはbindオプションでanyアクセスを受け付けるようになる - Qiita

ここに書いてあるように、bindのオプションを付けてRailsのサーバを起動してみたところ、ホストOSからゲストOSのRailsにアクセス出来た！

$ rails server --bind=0.0.0.0

こうしてサーバを起動することで、ローカルホスト外からもアクセスできるようになるみたいだ。 

 （"$ rails server"は単に"$ rails s"でも良いみたいだ）

仮想CentOSにRailsをインストールしようとして躓いた

Nokogiriがインストール出来ないよ

Windows 7のVirtualBoxにCentOS 6.5 64bitをインストールしたので、SSHの練習も兼ねてRailsをインストールしようと思ったのだが、どうやってもエラーになる。

RubyはrbenvでRuby2.0.0-p598をいれたのだが、

$ gem install rails

をするとnokogiriのインストールで躓いてrailsが入れられない。

とりあえずnokogiriだけでもいれられないかとエラーメッセージで検索したりしていたが、同じ状況の人は見つからず、諦めかけてた。

で、もう一度よくエラーメッセージを読むと、

Running 'patch' for libxml2 2.9.2... ERROR, review '/home/username/.rbenv/versions/2.0.0-p598/lib/ruby/gems/2.0.0/gems/nokogiri-1.6.5/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/patch.log' to see what happened.

こんな一文があった。とりあえず示された

'/home/username/.rbenv/versions/2.0.0-p598/lib/ruby/gems/2.0.0/gems/nokogiri-1.6.5/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/patch.log'

を開いてみると、

sh: patch: コマンドが見つかりません

なんともシンプルなエラーが記載されていた。

ということで、

# yum install patch

をしてみたところ、すんなりインストールでき、nokogiriもインストールできた。

つづいてrailsもインストールしてみたところ、すんなりできた。

 

教訓

エラーメッセージはちゃんと読もう。

 

 

ということで、こんなバカなかことで躓くのは自分くらいだろうけど、もし同じエラーで困ってる人がいたらやってみてください。

Javaで外部アプリケーションなどを実行する

Javaで外部アプリケーションを実行するには、

Runtime.getRuntime().exec("アプリケーションのパス");

とすればよいが、exeなどの実行可能ファイルでないとエラーになる（と思う。

テキストファイルや画像ファイルなどを実行したい場合は、

Runtime.getRuntime().exec("cmd /c start " + ファイルのパス);

とすれば良い。
こうすることで任意のファイルをそれぞれのファイルに関連付けられたアプリケーションで実行することができる。

脳内イメージをすぐにメモって共有できるサービス / Inskemo

脳内のイメージをぱっと描いてさっと保存（共有）できるサービスを作りました。


その名も
瞬間絵メモ - Instant sketch memo


Skypeとかで会話中にどうしても言葉じゃ説明できないイメージってありますよね。
そういうものをブラウザに直接描いて、即時保存して、URL発行(共有)できます。

使い方

使い方は簡単。
まずはトップページにアクセスします。

アクセスしたら、そこにイメージのままに絵を描きます。

絵が描けたら、キャンバスの下にある「保存」ボタンをクリックして保存します。
これで完成です。

保存したらURLが発行されるので、画像URLを友人に教えてください。
友人にも編集して貰いたいときは編集URLを教えてあげるとスムーズだと思います。

Inskemo

瞬間絵メモ - Instant sketch memo

はてぶとfacebookとGoogle+1のソーシャルボタンを綺麗に揃える

はてぶ、facebookいいね、Google+1など、さまざまなソーシャルボタンがあります。
いまやこれなしではWebコミュニティは成り立たないでしょう。

しかしこのソーシャルボタン、各自が適当なフォーマットで作成しているため、並べると高さやら位置やらなにからなにまでばらばらです。
せめて上辺くらい揃えたいと思ったので、こんなスタイルシートを書いてみました。

iframe.hatena-bookmark-button-frame, div#___plusone_0 iframe{
	vertical-align: text-bottom;
}

これを適当に貼り付けると、あら不思議、綺麗になりました。
元ネタはこちらです。
ソーシャルボタンをキレイに並べる | ntks


実際にHTMLに埋め込むときは、headかbodyの中にこれを追加しましょう。

<style>
iframe.hatena-bookmark-button-frame, div#___plusone_0 iframe{
	vertical-align: text-bottom;
}
</style>

Popup Helperのサンプル

Popup Helper というものを作った。 / JavaScript - Webっぽい
で公開したライブラリの、実践的なサンプルを作成しました。
是非参考にしてみて下さい。

サンプル

ページ上部にある「ヘルプ」をクリックするとヘルプが有効になります。
もう一度それをクリックすると無効になります。
サンプル（新しいタブで開きます）

ソース

<!DOCTYPE html>
<html>
<head>
    <script src="./popup_helper.js"></script>
    <script>
        onload = function(){
            help = new PopupHelper();
        }
    </script>
    <title>Popup Helper Sample</title>
</head>
<body style="background-color: lightgray;">
    <a href="#" onclick="help.toggle()" data-help="ヘルプ表示をオンにします。">ヘルプ</a>
    <form onsubmit="return false;">
    <table>
        <tr data-help="あなたの名前を入力します。\n※ハンドルネーム可">
            <td>名前:</td>
            <td><input name="name"></td>
        </tr>
        <tr data-help="あなたのメールアドレスを入力します。">
            <td>メールアドレス:</td>
            <td><input name="mail"></td>
        </tr>
        <tr data-help="念のため、もう一度メールアドレスを入力してください。">
            <td>メールアドレス(確認):</td>
            <td><input name="mail"></td>
        </tr>
        <tr data-help="お問い合わせ内容をご記入ください。">
            <td>本文:</td>
            <td><textarea style="width: 300px; height: 170px;"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="送信" data-help="フォームの内容を送信します。"><td>
        </tr>
    </table>
    </form>
</body>
</html>

Popup Helper　というものを作った。 / JavaScript

とあるWebサイトを作っていて、簡単にON/OFFできて分かりやすい且つ汎用性のあるポップアップヘルパーを作る必要があったので作りました。

特徴

  • 簡単にON/OFF
  • JavaScript書き換え不要
  • スタイリング自由

とにかく簡単に、そして汎用的に。

チュートリアル

ヘルプに表示する内容を指定する

ヘルプに表示する内容は、html要素に記述します。
ヘルプを表示したい要素にdata-help属性を追加します。
その値には、表示したい文字列を指定します。
また、「\n」は改行を表します。

<p data-help="ここにヘルプの内容を記述します">マウスを重ねるとヘルプが表示されます。</p>

インスタンスの作成

Popup Helperはクラス(オブジェクト)です。
まずはインスタンスを作成します。
実際は、onloadなどを使用してDOMが構築されてから作成します。

var help = new PopupHelper();

ON/OFF

ヘルプを有効にしたり無効にしたりします。
ヘルプを有効にすると、該当要素にマウスを重ねた時にポップアップされます。
無効にすればポップアップされなくなります。
ヘルプが有効(ON)の状態で要素の何処かをクリックすると、自動的にOFFになります。

var help = new PopupHelper();
help.ON(); // ヘルプを有効にする
help.OFF(); // ヘルプを無効にする
help.toggle(); // ヘルプのON/OFFを切り替える

特定の要素にだけヘルプを有効にする

自動でdata-helpを属性に持つ要素がヘルプを表示する対象の要素になりますが、特定の要素にだけヘルプを表示したい場合はインスタンスを作成するときに引数を与えます。
その引数は配列で要素のIDを指定します。

<script>
onload = function(){
	var help = new PopupHelper(["a","b"]);
	help.ON();
}
</script>
<p id="a" data-help="これはaです"></p>
<p id="b" data-help="これはbです"></p>
<p id="c" data-help="これはcです"></p>

ポップアップするボックスのスタイルを変更する

初期では、以下のように指定されています。

border: 1px solid #888;
background-color: #fff;
padding: 5px;
position: absolute;
display: none;
z-index: 10000001;

これを変更するには、ライブラリの該当箇所(12行目くらいから）を変更するか、
CSSにdiv#popup_helper_boxを指定します。
CSSに指定する場合は、全ての属性に対して!importantを付ける必要があります。

ポップアップボックスのIDを変更する

ライブラリの該当箇所（「popup_helper_box」と表記されているところ）を変更したいIDに全て置換すれば可能です。

ライセンス

このライブラリはLGPL(GNU Lesser General Public License)で配布されます。
要するに、「自由に改造して配布していいよ。でも著作権表記は残して、そして配布するときはまたLGPLを適用してね。」と言うことです。
2015/1/3追記：Version 1.0.1からより制限の緩いMIT LICENSEに変更しました。ご自由にお使いください。

ダウンロード

ライセンスに同意出来る方は、以下のリンクからダウンロードして下さい。
もちろん、作者はこのライブラリに関するいかなる問題についても責任を負いません。
しかし、なんらかのバグがあれば報告して下さると直すかも知れません。
hosi/PopupHelper · GitHub