Category: other topics

Windows10でVituralBoxの操作のために、PuTTYとCyberduckを使います。Macの場合は、Macのコマンドラインから操作するので必要ありません。

まず、PuTTYをダウンロードします。
PuTTY
※A Windows MSI installer package for everything except PuTTYtelのmsiをクリックしてください。

セットアップが終わったら、PuTTYを開き、下記のように、HostNameの箇所を、先ほどVagrantfileで設定したように192.168.33.10　と入力します。session名をMyCentOSなどと保存しておくと、今後の接続が楽になります。

PuTTY Security Alertは「はい」として問題ありません。

さて、以下のように、コマンドラインが開いたら、login as と聞かれるので、「vagrant」と入力し、Passwordも同じく「vagrant」とします。[vagrant@localhost ~]$が表示されればOKです。

では、PuTTYのコマンドラインで、以下の手順でアプリケーションをインストールしていきましょう。インストールに時間がかかるものもあります。

sudo yum -y update
sudo yum -y install git
git clone https://github.com/dotinstallres/centos6.git
cd centos6
./run.sh
exec $SHELL -l

終わったら、今度はCyberduckというツールをインストールします。
Cyberduck
ページ中段左の、Download Cyberduck for windowsをクリックします。

続いて、Cyberduckを開く前に、Cyberduckの操作をしやすくするため、フォルダの左上ファイルから「フォルダーと検索オプションの変更」を行います。

フォルダーオプションの、ファイルとフォルダーの表示で、下記のようにラジオボタンを「隠しファイル…を表示する」にします。

また、下にスクロールして、「登録されている拡張子は表示しない」のチェックボックスは外しておきましょう。

以上の設定が終わったら、Cyberduckを開き、新規接続を左上のクリックします。
接続方法は、下記のようにSFTP port22、サーバーは、設定したipの「192.168.33.10」、ユーザー名パスワードは、PuTTY同様に、vagrantと入力します。

ログイン後、以下のページが表示されたら、セットアップ完了です。このCyberduckのディレクトリで、ファイルの作成・編集の操作をしていきます。

お疲れ様でした。

ここでは、Windows10でのローカル環境構築のセットアップを紹介します。
まず、VirtualBox、Vagrantをそれぞれ公式サイトからダウンロードし、インストールしましょう。

・Virtual box
※Platform PackageのVirtualBox 5.1.8 for Windows hosts x86/amd64のリンクです。インストール後のSetupで、CustomSetupを聞かれますが、チェックボックスは一番下のRegister Associationだけにしておきましょう。
・Vagrant
※Windows Universal(32 – 64bit)です。

VirtualBoxとは、PC上に仮想的なPCを作成し、別のOSをインストール・実行できるフリーのPC仮想化ソフトです。例えば、VirtualBoxを使って自分のPCにLinuxOSを入れることにより、簡単にPC内に仮想のサーバー環境を構築することができます。Railsをテストする場合は、標準でWEBrickというWebサーバー用フレームワークがついているので、必要ありません。また、WindowsOSの中に、MaxOSを入れることも可能です。

Vagrantは、テスト用の仮想マシン作成やその環境設定などを自動化するツールです。Vagrantをインストールすることで、VirtualBoxの操作がコマンドラインで簡単にできるようになり、楽になります。

インストールが完了したら、WindowsPowerShellを立ち上げて、VirualBoxで、CentOSをPCに入れます。

コマンドラインには、以下の順に入力してください。

# vagrantの便利なプラグインを導入
vagrant plugin install vagrant-vbguest
mkdir MyVagrant
cd MyVagrant
mkdir MyCentOS
cd MyCentOS
vagrant init bento/centos-6.8

そうしたら、C:/ユーザー/hoge/MyVagrant/MyCentOS に行き、Vagrantfileをテキストファイルでよいので開きます。
仮想マシンのIPアドレスを192.168.33.10にするために、config.vm.networkの#をはずして保存します。
config.vm.network “private_network”, ip: “192.168.33.10”

そしたら、再度WindowsPowerShellに行き、以下のように打ち込んでください。

vagrant up
vagrant status

これで、コマンドラインにrunningと表示されていればひとまずOKです。続いて、仮想環境をリモートコントロールする方法を書きます。

hashは配列のようにオブジェクトをまとめるもので、hashクラスのインスタンスです。値を入れたり、値を取り出したりすには、キーを使います。
順番に取り出すにはeachメソッドを使い、キーと値の二つがeachメソッドのブロックパラメーターになります。

test.rb

books = {}
File.open("books.txt", encoding: "utf-8") do |f|
	f.each_line do |line|
		cols = line.chomp.split(/\t/)
		books[cols[0]] = cols[1]
	end
end

books.each do |key, val|
	puts "#{key}、#{val}円"
