2019年07月の空雲リファレンス新着記事

ユーザ登録

MyDNSのサイトへ移動し、「JOIN US」からユーザ登録を行う結びつけるIP一つごとに一つアカウントが必要となる30日更新通知を行わないとアカウントは削除される

2019/07/17 22:31

パッケージのインストール

yum -y install samba

2019/07/17 22:31

ダイナミックDNSとは

動的IPとドメイン名を結びつけるための仕組みDDNSを提供するアドレスへ、一定期間ごとにIPを通知することで成り立つ

2019/07/17 22:31

利用するドメインの設定

ユーザ登録するとメールでIDとパスワードが送られてくる両方とも自分で変更することはできないログインしたら、「DOMAIN INFO」を選ぶ最初の方に使用可能なドメイン名の一覧があるので、好きなものを選ぶ下の方までスクロールすると以下の項目があるので、選んだドメイン名を入力するDomain* : (FQDN)選んだドメイン名のうち???の部分は自分でオリジナルの名前をつける名前がかぶっていなければ設定できる。さらに以下の項目を設定するHostname*, Type*, Content, Delegateid or your id. (Hostname is not FQDN)アスタリスクを設定することによって、一つ一つ設定しなくても複数のサブドメインに対応できる

2019/07/17 22:31

タイムゾーンの設定

GCEではタイムゾーンがUTCになっている特に問題を感じなければそのままでもかまわないが、日本時間に直すには以下の設定を行う確認date結果Tue Aug 21 07:43:12 UTC 2018設定timedatectl set-timezone Asia/Tokyo確認date結果Tue Aug 21 16:44:44 JST 2018

2019/07/17 22:31

入れておいた方がいいもののインストール

yum -y install bind-utils

2019/07/17 22:31

swap領域の作成

dd if=/dev/zero of=/swapfile bs=1M count=1024chmod 600 /swapfilemkswap /swapfileswapon /swapfileecho /swapfile swap swap defaults 0 0 >> /etc/fstab サイズは1GBだが、変更したければcountの値を調整してほしい確認free結果 total used free shared buff/cache availableMem: 601792 131452 367260 5468 103080 363132Swap: 1048572 0 1048572

2019/07/17 22:31

Samba

Linux上でWebアプリケーションを組む場合、面倒になるのがコンテンツのアップロードだ Sambaを利用することによって、直接ファイルが編集できるようになるので、そのあたりがかなり楽になるファイアウオールに穴を開ける(GCEを使用している場合) パッケージのインストールサービスの起動と有効化 Samba用ユーザの作成 Sambaの設定確認書き込みアクセスの許可

2019/07/17 22:31

資料

基本コマンドとviエディタの使い方は覚えておこう

2019/07/17 22:31

フォルダを開く

以下のフォルダを開き、コンテンツが編集可能な状態にする\\アドレス\www

2019/07/17 22:31

VSCodeで確認

さあ、害虫どもを探す時間だ！めでたくブレークポイントに引っかかったしかしこんな短いプログラムではゴキブリの一匹すら入り込む余地はない

2019/07/17 22:31

デバッグしてみる

テスト環境ならば、ステップ実行の一つもできなければ始まらない。ということでリモートデバッグ環境を構築してみようサーバ側で再びコピペ VSCodeの設定 RLoginの設定 VSCodeで確認

2019/07/17 22:31

RLoginの設定

接続までの流れは初期設定の項目を参照して欲しいここではxdebugに接続するためのポートフォワードの設定のみ記述する新規で以上のような設定を作る。リモート側のポートを変更したい場合は上のポート、ローカル側のポートを変更したければ下のポート設定をいじれば別のポートを利用することも可能だ

2019/07/17 22:31

VSCodeの設定

