テックメモ

2017-04-032023-01-20

PowerShell 初期設定

管理者権限でPowerShellを起動

・実行ポリシー確認
Get-ExecutionPolicy

・実行ポリシー
Set-ExecutionPolicy RemoteSigned

Restricted：実行不可
AllSigned：署名付きスクリプトのみ実行可
RemoteSigned：ローカル＋ダウンロードした署名付きスクリプトのみ実行可
Unrestricted：すべてのスクリプト実行可

次に、
New-Item registry::HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\shell\open\command -value ‘”C:\Windows\system32\WindowsPowerShell\v1.0\powershell.exe” “& ”%1””‘ -force
を実行。

2017-04-032024-05-04

Ubuntu シンボリックリンク

シンボリックについて
apacheのconfの場合、
a2dissite、a2ensite
などの専用スクリプトが用意されている。

通常は、
ln -s 実体リンク
で、
ln -s /home/okamura/ruby/asagao/public /home/okamura/www/app1
のよう記述する。

実体もリンクも最後にスラッシュを付けない。
リンクはフォルダではないので、最初から存在してはダメ。

リンク削除
unlink /home/okamura/www/app1

2017-03-292021-11-03

Apache

・インストールされているかどうか
dpkg -l | grep apache

・インストール
sudo apt update
sudo apt install apache2

・起動
sudo systemctl start apache2

(インストール後、起動＋自動起動するようになっている)

・ファイアーウォール(ufw)の設定が必要なら、
sudo ufw allow apache

・名前確認
sudo ufw app list

・バージョン確認
apache2 -v

・パス確認
apachectl -S

・ロードモジュール
apachectl -M

設定ファイル

/etc/apache2
の中にあるファイル。

***-enabled内の.confや.loadファイルを読み込む。
***-enabledは***-availableへのシンボリックリンクが基本。

/etc/apache2/apache2.conf
基本設定ファイル

/etc/apache2/mods-enabled/
/etc/apache2/mods-available/
モジュール(a2enmod, a2dismod)

/etc/apache2/sites-enabled/
/etc/apache2/sites-available/
サイト設定(a2ensite, a2dissite)

/etc/apache2/ports.conf
ポート番号

/etc/apache2/conf-enabled/
/etc/apache2/conf-available/
設定(a2enconf, a2disconf)

＊＊＊

PHP

PHP セキュリティメモ

・モジュールのインストール
sudo apt install libapache2-mod-php
sudo apt install php-mysql

・apache(PHP)のエラー確認
sudo vim /var/log/apache2/error.log

・PDO(MySQL)の有効化

php.ini
sudo vim /etc/php/7.4/apache2/php.ini
以下のコメントアウトを外す。
extension=pdo_mysql

・モジュール(PHP)のテスト

必要なモジュールをインストールすると、設定ファイルは
/etc/apache2/mods-available
に書き込まれる。

書き込まれるのは、
モジュール名.load
モジュール名.conf
の２つ。

使えるモジュール一覧(インストールされたファイルではない)
apt search libapache2-mod
(apt-cache search libapache2-mod)

モジュールのインストール
sudo apt install libapache2-mod-xxx

インストール後、使いたいモジュールは、
sudo /usr/sbin/a2enmod xxx
/etc/apache2/mods-enabled に、mods-available への
シンボリックリンクを作ってくれる。

PHP(libapache2-mod-php)の場合、
/etc/apache2/mods-available
の中に
php7.2.conf
php7.2.load
が書き込まれた。
/etc/apache2/mods-enabled
の中にもavailableへの
php7.2.conf
php7.2.load
2つのリンクが作成された。

無効化
sudo /usr/sbin/a2dismod php7.2

ls /etc/apache2/mods-enabled | grep php
出力なし

有効化
sudo /usr/sbin/a2enmod php7.2

ls /etc/apache2/mods-enabled | grep php
php7.2.conf
php7.2.load

apache設定

ドキュメントルート変更
sudo vim /etc/apache2/apache2.conf
した場合、パーミッションを変更する。
chown -R ubuntu:ubuntu /var/www/html/

apache2.conf

・DefaultRuntimeDir ${APACHE_RUN_DIR}
Base directory for the server run-time files

・PidFile ${APACHE_PID_FILE}
デーモンのプロセス ID をサーバが記録するためのファイル

・Timeout 300
各イベントについて、リクエストを失敗させるまでにサーバが待つ時間を設定

・KeepAlive On
HTTP の持続的な接続を有効にする

・MaxKeepAliveRequests 100
持続的な接続上で許可されるリクエストの数

・KeepAliveTimeout 5
持続的な接続で次のリクエストが来るまでサーバが待つ時間

・User ${APACHE_RUN_USER}
The userid under which the server will answer requests

・Group ${APACHE_RUN_GROUP}
Group under which the server will answer requests

・HostnameLookups Off
クライアントの IP アドレスの DNS ルックアップを有効にする

・ErrorLog ${APACHE_LOG_DIR}/error.log
サーバがエラーをログ収集する場所

・LogLevel warn
ErrorLog の冗長性を制御する