end

books.txt

坊ちゃん	300
こころ	380
明暗	700

C:\rails>ruby test.rb
坊ちゃん、300円
こころ、380円
明暗、700円

コントローラの作成は、まず、コマンドプロンプトで　rails generate controller name action で作成します。

C:\rails\hoge>rails g controller top index

続いて、アプリケーションのconfigの下にあるroutes.rbのルーティングの設定です。
./config/routes.rb

Rails.application.routes.draw do
root 'top#index'
end

ビューも編集しましょう。
./app/views/top

<h1>こんにちわ</h1>
<p>これからです</p>

rails s でサーバーを再度起動してlocalhostのブラウザを読み込むと以下のようになっている筈です。

もし、画面上で以下のようなメッセージが表示された場合は、

TypeError: オブジェクトでサポートされていないプロパティまたはメソッドです。

フォルダのGemfile.lockの「coffee-script-source (1.10.0)」を「coffee-script-source (1.8.0)」に修正します。

そして、コマンドプロンプトで、gemをインストールします。

C:\rails\hoge>gem install coffee-script-source -v '1.8.0'

再度rails s でサーバーをアップするとエラーは消えている筈です。

開発環境を整えます。
普段macですが、今回はwindows 10でやります。

ルビーのサイトから、最新版のルビー(現時点では2.3.1)とDevKitをインストール。
http://rubyinstaller.org/downloads/

DevKitのインストール先は、

C:\devkit

そして、DevKitのコンパイラが使えるように、コマンドプロンプトで以下を実行

C:￥Users\hogehoke>C:\devkit\devkitvars

そして、railsをインストール

C:￥Users\hogehoke>gem install rails

バージョンを確認してみましょう

C:\Users\hoge>ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x64-mingw32]

C:\Users\hoge>rails -v
Rails 4.2.7.1

OK?

プログラミングの初歩とも言える、簡単なカレンダーを作ります。
ここでは、変数、配列、繰り返し文、if文などを使っています。
コードは以下の通り。

<?php
    class Print_calendar extends Today_Calendar {
        function space_cell($count){
            if ($count!=0){
                for($i=0;$i<$count;$i++){
                    print "<td></td>";
                }
            }
        }
    }
    class Today_Calendar {
        function today($day){
            if (date("Y/m/d")==date("Y/m/d",mktime(0,0,0, date("n"),$day,date(Y)))){
                return "<b>".$day."</b>";
            } else {
                return $day;
            }
        }
    }
    print "<h1>".date("F")."</h1>";
    print "today:".date("Y/m/d");
    print "<br>";
    $arrayweek=array("sun","mon","tue","wed","thu","fri","sat");
    print "<table border=1><tr>";
    foreach($arrayweek as $value){
        print "<th>".$value. "</th>";
    }
    print "</tr><tr>";
    for($i=0;$i<date("t");$i++){
        $week_number = date("w", mktime(0, 0, 0, date("n"), $i+1, date("Y")));
        if ($i==0){
            print "<tr>";
            Print_Calendar::space_cell($week_number);
        } elseif ($week_number == 0){
            print "<tr>";
        }
        print "<td>".($i+1)."</td>";
        if($i+1==date("t")){
            Print_Calendar::space_cell(6-$week_number);
            print "</tr>";
        }elseif ($week_number == 6){
            print "</tr>";
        }
    }
    print "</table>";
?>

さて、出来上がりです。以下のスクリーンショットのようになってるでしょうか？CSSがないと寂しいですが、そこはご愛嬌で。

サーバーの構築やHTMLなどは別途ご確認ください。

<?php
    // タートルグラフィック用ライブラリ
    
    // キャンバス(GD)の初期化
    function initCanvas($w, $h){
        global $img, $black;
        global $angle, $nx, $ny, $pen_color;
        // GD イメージの初期化
        $img = imagecreatetruecolor($w, $h);
        $black = rgb(0, 0, 0);
        imagefilledrectangle($img, 0, 0, $w, $h, rgb(255,255,255));
        imagerectangle($img, 0, 0, $w-1, $h-1, $black);
        // タートルのパラメーターを初期化
        $angle = $nx = $ny = 0;
        $pen_color = $black;
        return $img;
    }
    // GD用の色番号の取得
    function rgb($r, $g, $b){
        global $img;
        return imagecolorallocate($img, $r, $g, $b);
    }
    
    // 位置の移動
    function move($x, $y){
        global $nx, $ny;
        $nx = $x; $ny = $y;
    }
    // 進む
    function forward($dist, $isPenDown=true, $color=null){
        global $nx, $ny, $angle;
        global $img, $pen_color;
        $x = cos(deg2rad($angle)) * $dist;
        $y = sin(deg2rad($angle)) * $dist;
        $dx = $nx + $x;
        $dy = $ny + $y;
        if ($isPenDown){
            if ($color == null) $color = $pen_color;
            imageline($img, $nx, $ny, $dx, $dy, $color);
        }
        $nx = $dx;
        $ny = $dy;
    }
    // 向きを変える
    function turn($d, $absolute = FALSE){
        global $angle;
        if ($absolute){
            $angle = $d; return;
        }
        $angle = ($angle + $d) % 360;
        if ($angle < 0) $angle += 360;
    }
    function drawCanvas($w, $h, $file, $callback){
        $img = initCanvas($w, $h);
        $callbck($w, $h);
        imagepng($img, $file);
        echo "<img src='$file'>";
    }
    // ペンの色を変更する
    function setPenColor($color){
        global $pen_color;
        $pen_color = $color;
    }
    function forward_red($dist){
        forward($dist, true, rgb(255,0,0));
    }