当然のことではあるが、xdebugのプラグインは入れておこうこの設定により、VSCodeで編集したコードはそのままサーバで実行され、デバッグもそのまま可能になるlaunch.json{ "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9000, "pathMappings": { "/usr/share/nginx/html": "${workspaceRoot}/" } } ]}

2019/07/17 22:31

サーバ側で再びコピペ

sshで接続し、以下のコマンドをコピペだ。sudo sh -c 'echo -e "xdebug.remote_enable = 1\nxdebug.remote_autostart = 1" > /etc/php.d/90-xdebug_custom.ini'sudo systemctl restart php-fpm これでサーバ側の設定は完了だ。VSCodeでデバッグするなら、そちらの準備も必要となる

2019/07/17 22:31

動作確認

まずはブラウザにIPアドレスを放り込んでみるこれが出ていれば、Webサーバは正常だ。では次にsambaで接続してみる。UNCパスで接続するので、Windowsならファイルエクスプローラから「\\IPアドレス」だこのwww共有にアクセスすると、nignxのドキュメントルートと繋がる。編集はVSCodeなどでフォルダごと開いておくと効率が良いだろうindex.php<?phpphpinfo(); 上記のファイルを作成し、再びブラウザから確認してみるこんな感じの画面が現れれば成功だ。ここに障害が存在するとしたら、プリエンプティブでサーバを作った場合に発生する、Googleによる無慈悲なシャットダウン信号だけだ

2019/07/17 22:31

プラグインのインストール

以下のプラグインをインストールするPHP Debug

2019/07/17 22:31

VisualStudioCodeの設定

プラグインのインストールフォルダを開くデバッグ設定

2019/07/17 22:31

コンテンツの作成

ファイルはviなどのテキストエディタで作成する/var/www/www/index.html<html> <body> www </body> </html> /var/www/www2/index.html<html> <body> www2 </body> </html>

2019/07/17 22:31

インストールと起動

apt -y install nginx systemctl enable nginx systemctl start nginx

2019/07/17 22:31

コンテンツ保存用のディレクトリを作成

mkdir /var/www/www mkdir /var/www/www2ディレクトリの場所は任意で構わない

2019/07/17 22:31

自動通知

cronで定期実行するため、以下のファイルを作成するCentOSの場合は*.confという名前にしていたが、ubuntuではファイル名に拡張子はつけない/etc/cron.d/ddnsSHELL=/bin/bashPATH=/sbin:/bin:/usr/sbin:/usr/binMAILTO=root@reboot root sleep 5;curl -o /dev/null -s --user ID:PASS https://www.mydns.jp/login.html*/10 * * * * root curl -o /dev/null -s --user ID:PASS https://www.mydns.jp/login.html 起動時と10分ごとに通知を行う設定である有効にするには以下のコマンドを使うsystemctl reload cron

2019/07/17 22:31

nignxによるWebサーバの構築

一昔前はWebサーバと言えばApacheだったが、軽量で高速に動作するサービスが求められnginxが利用されることが増えているここではnginxの基本的な設定方法を紹介する

2019/07/17 22:31

VirtualHostのデータを削除

前回の設定ファイルが残っているのなら削除するrm -f /etc/nginx/conf.d/www.conf /etc/nginx/conf.d/www2.confsystemctl reload nginx

2019/07/17 22:31

必要なものをインストールする

yum -y install certbot

2019/07/17 22:31

穴を開ける

この他にもう一つだけやっておくことがある。それはセキュリティに穴を開けるという行為だ GCPのWEBインタフェイス右上の一番左にあるGoogleCloudShellを開き、ポート445を解放するのだ。右だの左だのなかなかに忙しいコンソールが開いたら以下の内容を貼り付けるgcloud compute firewall-rules create allow-samba --direction=INGRESS --priority=1000 --network=default --action=ALLOW --rules=tcp:445 --source-ranges=0.0.0.0/0 これでsambaが踊り狂うのを止める者はいない。

2019/07/17 22:31

さあ、コピペの始まりだ！

インスタンスが作成できたらSSHボタンを押そう。コピペの歴史はここから始まるのだ無事ログインできたらついにコピペの時だsudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpmsudo sed -i '1,/enable/s/0/1/' /etc/yum.repos.d/remi-php72.reposudo yum -y install samba nginx php-fpm php-xdebugsudo systemctl enable nginxsudo systemctl enable php-fpmsudo systemctl enable smbsudo sh -c 'echo -e "[www]\n\tpath=/usr/share/nginx/html\n\twritable=yes\n" >> /etc/samba/smb.conf'sudo setfacl -R -m u:$USER:rwx /usr/share/nginx/htmlsudo sed -i '1,/SELINUX=enforcing/s/enforcing/disabled/' /etc/selinux/configsudo sed -i '1,/user = /s/apache/nginx/' /etc/php-fpm.d/www.conf sudo sed -i '1,/group = /s/apache/nginx/' /etc/php-fpm.d/www.conf sudo sed -i '1,/listen = /s%127.0.0.1:9000%/var/run/php-fpm/php-fpm.sock%' /etc/php-fpm.d/www.conf sudo sed -i '1,/;listen.owner = nobody/s/;listen.owner = nobody/listen.owner = nginx/' /etc/php-fpm.d/www.confsudo sed -i '1,/;listen.group = nobody/s/;listen.group = nobody/listen.group = nginx/' /etc/php-fpm.d/www.confsudo sh -c

2019/07/17 22:31

VirtualHost

確認用にコンテンツを2種類用意するVirtualHost用コンテンツを用意する nginxの設定ブラウザで確認

2019/07/17 22:31

動作確認

ブラウザからURLを入力http://IP/

2019/07/17 22:31

構築する環境

[項目] [ 内容 ] OS CentOS7 WEB nginx PHP php-fpm7 File共有 samba

2019/07/17 22:31

トップページの内容変更

nginx version: nginx/1.15.5 (Ubuntu)の場合/var/www/html/index.html/usr/share/nginx/html/にもフォルダが存在するが、こちらは使われていないCentOSだとデフォルトでこちらが使われるまた、index.htmlを設置しなかった場合はトップページに以下のファイル内容が表示される/var/www/html/index.nginx-debian.html

2019/07/17 22:31

コピペで作るPHPテスト環境

まずは以下のような形で、GCE上にインスタンスを作る。この処理をコマンドで処理してもいいが、カスタマイズを望む人もいると思うので、ここはWebインタフェイスから行う初期設定の項目で紹介したのと同じ物だテストサーバなのでプリエンプティブ設定を有効にしておくと、消し忘れても勝手にシャットダウンしてくれるし、費用も多めに割引される。良いこと尽くしだ。ちなみにSambaでファイル共有を前提にするので、リージョンを遠いところに置くと悲惨な目にある。ここはおとなしく東京を選んでおこう。OSとして今回選ぶのはCentOS7だ

2019/07/17 22:31

コピペで作るPHPテスト環境

今回のネタは最速でPHPのテスト環境を作ることである。テスト環境といっても、本番に近い環境であることが望ましいのは当然である。今回はコピペすればあっという間に環境構築が終わるという流れでやっていきたいローカル環境でテストするとの違い、サーバでテストするのはデプロイが面倒くさいと思う人もいるかもしれない。しかしファイル共有を有効にするので、デプロイなんて作業は存在しないコピペで作るPHPテスト環境構築する環境さあ、コピペの始まりだ！何が起こったのか？穴を開ける動作確認まとめデバッグしてみる

2019/07/17 22:31

話題に上らない格安GCE

AWSはAWS 認定ソリューションアーキテクトとかで技術者を囲い始めている。対するGCEは何にも無い。このままでは差が開く一方だ。とりあえずは価格の安さを強調しておこう GCEは安い、安いよ！

2019/07/17 22:31

プリエンプティブで安くなる金額

リージョンを東京にした場合の価格構成[東京リージョンの価格表]CPU メモリストレージ通常料金割引後料金vCPUx1(共有) 0.60GB HDD 10GB $5.22 $4.17vCPUx1 3.75GB HDD 100GB $36.37 $14.87vCPUx4 15.00GB SSD 100GB $146.78 $60.79vCPUx8 52.00GB SSD 100GB $332.11 $118.38vCPUx8 52.00GB SSD 64TB $14,793.47 $14,579.74 プリエンプティブで安くなるのは、CPUとメモリのみだ。ストレージは割引対象に含まれない。逆にプリエンプティブ構成にすると、継続利用割引という、一ヶ月稼働させ続けることによって行われる30%の割引が無くなってしまう。こちらの割引はストレージを含むのだ。そのためSSD64TB構成にするとストレージ分の割引の有無に相殺されて、料金にほとんど違いが出なくなる。しかしSSD64TBなんて構成を作ることはまず考えられない。通常はプリエンプティブによる割引の方が、圧倒的に効果が高いのだ。

2019/07/17 22:31

プリエンプティブによる格安サーバ構築

低価格で高性能サーバ、そんな夢を叶える方法GCEの特殊な料金プリエンプティブで安くなる金額「お前はもう死んでいる」サーバのアンデッド化話題に上らない格安GCE

2019/07/17 22:31

設定ファイルなど

nginxの基本設定ファイル(こちらは極力直接編集しない)/etc/nginx/nginx.conf新たなサイト(VirtualHost)等を作る場合は以下にファイルを設置する/etc/nginx/sites-enabled/*新たなserver設定を追加する場合は以下の場所にファイルを設置する/etc/nginx/conf.d/*.conf設定ファイル置き場は、nginxのバージョンに応じてコロコロ変わるので、nginx.confのinclude設定を確認するのが一番早い

2019/07/17 22:31

GCEの特殊な料金

GCEはGoogleアカウントとクレジットカードがあれば、誰でも利用可能だ。また、利用アカウントでGCEを使ったことが無ければ、一年間もしくは$300(約33,000円)の無料お試し期間が用意されているさらにお試し枠とは別に永年無料構成が用意されている。サーバ設置のゾーンをus(アメリカ合衆国)にし、マシンタイプをf1-micro（vCPU x 1、メモリ 0.6 GB）HDD30GB以内にすると、なんとインスタンスの稼働料金が永年無料になる。永年供養が可能でびっくりだ。メモリが心許ないとはいえ、これは太っ腹だ。 GCEの料金体系として、さらに特殊なモノが一つある。それがプリエンプティブという設定だ。インスタンス作成時にプリエンプティブを有効にするかどうか設定できる。デフォルトでは無効だが、これを有効にすると、そのサーバのインスタンスは、24時間に一度くらいの割合で自動的にシャットダウンする。そして次に起動の要求を出すまで、シャットダウンしたままという無慈悲な構成だ。そんな設定になんの意味があるのかと思うかも知れない。しかし意味はある。インスタンスを稼働させるのに必要な料金が大幅に安くなるのだ。そして強制停止にも抜け道があるのだ。

2019/07/17 22:31

SELinuxの無効化

SELinuxはまともに使用するのはかなり面倒くさい設定を間違えるリスクを冒すぐらいなら無効にしてしまった方が良い・その場で無効setenforce 0・起動時に無効化 /etc/selinux/configの設定を書き換えるちんたらファイル編集するのは面倒なので、コマンド一発で済ませるsed -i '1,/SELINUX=enforcing/s/enforcing/disabled/' /etc/selinux/config

2019/07/17 22:31

中華バリア

GCEをアメリカリージョンでmicro構成にしてインスタンスを構築すると、完全無料状態で利用できるしかし完全無料に天敵がいるのだそれが中国からのトラフィックだ中国への上りトラフィックは、無慈悲なことに無料枠に含まれないならばシールドを張るしかないfirewall.php#!/usr/bin/php<?php$IPLIST_ADR = "ftp://ftp.apnic.net/pub/apnic/stats/apnic/delegated-apnic-latest";$ZONE = "CN";function download($url){ $conn = curl_init($url); curl_setopt ($conn, CURLOPT_RETURNTRANSFER, true ); $response = curl_exec($conn); curl_close($conn); return $response;}echo "割り当てデータの読み出し開始\n";$listFile = download($IPLIST_ADR);if($listFile == null){ echo "読み込み失敗\n"; return -1;}echo "割り当てデータの読み出し完了\n";preg_match_all("/apnic\ $ZONE\ ipv4\ ([\d\.]+?)\ (\d+?)\ /", $listFile, $matches,PREG_SET_ORDER);$count = count($matches);printf("割り当てデータ数:%d\n",$count);$command = " firewall-cmd --permanent --new-ipset=$ZONE --type=hash:net";echo $command."\n";shell_exec($command);$fp = fopen("$ZONE.txt","wt");for($i=0;$i<$count;$i++){ $value = $matches[$i]; $icdr = fprintf($fp,"%s/%d\n",$value[1],32-(int)log($value[2],2));}$command = "firewall-cmd --p

2019/07/17 22:31

GCEのブートディクスを縮小する

最初に欲張りすぎたあなたが必要とする内容だ大きくするのは簡単なのに、小さくすることは簡単ではないのだ他のサイトで調べても、縮小は無理という情報しかなかっただろう無理なのではない、面倒くさいだけなのだ‌1 サイズを縮小したいインスタンスのスナップショットをとる2 インスタンスのスナップショットを稼働中のサーバ(元のインスタンスでもOK)の追加ディスクとして作成3 現在のOSと同じイメージを元にサイズを考慮して追加ディスクを作成4 以下のコマンドでイメージをコピー元DISKが/dev/sdb1‌新DISKが/dev/sdc1‌mkdir /mnt/disk1 /mnt/disk2mount /dev/sdb1 /mnt/disk1mount /dev/sdc1 /mnt/disk2rsync -av /mnt/disk1/ /mnt/disk2/ --exclude='/boot/' --exclude='/dev/' --exclude='/etc/fstab'umount /mnt/disk1umount /mnt/disk2rmdir /mnt/disk1 /mnt/disk2‌5 sdcに割り当てたディスクのスナップショットをとる6 スナップショットを元に新規インスタンスを作成するやっていることは、データの全コピーであるfstabはxfsのUUIDの絡みで除外設定している/bootに関しても同様ちなみに5と6は、インスタンスを作る際にコピー先のディスクをそのまま使えば省略可能

2019/07/17 22:31

rootにパスワードをつける

GCEでは初期ユーザがsudoをパスワードなしで使用できるため必須の作業ではないsudo passwd root

2019/07/17 22:31

ワンポイントテクニック

ここでは使えそうなテクニックを記載していく予定定期スナップショット用スクリプト GCEのブートディクスを縮小する中華バリア

2019/07/17 22:31

RLoginの設定

ssh接続を行う場合、いくつかのクライアントソフトを選ぶことになるTeraTermなども有名どころではあるが、ここでは設定が簡単なRLoginの使い方を解説するサーバ名は選択時に表示されるだけなので適当でかまわない接続先のIPアドレスはWebコンソールに表示されている物を入力するIPを固定していないと、VPSをシャットダウンして起動した場合に変わる可能性があるので注意することユーザ名は初期ユーザならGoogleアカウントの@以降を除いた部分を利用するパスワードはこの後行う認証キーの作成時にパスワードを設定するかしないかで、入力の必要性が決まる認証キーを押して秘密鍵を作る作成ボタンを押すだけの簡単な作業だ。パスフレーズは前述の通り、入れたければ入れれば良いし、テスト環境だからいらないというのならそれでもいいあとは公開鍵ボタンを押して、その内容をGCEのインスタンス編集画面で貼り付けるだけだ貼り付けるときの注意点は公開鍵の末尾のユーザ名を、VPS上のアカウント名に直すことだデフォルトではWindowsアカウントが入っているので、相違があればログインできない存在しないユーザ名では門前払いを食らうことになるだろう

2019/07/17 22:31

インスタンス始動！

作成ボタンを押し数十秒待つとインスタンスが作成されるそして問答無用で起動する外部IPに記述されているのが、外からアクセスするのに必要なアドレスだ内部IPはGCE内に構築したVPS同士で通信する場合に利用することがあるまた正確な話をすると、VPS自体に外部IPは割り当てられておらず、内部IPからゲートウエイを経由する時点で変換が行われるなのでVPSのインタフェイスを確認するとプライベートIPしか持っていないことが分かる割り当てられるのはIPv4のみであるIPv6を利用したければプロジェクトにロードバランサを構築して変換をかける必要があるがコストがかかることには留意すること

2019/07/17 22:31

インスタンスの作成

新規にVPSを作ることになるが、下図はその設定例だ日本在住ならリージョンは東京をおすすめする名前は決めると後から変更できないコマンドで操作するときに、この名前を使うときがあるので変な名前をつけるのはお勧めできないマシンタイプは試しに作るなら最小構成で十分であり、これなら一月ワンコインで済むOS選択時にストレージの容量を設定できるが、ここは初期段階で欲張らない方が良い最大容量を増やすことは簡単だが、減らすことは出来ない正確に言うと頑張れば減らせるが、いくつかの面倒くさい作業が待っているこれは別に解説する管理ボタンを押すと、追加設定が出来るそこで可用性ポリシーのプリエンプティブをオンにすると、ランニングコストをかなり下げることが出来る高性能な構成ほど効果が出やすいただし24時間程度でシャットダウンされる

2019/07/17 22:31

ssh接続

Webコンソール上からssh接続するなら、SSHボタンを押すだけで終わりである

2019/07/17 22:31

初期設定

GCEのコンソールまでたどり着くインスタンスの作成インスタンス始動！ ssh接続 RLoginの設定ここまで出来たらsudoだけ覚えて帰って

2019/07/17 22:31

GCEのトライアル

先ほど書いたとおり一年間は無料で使える正確には一年間限定、$300クレジットがもらえるこの金額の範囲に収まるなら、無料でVPSを立てたい放題出来る AWSは最小構成のインスタンス一つだが、GCEは$300以内であれば高スペックのインスタンスを複数作ることも可能ださらに、一つのアカウントに対して$300なので、アカウントを複数持っているならその分だけクレジットが利用できる複アカに禁止規約は存在しないちなみに利用規約を読むと、無料トライアルでは暗号通貨のマイニングは禁止と書かれており、それ以外の禁止事項がない $300あれば、東京リージョン共有 vCPUx1 メモリ 1.6GB HDD 100GB 程度の構成で一年間使うとして$259.8だったので、余裕でおつりが来る計算だいや、料金を支払っていないから、おつりは来ないさらにサーバをプリエンプティブ構成にして、コストを1/3に押さえるという方法もあるが、これはQiitaに書いた記事を読んでほしい

2019/07/17 22:31

はじめに

GCPとGCE GCEのトライアル

2019/07/17 22:31

GoogleComputeEngine (GCE)

GoogleComputeEngine (GCE)とはGCPのサービスの一つで、一般にいうところのVirtualPrivateServer(VPS)を提供してくれる Googleが提供しているサービスであるにもかかわらず、その知名度の低さは致命的だ同様のサービスとしてAmazonのAWS、MicrosoftのAzureがある知名度はこの二つの方が圧倒的に上であるなるほどこうやって考えるとソートを考慮して、Aから始まる名前をつければ良かったのではないだろうか？その他VPSは、巨大企業のものを使わなくても有象無象にたくさん存在するしかしLinux系OSで気軽に始めるなら、GCEかAWSをお勧めするなぜならこの二つは一年間、タダで使えるからだちなみにAzureは30日となっている

2019/07/17 22:31

GCPとGCE

GoogleCloudPlatform(GCP) GoogleComputeEngine (GCE)

2019/07/17 22:31

Google Compute Engine (GCE) 入門

Googleの提供するVPSの使い方の解説

2019/07/17 22:31

GoogleCloudPlatform(GCP)

GoogleCloudPlatform(GCP)とはGoogleが提供する様々なクラウドサービスの集まりである前提知識なくサイトに飛ぶと、あまりのサービスの多さに結局なんなのかわからないという悲しい結果を招くことになる GCPはGoogleの提供するサービスのあらゆるAPIが有料無料で集まっている広大海だやりたいことを明確化せずに赴いても、溺れることは必然である

2019/07/17 22:31

初回ログイン後の初期設定

rootにパスワードをつける root権限を得る SELinuxの無効化 swap領域の作成入れておいた方がいいもののインストールタイムゾーンの設定

2019/07/17 22:31

ファイルの確認

ファイルリスト表示コマンドls最初は何もファイルを作っていないので、リストには何も表示されない以下、隠しファイルを表示ls -a予め、いくつかの設定ファイルが隠しファイル(頭にドットに付いたファイル)になってる詳細表示ls -lファイルサイズや更新日時を表示するオプションの組み合わせも可能ls -la

2019/07/17 22:31

ディレクトリの確認

以下のコマンドを実行するpwdログイン直後はカレントディレクトリがホームディレクトリになってる

2019/07/17 22:31

相対指定

. カレントディレクトリを表す.. 親ディレクトリを表すls .ls ..で違いが確認できる../ファイル名というような指定をすると、親ディレクトリのファイルを操作できる

2019/07/17 22:31

サーバ構築系の解説

VPS(Google系)やLinux(CentOSやUbuntu)などのサーバ構築系情報

2019/07/17 22:31

Sample005

分割バーfunction Sample005() { const frame = new JWF.FrameWindow() frame.setTitle('Sample005 分割ウインドウ') //タイトル設定 const splitter = new JWF.Splitter() //分割バーの作成 frame.addChild(splitter, 'client') //分割バーをフレームウインドウに乗せる const tree = new JWF.TreeView() //ツリービューの作成 const list = new JWF.ListView() //リストビューの作成 splitter.addChild(0, tree, 'client') //splitterの分割領域0にtreeを追加 splitter.addChild(1, list, 'client') //splitterの分割領域1にlistを追加 //分割バーの分割サイズと方向設定(WestEast、左右) //weは左が領域0、右が領域1 //nsにすると上下分割も可能 splitter.setSplitterPos(200, 'we') //表示領域が300を切ると、動的なオーバーレイ表示にする splitter.setOverlay(true, 300) //treeにアイテムを追加 tree.getRootItem().setItemText('最上位アイテム') for (let j = 0; j < 5; j++) { let item = tree.addItem("アイテム" + j, true) for (let i = 0; i < 5; i++) item.addItem("サブアイテム" + j + "-" + i, false) } //アイテムが選択された場合のイベント tree.addEventListener('itemSelect', function (e) { c

2019/07/17 22:31

Sample004

ツリービューfunction Sample004() { //ツリービューの作成 let treeView = new JWF.TreeView({ frame: true }) treeView.setTitle('Sample04 ツリービュー') //タイトルの設定 //サイズ設定 treeView.setSize(300, 300) //ルートアイテムに対して名前の設定 treeView.getRootItem().setItemText('ルートアイテム') //アイテムを作成 let item item = treeView.addItem('アイテム1') item.addItem('アイテム1-1') item.addItem('アイテム1-2') item = treeView.addItem('アイテム2') item.addItem('アイテム2-1') item.addItem('アイテム2-2') //アイテムが選択された場合のイベント treeView.addEventListener('itemSelect', function (e) { const name = e.item.getItemText() //リストビューからデータを取り出す new JWF.MessageBox('メッセージ', name + "が選択された") //メッセージボックスの表示 }) }

2019/07/17 22:31

不正終了

不正終了すると、viのスワップファイルが残留し起動時にその旨のメッセージが毎回出るようになるメッセージを消すには、ファイルを削除しなければならない rm スワップファイル名スワップファイル名は「.不正終了したファイル名.swp」になっているファイルリストを確認するときは「ls -la」、viで確認するときは「vi -r」とする頭にドットのついているファイルは隠しファイル扱いになっているので、lsコマンドには必ずaオプションを利用すること

2019/07/17 22:31

viエディタ

モードに関して必要頻度の高いコマンドバックグラウンドに関して不正終了

2019/07/17 22:31

バックグラウンドに関して

間違えてCTRL+Zを押してしまうと、アプリケーションがバックグラウンドに回ってしまう正常終了していない状態になってしまうので以下のコマンドで対処することfg以上のコマンドで、viが復帰するので正常に終了させる動作しているプロセスを確認するには、jobsコマンドを利用する

2019/07/17 22:31

ディレクトリの種類

カレントディレクトリ現在いる場所ホームディレクトリ各ユーザに割り当てられた専用の場所ルートディレクトリファイルシステムのもっとも上位の場所親ディレクトリ現在よりも一つ上の場所

2019/07/17 22:31

コマンドとディレクトリ

CUIでファイルやディレクトリを扱う上で最低限必要な知識を確認するディレクトリの種類ディレクトリの確認ファイルの確認絶対パスと相対パス相対指定

2019/07/17 22:31

モードに関して

viはモードという概念を持っているテキストを入力するためのモードとコマンドを入力するためのモードであるモードを切り替える方法は、コマンドの項目を参照されたし

2019/07/17 22:31

よく使うコマンド

・ファイルの末尾を表示 tail ファイル名・ディレクトリの作成 mkdir ディレクトリ名・ディレクトリの削除 rmdir ディレクトリ名 rm -r ディレクトリ名・ファイル内容の表示 cat ファイル名・ファイル内容を終端部分のみ表示 tail ファイル名・ファイルリストの表示 ls・ファイルリストの詳細表示 ls -l・ファイルリストの隠しファイルの表示 ls -a・カレントディレクトリの表示 pwd・カレントディレクトリの移動 cd ディレクトリ名・テキストファイルの編集(細かい使い方はviエディタの使い方を参照) vi ファイル名・ファイルの削除(削除するかどうか聞いてきた場合はyを入力すること) rm ファイル名・ファイル名の変更/移動 mv 移動元移動先・ファイルのコピー cp コピー元コピー先・管理者権限の取得 su -・属性の変更 chmod 属性ファイル名属性 a:全て u:所有者 g:グループ o:その他 +:追加 -:削除 r:読み込み w:書き込み x:実行例 chmod o+w file.txt・所有者の変更 chown ユーザID:グループID ファイル名 -R 下の階層すべて例 chown -R x13g000:x13g000 ファイル/ディレクトリ名・サービスの起動/停止等 systemctl アクションサービス名アクション start(開始) stop(停止) reload(更新) restart(再起動) 例 systemctl start network・サービスの自動起動設定 systemctl アクションサービス名設定 enable/disable 例 systemctl enable network ・パッケージのインストール yum -y install パッケージ名・IPアドレスの表示 ip a・再起動reboot・シャットダウンpoweroffhalt

2019/07/17 22:31

Sample003

リストビューfunction Sample003() { const listView = new JWF.ListView({ frame: true }) //リストビューをフレーム付きで作成 listView.setTitle('Sample03 リストビュー') //タイトルの設定 listView.addHeader(['番号', '名前', '攻撃力']) //ヘッダの作成 listView.addItem([1, '竹槍', 5]) //アイテムの設定 listView.addItem([2, '棍棒', 10]) listView.addItem([3, '銅の剣', 10]) listView.setPos(30, 30) //位置指定 listView.addEventListener('itemClick', (e) => { //アイテムクリック処理 const name = listView.getItemText(e.itemIndex, 1) //リストビューからデータを取り出す new JWF.MessageBox('メッセージ', name + "が選択された") //メッセージボックスの表示 }) }

2019/07/17 22:31

Sample002

位置とサイズを設定し、イベントを受け取るfunction Sample002() { const win = new JWF.FrameWindow() //フレームウインドウの作成 win.setTitle('Sample02 位置サイズ指定') //タイトルの設定 win.setSize(100, 100) //サイズの変更 win.setPos(10, 10) //位置指定 const client = win.getClient() //クライアントノードの取得 win.addEventListener('active', (e) => { client.innerText = e.active ? 'アクティブになった' : '非アクティブになった' }) }

2019/07/17 22:31

書き込みアクセスの許可

初期設定ではrootしかディレクトリに書き込めないため、ユーザのアクセス権を設定する必要があるsetfacl -R -m u:ユーザ名:rwx /var/www/htmlデフォルトではaclパッケージが入っていないようなのでコマンドが無いと言われた場合は、以下のコマンドを実行apt -y install acl

2019/07/17 22:31

証明書の定期更新

/etc/cron.d/certbot_updateSHELL=/bin/bash PATH=/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root 0 0 1 * * root certbot renew && systemctl reload nginxcrondの更新systemctl reload cron

2019/07/17 22:31

VirtualHostの設定

server設定でドメイン名とコンテンツを関連付けるファイルは一つにまとめてもかまわないし、server設定ごとに複数に分けることもできる今回は複数に分けて設定していく/etc/nginx/sites-enabled/hogehogeserver { listen 443 ssl http2; ssl_certificate /etc/letsencrypt/live/hogehoge/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/hogehoge/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; server_name hogehoge; root /var/www/html/; } /etc/nginx/sites-enabled/www.hogehogeserver { listen 443 ssl http2; ssl_certificate /etc/letsencrypt/live/hogehoge/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/hogehoge/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; server_name www.hogehoge; root /var/www/www/; } /etc/nginx/sites-enabled/www2.hogehogeserver { listen 443 ssl http2; ssl_certificate /etc/letsencrypt/live/hogehoge/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/hogehoge/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; server_name www2.hogehoge; root /var/www/www2/; }

2019/07/17 22:31

Samples

実動作 https://javascript-windowframework.github.io/jwf_sample01/dist/ソースhttps://github.com/JavaScript-WindowFramework/jwf_sample01/Sample001 Sample002 Sample003 Sample004 Sample005

2019/07/17 22:31

MyDNSの公式プログラムのインストール

cd /var/libsudo git clone https://github.com/disco-v8/DirectEdit.gitsudo chmod u+x /var/lib/DirectEdit/*.phpsudo chmod 600 /var/lib/DirectEdit/txtedit.conf

2019/07/17 22:31

前提条件として必要なもの

certbotphpphp-mbstringgit

2019/07/17 22:31

Sample001

ウインドウを表示するだけfunction Sample001() { const win = new JWF.FrameWindow() //フレームウインドウの作成 win.setTitle('Sample01 ウインドウを表示') //タイトルの設定 win.setPos() //位置を中心に設定 }

2019/07/17 22:31

Let's Encryptによるhttps環境の構築2(自動設定)

こちらはMyDNSの公式プログラムを利用して、ワイルドカードの証明書を自動取得する方法です最小限の労力でhttps化するのなら、こちらが近道です前提条件として必要なもの MyDNSの公式プログラムのインストール MyDNSのアカウント設定証明書の発行

2019/07/17 22:31

プログラムを書き換えてみる

[index.ts]import * as JWF from 'javascript-window-framework' function Main() { const listView = new JWF.ListView({frame:true}) listView.addHeader(['番号','名前','攻撃力']) listView.addItem([1,'竹槍',5]) listView.addItem([2,'棍棒', 10]) listView.addItem([3,'銅の剣', 10]) listView.setPos() listView.addEventListener('itemClick',(e)=>{ const name = listView.getItemText(e.itemIndex,1) const msgBox = new JWF.MessageBox('メッセージ',name+"が選択された") }) } //ページ読み込み時に実行する処理を設定 addEventListener("DOMContentLoaded", Main)

2019/07/17 22:31

ビルドまでの手順

・package.jsonの生成npm -y init・JWFモジュールのインストールnpm i javascript-window-framework・WebPackのインストールnpm -D i webpack webpack-cli typescript ts-loader・TypeScriptの設定ファイルの作成(.tsを使わなければ不要)tsc --init・WebPackの設定ファイルの作成 [webpack.config.js]const path = require('path'); module.exports = { mode: 'production', entry: './index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ // 拡張子 .ts の場合 test: /\.ts$/, // TypeScript をコンパイルする use: "ts-loader" }] } }; ・テストコードの作成 [index.ts]import * as JWF from 'javascript-window-framework' function Main() { const win = new JWF.FrameWindow() //フレームウインドウの作成 win.setTitle('サンプルウインドウ') //タイトルの設定 win.setPos() //位置を中心に設定 const client = win.getClient() //クライアントノードの取得 client.innerText = 'テキスト表示の\n実験' } //ページ読み込み時に実行する処理を設定 addEventListener("DOMContentLoaded", Main)・WebPackでビルドwebpack・初期HTMLの作成 [dist/index.h

2019/07/17 22:31

基本設定

Node.jsが入っていることが前提ですビルドまでの手順プログラムを書き換えてみる

2019/07/17 22:31

AppArmorの無効化

・その場で無効systemctl disable apparmor・起動時に無効 /etc/default/grubの設定を書き換えるちんたらファイル編集するのは面倒なので、コマンド一発で済ませるsed -i '1,/GRUB_CMDLINE_LINUX=""/s/""/"apparmor=0"/' /etc/default/grub

2019/07/17 22:31

ソースコード

https://github.com/JavaScript-WindowFramework/javascript-window-framework

2019/07/17 22:31

npmによるインストール

npm i javascript-window-framework

2019/07/17 22:31

JWF(JavaScript-Window-Framework)

JavaScript(TypeScript)で仮想ウインドウシステムを実現します単純なフレームウインドウの他にListViewやTreeViewの機能も実装済みですこのサイトもこれで開発していますnpmで公開中ですnpmによるインストールソースコード

2019/07/17 22:31

フロントエンド:テスト用サンプル

src/public/main/index.ts///<reference path="../../../dist/public/js/jsw.d.ts"/> //ページ読み込み時に実行する処理を設定 addEventListener("DOMContentLoaded", Main) async function Main(){ const adapter = new JSW.Adapter() const result = await adapter.exec('TestModule.add',10,20) console.log(result) } フロントエンドで動作するJavaScriptの元になるTypeScriptコードです。通信用のアダプタクラスがdist/public/js/jsw.d.tsに含まれているため、最初に定義しておく必要があります。

2019/07/17 22:31

バックエンド:テスト用サンプルモジュール

src/app/modules/TestModule.tsimport * as amf from 'active-module-framework' /** *テストモジュール * * @export * @class TestModule * @extends {amf.Module} */ export class TestModule extends amf.Module { async JS_add(a:number,b:number) { return a+b } } 動作確認用のサンプルモジュールです。必要なければ削除してください。クライアントからのパラメータの受け取りとデータの返却を確認できます。追加で作ったモジュールは全てこのディレクトリを使います。

2019/07/17 22:31

トップページテンプレート

src/template/index.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> [[CSS]] [[SCRIPTS]] </head> <body> </body> </html>トップページへアクセスしたときに利用されるHTMLデータのテンプレートです。必要に応じて書き換えてください。[[CSS]]と[[SCRIPT]]は、dist/public/cssdist/public/jsのファイルを読み出す記述が挿入されます。また、自動的に挿入されたファイルはHTTP2のlinkヘッダが生成され、トップページ転送と同時にクライアントへ配信されます。ただしこの機能の利用にはhttps化が必要です。

2019/07/17 22:31

初期設定ファイル

src/app/index.jsimport * as amf from 'active-module-framework'new amf.Manager({ remotePath: '/', //一般コンテンツのリモートパス execPath: '/', //コマンド実行用リモートパス rootPath: 'dist/public', //一般コンテンツのローカルパス indexPath: 'src/template/index.html', //index.thmlテンプレート cssPath: ['css'], //自動ロード用CSSパス jsPath: ['js'], //一般コンテンツのローカルパス localDBPath: 'dist/db/app.db', //ローカルDBパス modulePath: 'dist/app/modules', //モジュール配置パス jsPriority: ['jsw.js'], //優先JSファイル設定 debug: true, //デバッグ用メッセージ出力 listen: 8080 //受付ポート/UNIXドメインソケット //listen:'dist/sock/app.sock'}) 初期ディレクトリ構成などを変更する場合は、このファイルを設定します。基本的にはこのまま使えますが、nginxと連携させる場合は、UNIXドメインソケットを使うようにlistenを変更してください。

2019/07/17 22:31

ディレクトリ構成

- / - dist (出力ファイルディレクトリ) - app (バックエンド用コンパイル済みディレクトリ) - modules (コンパイル済みモジュール) - db (ローカルデータベース用ディレクトリ) - public (フロントエンド用ファイルディレクトリ) - sock (UNIXドメインソケット用ディレクトリ) - src (ソースコード類) - app (バックエンド用プログラムソース) - index.ts (バックエンド初期パラメータ設定用) - modules (モジュールフォルダ) - public (フロントエンド用ディレクトリ) - main (フロントエンド用メインソース)

2019/07/17 22:31

オブジェクト指向、それは意思の力である

オブジェクト指向にクラスはいらないオブジェクト指向の重要な要素機能の明確な分割とそこで発生する問題意思の力、それがオブジェクト指向だ

2019/07/17 22:31

VisualStudioCodeの設定

プラグインのインストールフォルダを開くデバッグ設定

2019/07/17 22:31

xdebugを有効にする

以下のファイルを追加する/etc/php.d/90-xdebug_custom.inixdebug.remote_enable = 1xdebug.remote_autostart = 1サービスの再起動systemctl restart php-fpm

2019/07/17 22:31

初期化後のデフォルト状態

ディレクトリ構成初期設定ファイルトップページテンプレートバックエンド:テスト用サンプルモジュールフロントエンド:テスト用サンプル

2019/07/17 22:31

オブジェクト指向にクラスはいらない

オブジェクト指向というと必ずと言って良いほど、クラスの解説が入ってくる記事が多い。極端な話をすれば、オブジェクト指向に沿ったプログラミングをするのにクラスは必要ない。アセンブラでプログラムを書いたとしても、オブジェクト指向は実現できるのだ。ただ、クラスが実装されている言語は、オブジェクト指向を目指す上で便利な機能があると言うだけに過ぎない。

2019/07/17 22:31

動作させるまで

基本的にNode.jsとTypeScriptの機能だけで完結しているので、フロントエンドの開発にはWebPackのようなモジュールバンドラを必要としません・インストールnpm install active-module-framework・初期ファイルの設置以下のコマンドで必要なファイルがコピーされますnode_modules/.bin/amf-init・TypeScriptのビルドフロントエンドとバックエンドの初期ファイルを動作可能状態にするために必要ですtsc -b・Watch状態でのビルドファイルの更新と同時にビルドする場合は以下のコマンドを使用してくださいフロントエンド、バックエンドともに監視対象となりますtsc -b -w・起動(起点ファイル) 以下のコマンドで動作しますnode dist/app/index.js・pm2による起動 pm2用の設定ファイルが付属しているので、以下のコマンドで起動可能ですpm2 start・ブラウザによる動作確認デフォルトでは8080番を受付ポートにしていますhttp://localhost:8080/

2019/07/17 22:31

インストール方法

動作させるまで

2019/07/17 22:31

index.ts(フロントエンド側)

JWFのウインドウ生成機能を使ってUIを作成しています ///<reference path="../../../dist/public/js/jwf.d.ts"/> //ページ読み込み時に実行する処理を設定 addEventListener("DOMContentLoaded", Main) function Main() { //通信アダプタの作成 const adapter = new JWF.Adapter() //ウインドウを作成 const window = new JWF.FrameWindow() window.setTitle('サンプルテンプレート') window.setSize(450, 100) window.setPos() //ウインドウクライアントノードの取得とHTMLデータの設定 const client = window.getClient() client.style.padding = '1em' client.innerHTML = `<input> + <input> <button>=</button> <span>？</span>` //各ノードの取得 const nodes = client.querySelectorAll('input,button,span') //ボタンイベントの処理 nodes[2].addEventListener('click', async () => { //Inputタグから内容を取り出す const a = parseInt((nodes[0] as HTMLInputElement).value) const b = parseInt((nodes[1] as HTMLInputElement).value) //サーバにデータを送信し、受信完了まで待つ const result = await adapter.exec('TestModule.add', a, b) //結果を書き込む nodes[3].t

2019/07/17 22:31

動作イメージ

表示しているのはJWFで作成したブラウザ内に生成している仮想ウインドウです内容は、以下のような動きをするサンプルです1 フロントエンドでブラウザ内に仮想ウインドウを作成2 ユーザが入力した値をバックエンド側に送る3 バックエンド側で加算処理し、それをフロントエンド側に戻す 4 戻ってきた値を表示TestModule.ts(バックエンド側) index.ts(フロントエンド側)

2019/07/17 22:31

デフォルトで添付しているサンプル

動作イメージ

2019/07/17 22:31