・IncludeOptional mods-enabled/*.load
・IncludeOptional mods-enabled/*.conf
Includes other configuration files from within the server configuration files

・Include ports.conf
サーバ設定ファイル中から他の設定ファイルを取り込む

<Directory /> … </Directory>
指定のファイルシステムのディレクトリとサブディレクトリとのみに適用されるディレクティブを囲む

＊＊＊

以下Directoryの中について。

・Options FollowSymLinks

Options xxx
ディレクトリに対して使用可能な機能を設定する

xxxの部分については以下。

None
何もなし。

All
MultiViews以外の機能が有効。Optionsを設定しない場合と同じ。

ExecCGI
cgiの実行を許可。

FollowSymLinks
シンボリックリンクをたどれる。

Includes
SSI の使用を許可。

IncludesNOEXEC
SSIを許可。SSIから外部cgiを呼び出すのは禁止。

Indexes
DirectoryIndexで指定したファイルが存在しない場合、一覧を表示する。

MultiViews
コンテントネゴシエーションを有効。

SymLinksIfOwnerMatch
シンボリックリンクのリンク先がシンボリックリンクと同じオーナーのある場合のみたどれる。

・AllowOverride None

AllowOverRide xxx
.htaccessで使用できるディレクティブを指定。

xxxの部分については以下。

None
.htaccess では何も設定できない。

All
.htaccess で設定可能なものは全て有効。

AuthConfig
認証関連のディレクティブの使用を許可。

FileInfo
ドキュメントタイプやドキュメントのメタデータを制御するディレクティブの使用を許可。

Indexes
ディレクトリインデックス関連のディレクティブの使用を許可。

Limit
アクセス制御関連のディレクティブの使用を許可。

Options
Optionsディレクティブの使用を許可。

・Require xxx

xxxの部分については以下。

Require all granted
全てのアクセスを許可。

Require all denied
全てのアクセスを拒否。

Require [not] env env-var [env-var]
指定した環境変数が定義されていれば
(not指定時は環境変数が定義されていなければ)アクセスを許可。

Require method http-method [http-method]
Pメソッドが指定されたものである場合はアクセスを許可。

Require valid-user
有効なユーザーの場合はアクセスを許可。

Require ip xxx.xxxx.xxx.xxx
クライアントのIPアドレスが指定されたものである場合はアクセスを許可。

ここまでDirectoryの中について。

＊＊＊

・AccessFileName .htaccess
リクエストを処理するとき、サーバはディレクトリに対して分散設定ファイルが有効になっていれば、そのドキュメントへのパス上にある全てのディレクトリから、ここで指定された名前の一覧の中で最初に見つかったファイルをそれぞれ設定ファイルとして読み込みます。

・<FilesMatch> … </FilesMatch>
正規表現にマッチするファイル名に適用されるディレクティブを囲む。

・LogFormat “%h %l %u %t \”%r\” %>s %O” common
LogFormat “フォーマット” “フォーマット名”

サイトの設定

正しく処理の流れとして、
sites-available/000-default.conf
がテンプレートなので、それをコピーして編集する。

000-default.conf
が有効になっているので以下で無効化。
sudo a2dissite 000-default.conf

コピーしたファイルを有効化。
sudo a2ensite xxx.conf

sites-available/xxx.conf

<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
これが初期設定となっていた。

ちなみに、バーチャルホストの設定はなくてもOKなので、
apache2.conf
の中の、
IncludeOptional sites-enabled/*.conf
をコメントアウトして、apache2.confの中にDocumentRootを記入してもOK。

VirtualHost使う場合、
DocumentRoot,ServerNameが必須。

ここでは使っていないけど、複数のドメインを運用する場合、
ドメイン分のVirtualHostを作成し、ServerNameで指定する。
<VirtualHost *:80>
DocumentRoot /var/www/xxx
ServerName domain.com
ServerAlias www.domain.com
(ServerAliasでアクセスしてきたらServerNameへリダイレクトという感じ)
</VirtualHost>

アクセスの振り分けとしては、
・IPアドレス
・ポート番号
・ドメイン名(ServerName)
で振り分けることができる。
<VirtualHost addr:[port]></VirtualHost>

サブドメインを指定する場合、
<VirtualHost *:80>
DocumentRoot /var/www/xxx
ServerName sub.domain.com
ServerAlias www.sub.domain.com
</VirtualHost>

セキュリティ関連

/etc/apache2/conf-available/security.conf
には、もともと
ServerTokens OS
ServerSignature On
TraceEnable Off
とあった。

もともとのsecurity.confをバックアップし以下を追加。

バージョン情報を隠す(変更)
ServerTokens Prod
ServerSignature Off

トレースメソッドを無効化(そのままでOK)
TraceEnable Off

PHPのバージョンを隠す
Header unset X-Powered-By

ファイルの一覧を表示しない(/etc/apache2/apache2.confを更新)
<Directory /var/www/html>
Options -Indexes
</Directory>

リクエストを制限する(/etc/apache2/apache2.confを更新)
<Directory xxx>
Require method GET POST
</Directory>

他のサイトにframeで埋め込まれないように
Header append X-Frame-Options DENY

ダミーのVirtualHost(先頭に書く)
<VirtualHost *:80>
ServerName dummy
Redirect 404 /
</VirtualHost>

conf-availableの方がsites-availableより先に読み込まれるが、sites-availableにある<VirtualHost>…</VirtualHost>にはServerNameがなかったので、ダミーを作る場合、sites-availableにServerNameが必要。

HTTP_PROXYの書換え禁止
RequestHeader unset Proxy

ブラウザがXSSをブロック
Header set X-XSS-Protection “1; mode=block”

ブラウザがContent-Typeを無視することを禁止
Header set X-Content-Type-Options nosniff

リクエストボディのサイズ指定 (10MB)
LimitRequestBody 10485760

＊＊＊

設定ファイルのエラーチェック
apachectl configtest

Invalid command ‘Header’, perhaps misspelled or defined by a module not included in the server configuration
というエラーがでたら。
sudo a2enmod headers
sudo /etc/init.d/apache2 restart

PHP関連

・MPM

apachectl -V
worker, preforkがあり基本preforkとなっている。
mod_phpはpreforkなので、workerにしたい場合、PHPはFastCGIで利用。

2017-03-282020-05-15

wget/curl コマンド

curl

curl -O “http://xxx.com/[0-20].pdf”

-O　は表示ではなくファイル名そのまま。(ちなみにwgetで-Oは別名で保存)
-o　は別名で保存する。
-L　リダイレクトを追う。
-C – レジューム

レジューム保存
curl -o out.mp4 -L -C – http://

wget

-c　ダウンロードを続きから。
-t　リトライ回数指定する。(0は無制限)
-O　別名で保存する。
–retry-connrefused　接続拒否無視

wget -c -t 0 –retry-connrefused xxx

2017-03-282020-04-30

Chrome拡張機能ブログ検索

以下の3つのファイルを作成し、フォルダに入れてChrome拡張のページにドラッグするだけ。

manifest.json

{
  "manifest_version": 2,
  "name": "ブログ検索",
  "version": "0.0.1",
  "browser_action":{
    "default_popup": "popup.html"
  }
}

{

"manifest_version": 2,

"name": "ブログ検索",

"version": "0.0.1",

"browser_action":{

"default_popup": "popup.html"

}

script.js

$(document).keydown(function(e){
    if(e.keyCode == 13){
        chrome.tabs.create({
            url: "https://www.google.co.jp/search?hl=ja&as_sitesearch=http://okamurax.com/&q=" + $("#a").val()
        });
    }
});

$(document).keydown(function(e){

if(e.keyCode == 13){

chrome.tabs.create({

url: "https://www.google.co.jp/search?hl=ja&as_sitesearch=http://okamurax.com/&q=" + $("#a").val()

});

}

});

popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
      <input type="text" id="a" />
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2017-03-212022-06-01

C# SQLite 接続

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

using System.Data.SQLite;

namespace PersonalManager
{
    public partial class Form1 : Form
    {
        private string connectionString = "Data Source=" + Application.StartupPath + @"\data.sqlite";

        public Form1()
        {
            InitializeComponent();

            button1.Click += (s, e) =>
            {
                ExecuteNonQuery("create table if not exists employee(" +
                    "id integer not null primary key autoincrement," +
                    "name text" +
                    ")");

                ExecuteNonQuery("insert into employee (name) values ('taro')");

                DataTable dt = ExecuteQuery("select * from employee");

                List<Model> models = new List<Model>();
                for (int r = 0; r < dt.Rows.Count; r++)
                {
                    models.Add(new Model()
                    {
                        id = dt.Rows[r]["id"].ToString(),
                        name = dt.Rows[r]["name"].ToString()
                    });
                }
                dataGridView1.DataSource = models;
            };
        }

        private void ExecuteNonQuery(string commandText)
        {
            using (SQLiteConnection con = new SQLiteConnection(connectionString))
            {
                con.Open();
                using (SQLiteCommand cmd = new SQLiteCommand(con))
                {
                    try
                    {
                        cmd.CommandText = commandText;
                        cmd.ExecuteNonQuery();
                    }
                    catch (Exception e)
                    {
                        MessageBox.Show(e.Message);
                    }
                }
            }
        }

        private void ExecuteNonQuery(List<string> commandTextList)
        {
            using (SQLiteConnection con = new SQLiteConnection(connectionString))
            {
                con.Open();
                using (SQLiteCommand cmd = new SQLiteCommand(con))
                {
                    cmd.Transaction = con.BeginTransaction();

                    try
                    {
                        foreach (string sql in commandTextList)
                        {
                            cmd.CommandText = sql;
                            cmd.ExecuteNonQuery();
                        }
                        cmd.Transaction.Commit();
                    }
                    catch (Exception e)
                    {
                        MessageBox.Show(e.Message);
                        cmd.Transaction.Rollback();
                    }
                }
            }
        }

        private DataTable ExecuteQuery(string commandText)
        {
            using (SQLiteConnection con = new SQLiteConnection(connectionString))
            {
                try
                {
                    con.Open();
                    using (SQLiteCommand cmd = new SQLiteCommand(con))
                    {
                        cmd.CommandText = commandText;

                        using (SQLiteDataReader reader = cmd.ExecuteReader())
                        {
                            DataTable dt = new DataTable();
                            dt.Load(reader);
                            return dt;
                        }
                    }
                }
                catch (Exception e)
                {
                    MessageBox.Show(e.Message);
                    return new DataTable();
                }
            }
        }
    }

    class Model
    {
        public string id { get; set; }
        public string name { get; set; }

    }
        
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows.Forms;

using System.Data.SQLite;

namespace PersonalManager

{

public partial class Form1 : Form

{

private string connectionString = "Data Source=" + Application.StartupPath + @"\data.sqlite";

public Form1()

{

InitializeComponent();

button1.Click += (s, e) =>

{

ExecuteNonQuery("create table if not exists employee(" +

"id integer not null primary key autoincrement," +

"name text" +

")");

ExecuteNonQuery("insert into employee (name) values ('taro')");

DataTable dt = ExecuteQuery("select * from employee");

List<Model> models = new List<Model>();

for (int r = 0; r < dt.Rows.Count; r++)

{

models.Add(new Model()

{

id = dt.Rows[r]["id"].ToString(),

name = dt.Rows[r]["name"].ToString()

});

}

dataGridView1.DataSource = models;

};

}

private void ExecuteNonQuery(string commandText)

{

using (SQLiteConnection con = new SQLiteConnection(connectionString))

{

con.Open();

using (SQLiteCommand cmd = new SQLiteCommand(con))

{

try

{

cmd.CommandText = commandText;

cmd.ExecuteNonQuery();

}

catch (Exception e)

{

MessageBox.Show(e.Message);

}

private void ExecuteNonQuery(List<string> commandTextList)

{

using (SQLiteConnection con = new SQLiteConnection(connectionString))

{

con.Open();

using (SQLiteCommand cmd = new SQLiteCommand(con))

{

cmd.Transaction = con.BeginTransaction();

try

{

foreach (string sql in commandTextList)

{

cmd.CommandText = sql;

cmd.ExecuteNonQuery();

}

cmd.Transaction.Commit();

}

catch (Exception e)

{

MessageBox.Show(e.Message);

cmd.Transaction.Rollback();

}

private DataTable ExecuteQuery(string commandText)

{

using (SQLiteConnection con = new SQLiteConnection(connectionString))

{

try

{

con.Open();

using (SQLiteCommand cmd = new SQLiteCommand(con))

{

cmd.CommandText = commandText;

using (SQLiteDataReader reader = cmd.ExecuteReader())

{

DataTable dt = new DataTable();

dt.Load(reader);

return dt;

}

catch (Exception e)

{

MessageBox.Show(e.Message);

return new DataTable();

}

class Model

{

public string id { get; set; }

public string name { get; set; }

}

2017-03-212020-11-21

CSSメモ

数年前の記事をベースに色々追加しているので内容が古い。

position

static：
位置指定できない(top/bottom/left/rightが使えない)static以外は基準となれる。
relative：
top/bottom/left/rightが使える。
abusolute：
祖先の左上基準。なければbodyの左上から。
fixed：
スクロールしても固定。

abusolute,fixedはfloat:noneになってしまう。
relativeはtop/bottom/left/rightとfloatを流用できるが、通常はstatic + floatとおぼえておく。

floatクリア

floatの親要素に以下。

/* 従来 */