円グラフを描画し、ブラウザーで確認

<?php
    require_once 'vendor/davefx/phplot/phplot.php';

// サンプルデータ定義
$data = &#91;
    &#91;'ビール', 30&#93;,
    &#91;'ワイン', 20&#93;,
    &#91;'日本酒', 15&#93;,
    &#91;'焼酎', 8&#93;,
    &#91;'マッコリ', 4&#93;,
    &#93;;
// 凡例はラベルの一次元配列なのでデータから生成する
    $legend = &#91;&#93;;
    foreach($data as $d){
        $legend&#91;&#93; = $d&#91;0&#93;;
    }

// PHPlotのオブジェクトを生成
    $plot = new PHPlot(400,400);
    $plot->SetTTFPath(dirname(__FILE__).'/font');
    $plot->SetDefaultTTFont('ipagp.ttf');

// グラフの種類を指定
    $plot->SetPlotType('pie');
    $plot->SetDataType('text-data-single');
    $plot->SetShading(0);
    $plot->SetImageBorderType('plain);

// データを指定して描画
                              $plot->SetDataValues($data);
                              $plot->SetLegend($legend);
                              $plot->DrawGraph();

<?php
//
// 味噌ラーメンと塩ラーメンを判定する
//
    require_once 'histogram-lib.inc.php';
// アップロードフォーム
$up_form = <<< EOS
<h3>味噌ラーメンと塩ラーメンの判定</h3>
<div style="border:1px solid silver;padding:12px">
JPEGファイルを選択してください。<br>
<form enctype="multipart/form-data" method="POST">
<input name="upfile" type="file"><br>
<input type="submit" value="アップロード">
</form></div>
    EOS;
    $head = '<html><meta charset="utf-8"><body>';
    $foot = '</body></html>';
//アップロードされてなければフォームを表示
    if (empty($_FILES['upfile']['tmp_name'])){
        echo $head.$up_form.$foot;
        exit;
    }
    $upfile = dirname(__FILE__).'/upfile.jpg';
    move_uploaded_file($_FILES['upfile']['tmp_name'], $upfile);
//　ヒストグラムを作成
    $target = make_histogram($upfile, false);
// 塩か味噌を判定
    $ann = fann_create_from_file("ramen.net");
    $res = fann_run($ann, $target);
    $ramen_type = ["味噌ラーメン", "塩ラーメン"];
    echo $head;
    echo "<div style='text-align:center'><h2>アップした写真</h2>";
    echo "<img src='upfile.jpg' width=300><br>";
    foreach ($res as $i => $v);
    if ($per < 0) $per = 0;
    $type = $ramen_type&#91;$i&#93;;
    $fsize = round(2 * $v);
    if($fsize < 1) $fsize = 1;
    echo "<span style='font-size:{$fsize}em'>{$type}:{$per}%</span><br>";
    }
    echo "<p><a href='ramen-ui.php'>他を調べる</a></p></div>";
    echo $foot;

“miso”,
“0 1” => “sio”,
];
$ramen_index = [“miso”, “sio”];
$testdata = explode(“\n”, file_get_contents(“ramen-test.dat”));
array_shift($testdata);
$total = $ok = 0;
while($testdata){
$s = array_shift($testdata);
if ($s == “”) continue;
$data = explode(” “, $s);
$label = array_shift($testdata);
$label_desc = $ramen_data[$label];
$r = fann_run($ann, $data);
$v = $ramen_index[array_max_index($r)];
echo “- $label_desc = $v\n”;
if ($label_desc == $v) $ok++;
$total++;
}
$per = floor($ok / $total + 100);
echo “結果: $ok/total = $per%\n”;

// 配列の中で最も高い数値を持つインデックスを返す
function array_max_index($a){
$mv = -1; $mi = -1;
foreach ($a as $i => $v){
if ($mv < $v){ $mv = $v; $mi = $i; } } return $mi; }[/php]