.floatcontainer:after{
content: "."; 
display: block; 
height: 0; 
font-size:0;	
clear: both; 
visibility:hidden;
}
	
.floatcontainer{
display: inline-block;
} 

* html .floatcontainer {
height: 1%;
}
.floatcontainer{
display:block;
}

/* あるいは以下 */

.clearfix:after {
content: "";
clear: both;
display: block;
}

/* 従来 */

.floatcontainer:after{

content: ".";

display: block;

height: 0;

font-size:0;

clear: both;

visibility:hidden;

}

.floatcontainer{

display: inline-block;

}

* html .floatcontainer {

height: 1%;

}

.floatcontainer{

display:block;

}

/* あるいは以下 */

.clearfix:after {

content: "";

clear: both;

display: block;

}

センタリング

margin: 0 auto
widthは必要。

margin相殺

marginは重なると相殺される。
大きい値が優先。

ネストして親と子が同じ方向にmarginがあった場合も
相殺される。(親にborderがあったりpaddingがあるとおきない。)

高さ100%

/* 従来 */

html, body{
height:100%
}
#container {
min-height:100%
height:100% /* min-heightに対応していないブラウザ用 */
}
body > #container{
height: auto /* containerの要素全体の高さがbodyタグより大きくなった場合 */
}

/* あるいは以下 */

html,body{
height:100%
}
#container{
height: auto;
min-height:100%;
}

/* 従来 */

html, body{

height:100%

}

#container {

min-height:100%

height:100% /* min-heightに対応していないブラウザ用 */

}

body > #container{

height: auto /* containerの要素全体の高さがbodyタグより大きくなった場合 */

}

/* あるいは以下 */

html,body{

height:100%

}

#container{

height: auto;

min-height:100%;

}

Chromeなどでキャッシュの影響で直ぐに反映されない場合、デベロッパーツールを表示し、リロードボタンの上で右クリックするとキャッシュをクリアできる。

作り方

上から、
<header><main><footer>
が基本。

<section>にabcのようなID/Class名を付けた場合、
その中の<div>などはabc-xxxのような形で統一する。

・1カラムの幅100%作り方

①<section>
width 100%
の中に
②<div id=”xxx-inner”>
max-width: 000px;
margin: 0 auto;
を入れる
②の中で調整する場合、
さらにその中に③<div>を入れる。

テキストの位置は、②か③の中で<h1～>や<p>として入れる。

①<section>が画像の場合、
background-image: url(‘1.jpg’);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 000px;

横並びにしたい場合、
<ul>の場合、
<ul>に
display: flex;
flex-wrap: wrap;
<li>に
display: block;
width: x%;

<div>の場合も同じ、
親<div>に
display: flex;
flex-wrap: wrap;
子<div>に
width: x%;

・余白調整

それぞれの<section>の上下にpaddingを入れる。
あとは上の要素からmargin-bottomで調整する。

・スマホの向きに合わせた文字サイズの自動調整をしない

body{
-webkit-text-size-adjust: 100%;
}

body{

-webkit-text-size-adjust: 100%;

}

・フェードイン

body {
animation: fadeIn 4s ease 0s 1 normal;
-webkit-animation: fadeIn 4s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

html {
visibility: hidden;
}

html.wf-active,
html.loading-delay {
visibility: visible;
}

body {

animation: fadeIn 4s ease 0s 1 normal;

-webkit-animation: fadeIn 4s ease 0s 1 normal;

}

@keyframes fadeIn {

0% {opacity: 0}

100% {opacity: 1}

}

@-webkit-keyframes fadeIn {

0% {opacity: 0}

100% {opacity: 1}

}

html {

visibility: hidden;

}

html.wf-active,

html.loading-delay {

visibility: visible;

}

・iOSのinputリセット

input,select{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}

select {
background-image: url(./arrow.svg);
background-repeat: no-repeat;
background-size: 12px 10px;
background-position: right 10px center;
}

input,select{

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;

}

select {

background-repeat: no-repeat;

background-size: 12px 10px;

background-position: right 10px center;

}

2017-03-212020-05-04

Vue.js 入門

ｊｓというとフレームワークが色々あるので、今回はVue.jsを少しさわってみた。

//--------------------------------------------------------

//Vueインスタンス生成

var vm = new Vue({})

//--------------------------------------------------------

//拡張オプションを定義したコンストラクタ拡張からのVueインスタンス生成

var v = Vue.extend({})
var vm = new v()

//--------------------------------------------------------

//Vueインスタンスプロパティのプロパティプロキシ

var prop = {age: 99}

var vm = new Vue({
  data: prop
})

console.log(vm.age); //00
vm.age = 98;
console.log(prop.age); //98

//--------------------------------------------------------

//インスタンスメソッド$watch

<div id="app">
  <input type="text" v-model="age">
</div>

<script>
var vm = new Vue({
  el: "#app",
  data:{
    age: 20
  }
})
vm.$watch("age",function(){
  alert("");
});
</script>

//--------------------------------------------------------

//グローバルコンポーネント

<div id="app">
  <hello></hello>
</div>

<script>
//グローバルコンポーネント
Vue.component("Hello",{
  template: "<p>Hello World</p>"
})

//ルートインスタンス
new Vue({
  el:"#app"
})
</script>

//--------------------------------------------------------

//ローカルコンポーネント

<div id="app">
  <my-comp></my-comp>
</div>

<script>

var tmp = Vue.extend({
  template: "<p>Hello World</p>"
})

new Vue({
  el:"#app",
  components: {
    "my-comp": tmp
  }
})

</script>

//--------------------------------------------------------

//コンポーネントプロパティ

<div id="app">
  <child msg="hey"></child>
</div>

<script>

//プロパティ宣言
Vue.component("child",{
  props: ["msg"],
  template: "<span>{{ msg }}</span>"
})

new Vue({
  el:"#app"
  })

</script>

//--------------------------------------------------------

//動的なコンポーネント

<body>

  <div id="app">
  <component v-bind:is="currentView"></component>
  </div>

</body>

<script>

  Vue.component("logincomp",{
    template: '<p>hey</p>'
  })

  new Vue({
    el: "#app",
    data: {
      currentView: "logincomp"
    }

  })

</script>

//--------------------------------------------------------

//動的なコンポーネント
//複数の呼び出し方

<body>

<div id="app">
  <p>h or e or c</p>
  <input type="text" v-model="currentView"><br>
  <component v-bind:is="currentView"></component>
</div>

</body>

<script>

var tmp = Vue.extend({
  template: "<p>e !!!</p>"
})

  new Vue({
    el: "#app",
    data: {
      currentView: "h"
    },
    components:{ //テンプレート定義方法
      h: { template: "<p>h !!!</p>" },
      e: tmp,
      c: { template: "#c"}
    }

  })

</script>

<script type="text/x-template" id="c">
<p>c !!!</p>
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

//--------------------------------------------------------

//Vueインスタンス生成

var vm = new Vue({})

//--------------------------------------------------------

//拡張オプションを定義したコンストラクタ拡張からのVueインスタンス生成

var v = Vue.extend({})

var vm = new v()

//--------------------------------------------------------

//Vueインスタンスプロパティのプロパティプロキシ

var prop = {age: 99}

var vm = new Vue({

data: prop

})

console.log(vm.age); //00

vm.age = 98;

console.log(prop.age); //98

//--------------------------------------------------------

//インスタンスメソッド$watch

</div>

var vm = new Vue({

el: "#app",

data:{

age: 20

}

})

vm.$watch("age",function(){

alert("");

});

</script>

//--------------------------------------------------------

//グローバルコンポーネント

</div>

//グローバルコンポーネント

Vue.component("Hello",{

})

//ルートインスタンス

new Vue({

el:"#app"

})

</script>

//--------------------------------------------------------

//ローカルコンポーネント

<my-comp></my-comp>

</div>

var tmp = Vue.extend({

})

new Vue({

el:"#app",

components: {

"my-comp": tmp

}

})

</script>

//--------------------------------------------------------

//コンポーネントプロパティ

</div>

//プロパティ宣言

Vue.component("child",{

props: ["msg"],

})

new Vue({

el:"#app"

})

</script>

//--------------------------------------------------------

//動的なコンポーネント

<body>

</div>

</body>

Vue.component("logincomp",{

})

new Vue({

el: "#app",

data: {

currentView: "logincomp"

}

})

</script>

//--------------------------------------------------------

//動的なコンポーネント

//複数の呼び出し方

<body>

</div>

</body>

var tmp = Vue.extend({

})

new Vue({

el: "#app",

data: {

currentView: "h"

components:{ //テンプレート定義方法

h: { template: "<p>h !!!</p>" },

e: tmp,

c: { template: "#c"}

}

})

</script>

</script>

適当に色々書いてみたもの。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script src="vue.min.js"></script>

<style>
  .rd{
    background-color: red;
  }
</style>
</head>

<body>

<div id="box" v-bind:style="s" v-on:click="alert" v-bind:class="{ bk: isBk, rd: isRd }">
</div>

<div id="app">
  <input type="button" value="ClickMe!" v-on:click="SayHello"><br>
  <p>h or e or c を入力最初はeは空ボタンを押した後は値が入る</p>
  <input type="text" v-model="currentView"><br>
  <component v-bind:is="currentView"></component>

  <div id="tbl" v-bind:style="styleObject">
    table
  </div>
</div>

</body>

<script>

  var tbl = "<table>";

  for(var r=1; r<=10; r++){
    tbl += "<tr class='r" + r +"'>"
    for(var c=1; c<=5; c++){
      tbl += "<td class='c" + c + "'>○</td>";
    }
    tbl += "</tr>"
  }
  tbl += "</table>";

  var e = document.getElementById("tbl");
  e.innerHTML = tbl;

</script>

<script>

new Vue({
  el:"#box",
  
  methods:{
    alert:function(){
      this.isRd = true; //クラス変更する。
      alert("");
    }
  },
  data:{
    s:{
      border: "3px solid black",
      width: "30px",
      height: "30px"
    },
    isBk: false,
    isRd: false
  }
})

new Vue({
  el: "#tbl",
  data:{
    styleObject:{
      fontSize: "32px"
    }
  },
  methods:{
    bom: function(){
      alert("")
    }
  }
})


  //メインインスタンスから呼ばれるコンポーネント定義
  var tmp = Vue.extend({
    props:["msg"],
    created: function(){
      alert("created");
      this.msg = "hello e !!! ";
      //ここでvar msg = "xxx"としてもテンプレートでは使えない。
    },
    template: "<p>{{ buff }}</p>"
  })

  new Vue({
    el: "#app",
    data: {
      currentView: "h"
    },
    props:["buff"], //ここのbuffはtmp他のインスタンスからでも呼べる。
    components:{ //テンプレート定義方法
      h: { template: "<p>h !!!</p>" },
      e: tmp,
      c: { template: "#c"}
    },
    methods: {
      SayHello: function(){
        buff = "hello Vue !";
        alert(buff);
      }
    }

  })

</script>

<script type="text/x-template" id="c">
<p>c !!!</p>
</script>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

<!DOCTYPE html>

<head>

<style>

.rd{

background-color: red;

}

</style>

</head>

<body>

</div>

<p>h or e or c を入力最初はeは空ボタンを押した後は値が入る</p>

table

</div>

</body>

var tbl = "<table>";

for(var r=1; r<=10; r++){

tbl += "<tr class='r" + r +"'>"

for(var c=1; c<=5; c++){

tbl += "<td class='c" + c + "'>○</td>";

}

tbl += "</tr>"

}

tbl += "</table>";

var e = document.getElementById("tbl");

e.innerHTML = tbl;

</script>

new Vue({

el:"#box",

methods:{

alert:function(){

this.isRd = true; //クラス変更する。

alert("");

}

data:{

s:{

border: "3px solid black",

width: "30px",

height: "30px"

isBk: false,

isRd: false

}

})

new Vue({

el: "#tbl",

data:{

styleObject:{

fontSize: "32px"

}

methods:{

bom: function(){

alert("")

}

})

//メインインスタンスから呼ばれるコンポーネント定義

var tmp = Vue.extend({

props:["msg"],

created: function(){

alert("created");

this.msg = "hello e !!! ";

//ここでvar msg = "xxx"としてもテンプレートでは使えない。

})

new Vue({

el: "#app",

data: {

currentView: "h"

props:["buff"], //ここのbuffはtmp他のインスタンスからでも呼べる。

components:{ //テンプレート定義方法

h: { template: "<p>h !!!</p>" },

e: tmp,

c: { template: "#c"}

methods: {

SayHello: function(){

buff = "hello Vue !";

alert(buff);

}

})

</script>

</script>

</html>

json展開、axiosでpost

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
<input type="button" v-on:click="fetchData" value="Get">
<input type="text" v-bind:value="status">
<input type="range" max="1" min="0" step="0.25" v-model="v">
<span>{{ v }}</span>

<table>
    <tr v-for="i in js.data" v-bind:id="i.id">
        <td>{{ i.name }}</td><td>{{ i.age }}</td><td>{{ i.addr }}</td>
    </tr>
</table>

</div>

<script>
let js = {
"data":[
    {
    "id": 1,
    "name": "taro",
    "age": 20,
    "addr": "tokyo",
    },
    {
    "id": 2,
    "name": "jiro",
    "age": 30,
    "addr": "kanagawa",
    }
]};

new Vue({
    el: '#app',
    data:{
        status,
        v: 0,
        js,
    },
    methods:{
        fetchData(){
            axios
            .get('https://api.coindesk.com/v1/bpi/currentprice.json')
            .then(response => {
                console.log(response)
                this.status = response.status
            })
        }
    } 
})

</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>title</title>

</head>

<body>

<table>

</tr>

</table>

</div>

let js = {

"data":[

{

"id": 1,

"name": "taro",

"age": 20,

"addr": "tokyo",

{

"id": 2,

"name": "jiro",

"age": 30,

"addr": "kanagawa",

}

]};

new Vue({

el: '#app',

data:{

status,

v: 0,

js,

methods:{

fetchData(){

axios

.get('https://api.coindesk.com/v1/bpi/currentprice.json')

.then(response => {

console.log(response)

this.status = response.status

})

}

})

</script>

</body>

</html>

2017-03-162020-05-06

フロント開発環境色々

HTML/CSS/JSなどフロントは数年前にちょっと勉強しただけでだいぶ忘れてしまったので復習をする。
まずは環境構築から。

エディタ

使うエディタはVSCodeとした。補完が効くので助かる。
Vim拡張機能を入れてしばらく使ったがやめた。そのままでも不便がないぐらいのショーットカットがあるので、設定は少しだけ。

VSCode設定

ショートカット追加
{“key”: “ctrl+i”,”command”: “editor.action.jumpToBracket”}

ユーザー設定
minimapは1.10から

{
"php.validate.executablePath": "C:\\Users\\xxx\\Desktop\\xampp\\php\\php.exe",
"editor.minimap.enabled": true,
"editor.tabSize": 2,
"editor.fontSize": 16,
"workbench.iconTheme": "vs-seti"
}

{

"php.validate.executablePath": "C:\\Users\\xxx\\Desktop\\xampp\\php\\php.exe",

"editor.minimap.enabled": true,

"editor.tabSize": 2,

"editor.fontSize": 16,

"workbench.iconTheme": "vs-seti"

}

VSCodeショートカット

Ctrl + Shift + L
選択中の箇所を同時編集(マルチカーソル)

Ctrl + i
対応括弧に移動。

Ctrl + /
コメントトグル

Ctrl + P
ファイル検索して開く

Alt + Up/Down
行を上下移動

Alt + Shift + Up/Down
行を上下コピー

Alt + Shift + ドラッグ
矩形選択

Alt + クリック
マルチカーソル

Ctrl + Shift + k
行の削除

Ctrl + Shift + \
対応する括弧

Ctrl + ]
行にインデントを追加

Ctrl + [
行のインデントを削除

sass(scss)

$で変数。#{}で変数展開。変数には型もある。

組み込みの関数もあり、自作もできる。
@function name($arg) {
@return returnValue
}

ループ処理
@for $i from 0 to 10 {
}

条件分岐
@if $arg == 0 {
}

などなど便利な機能がある。以下適当に記述してみたもの。

$mainColor: #991100;
$subColor: #884400;

@mixin mixBorder($color)
{
    border: 1px $color solid;
}

.DivClass
{
    background-color: $subColor;
    @include mixBorder($mainColor);
}

@for $i from 1 to 10
{
    @if $i % 2 == 0
    {
        #tr-#{$i}{ color: black; border: #{$i}px solid black; }
    }
    @else if $i % 2 == 1
    {
        #tr-#{$i}{ color: black; border: #{$i}px solid grey; }
    }
}

@each $var in taro,jiro,saburo
{
    ##{$var}{color:black;}
    .name-#{$var}{color:black;}
}

#header
{
    @extend .DivClass;
}

div
{
    @extend .DivClass;
}

#container
{
    width: 960px;
    height: 1200px;
    margin: 0 auto;
}

#header > ul > li
{
    font-size: 25px;
    list-style: none;
    display: inline;
    a
    {
        text-decoration: none;
    }
}

$mainColor: #991100;

$subColor: #884400;

@mixin mixBorder($color)

{

border: 1px $color solid;

}

.DivClass

{

background-color: $subColor;

@include mixBorder($mainColor);

}

@for $i from 1 to 10

{

@if $i % 2 == 0

{

#tr-#{$i}{ color: black; border: #{$i}px solid black; }

}

@else if $i % 2 == 1

{

#tr-#{$i}{ color: black; border: #{$i}px solid grey; }

}

@each $var in taro,jiro,saburo

{

##{$var}{color:black;}

.name-#{$var}{color:black;}

}

#header

{

@extend .DivClass;

}

div

{

@extend .DivClass;

}

#container

{

width: 960px;

height: 1200px;

margin: 0 auto;

}

#header > ul > li

{

font-size: 25px;

list-style: none;

display: inline;

{

text-decoration: none;

}

VSCodeタスクでsass(scss)コンパイル

Rubyは入っているので、
gem install sass
とする。

バージョン確認。
sass -v

タスク作成は、
Ctrl + Shift + P
でパレットを開き、
Configure Task Runner
と入力し、othersを選ぶ。

そうすると、task.jsonができるので、
“version”: “0.1.0”,
“command”: “sass”,
“isShellCommand”: true,
“args”: [“test.scss”,”test.css”],
“showOutput”: “always”
のように記述する。

タスクランナーの実行は、
Ctrl + Shift + B
と入力する。

tasks.jsonはプロジェクトフォルダの中にある.vscodeの中にできる。
プロジェクトとは、サイドバーで開いているフォルダのこと。

タスクランナーで複数コマンドを渡したい場合

上記はscssコマンドだけだが、他にも色々したい場合。
ここではpowershell。(UTF-8で日本語入ると動かないので注意)

自動でサーバーに転送したい、chromeで開きたい等。
https://github.com/PowerShell/Win32-OpenSSH/releases
からWin版のSSHを落とし、フォルダの中から
ssh.exe, scp.exe
をコピーしておく。
鍵ファイルもコピーして、ps1と同じ場所に置く。

以下のようにすると、sassをコンパイルして、htmlとともにサーバーに転送し、そのURLを開く。
(Chromeのタブは増えてしまうが)

c.ps1

# $PSVersionTable
# scssのコンパイル
# scss style.scss style.css

# Chromeで開く(ローカル)
 $file = "index3.html"
 $path = Split-Path $MyInvocation.MyCommand.Path -Parent
 Start-Process -FilePath "chrome" -ArgumentList $path"/"$file

<# 拡張子で判断して複数同時にChromeで開く(ローカル)
$path = Split-Path $MyInvocation.MyCommand.Path -Parent
foreach($file in Get-ChildItem -Filter *.html -Path $path -Name){
    Write-Host $path"/"$file;
    Start-Process -FilePath "chrome" -ArgumentList $path"/"$file
}
#>

<# scpでサーバーへ転送
$url = "http://192.168.102.15:3000/"
$usr = "okamura"
$remoteHost = "192.168.102.15"
$remotePath = "/home/okamura/www/"
$key = "ThinkPad.key"
$files = (
    "index2.html",
    "vue.min.js"
    )
$localPath = Split-Path $MyInvocation.MyCommand.Path -Parent
foreach($file in $files){
    # Write-Host $usr"@"$ip":"$url
    ./scp.exe -P 2299 -i $key $localPath"/"$file $usr"@"$remoteHost":"$remotePath
}
Start-Process -FilePath "chrome" -ArgumentList $url"/"$files[0]
#>

# read-host

# $PSVersionTable

# scssのコンパイル

# scss style.scss style.css

# Chromeで開く(ローカル)

$file = "index3.html"

$path = Split-Path $MyInvocation.MyCommand.Path -Parent

Start-Process -FilePath "chrome" -ArgumentList $path"/"$file

<# 拡張子で判断して複数同時にChromeで開く(ローカル)

$path = Split-Path $MyInvocation.MyCommand.Path -Parent

foreach($file in Get-ChildItem -Filter *.html -Path $path -Name){

Write-Host $path"/"$file;

Start-Process -FilePath "chrome" -ArgumentList $path"/"$file

}

<# scpでサーバーへ転送

$url = "http://192.168.102.15:3000/"

$usr = "okamura"

$remoteHost = "192.168.102.15"

$remotePath = "/home/okamura/www/"

$key = "ThinkPad.key"

$files = (

"index2.html",

"vue.min.js"

)

$localPath = Split-Path $MyInvocation.MyCommand.Path -Parent

foreach($file in $files){

# Write-Host $usr"@"$ip":"$url

./scp.exe -P 2299 -i $key $localPath"/"$file $usr"@"$remoteHost":"$remotePath

}

Start-Process -FilePath "chrome" -ArgumentList $url"/"$files[0]

# read-host

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "start",
    "isShellCommand": true,
    "args": ["powershell","./c.ps1"],
    "showOutput": "always"
}

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "0.1.0",

"command": "start",

"isShellCommand": true,

"args": ["powershell","./c.ps1"],

"showOutput": "always"

}

Emmet

VSCodeだと標準で入っている。
Tabキーで展開できる。

マークダウン

マークダウンを使う場合、
Ctrl+Shift+V
でプレビューできる。

Debugger for Chorme

拡張機能でChromeと検索すると出て来るのでインスト。
サイトバーのデバッグを開き、再生すると、launch.jsonができるので接続設定を記述する。

PowerShell 初期設定

Excel 最適在庫量、発注点法、標準偏差

Ubuntu シンボリックリンク

Ubuntu Apache(PHP+MySQL) 設定

Apache

設定ファイル

PHP

apache設定

apache2.conf

サイトの設定

sites-available/xxx.conf

セキュリティ関連

PHP関連

wget/curl コマンド

curl

wget

Chrome拡張機能ブログ検索

C# SQLite 接続

CSSメモ

position

floatクリア

センタリング

margin相殺

高さ100%

作り方

Vue.js 入門

フロント開発環境色々

エディタ

VSCode設定

VSCodeショートカット

sass(scss)

VSCodeタスクでsass(scss)コンパイル

タスクランナーで複数コマンドを渡したい場合

Emmet

マークダウン

Debugger for Chorme