Quantcast
Channel: プログラム の個人的なメモ
Viewing all 860 articles
Browse latest View live

【HTML】タイムライン を表示するには...

$
0
0

■ はじめに

 * タイムライン(Timeline)を表示する方法を考える

■ Google Charts

 * 商用利用

公式サイト

https://developers.google.com/chart/interactive/docs/gallery/timeline

動画レッスン

タイムラインはないがGoogle Chartsの基礎を学べる
https://dotinstall.com/lessons/basic_chart_tools_v2

■ Flotr2

公式サイト

http://humblesoftware.com/flotr2/#!basic-timeline


■ ツールなしで実装

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #e5e5d1 solid;
    padding-left: 30px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #6fc173;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
  }
}
</style>
</head>
<body>
<ul class="timeline">
  <li>
    <p class="timeline-date">2011年1月</p>
    <div class="timeline-content">
      <h3>TITLE1</h3>
      <p>DETAIL1</p>
    </div>
  </li>
  <li>
    <p class="timeline-date">2012年2月</p>
    <div class="timeline-content">
      <h3>TITLE2</h3>
      <p>DETAIL2</p>
    </div>
  </li>
  <li>
    <p class="timeline-date">2013年3月</p>
    <div class="timeline-content">
      <h3>TITLE3</h3>
      <p>DETAIL3</p>
    </div>
  </li>
</ul>
</body>
</html>

参考サイト

https://www.webcreatorbox.com/tech/css-timeline

【JS】 Google Charts [2] ~ 棒グラフ編 ~

$
0
0

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37572608.html
の続き。
今度は、棒グラフを作成する

公式サイトのサンプルを活用しながらやるといいかも
https://developers.google.com/chart/interactive/docs/gallery/barchart#examples

■ サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo for Google Charts</title>
</head>
<body>
<div id="targetChart">

</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
(function() {
  'use strict';
  
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the bar chart, passes in the data and draws it.
  function drawChart() {
    // Set chart options
    var options = {
      'title': 'Demo for Bar Chart',
      'width': 500,
      'height': 300,
      colors: ['#b0120a', '#ffab91'],
      hAxis: {
       title: 'Competition Population',
       minValue: 0
      },
      vAxis: {
        title: 'Sports'
      },
      animation: {
        startup: true,
        duration: 800,
        esaing: 'inAndOut'
      },
      // 積み上げ
      //isStacked: true
      // 積み上げ(割合)
      //isStacked: 'percent'
    };
    
    // Create the data table.
    var data = new google.visualization.arrayToDataTable([
      ['Sports', 'Age : 05-12', 'Age : 12-18'],
      ['Soccer', 46, 32],
      ['Baseball', 31, 26],
      ['Basketball', 76, 54],
      ['Tennis', 17, 8]
    ]);
    
    // Instantiate and draw our chart, passing in some options.
    var target = document.getElementById('targetChart');
    var chart = new google.visualization.BarChart(target);
    chart.draw(data, options);
  }
})();
</script>
</body>
</html>

■ 補足

【1】縦棒グラフにするには...

google.visualization.ColumnChart() にする
var chart = new google.visualization.ColumnChart(target);

関連記事

【JS】 Google Charts [1] ~ 円グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572608.html

【JS】 Google Charts [3] ~ 折れ線グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572930.html

【JS】 Google Charts [4] ~ タイムライン編 ~

https://blogs.yahoo.co.jp/dk521123/37574625.html

【JS】 Google Charts [3] ~ 折れ線グラフ編 ~

$
0
0

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37572608.html
https://blogs.yahoo.co.jp/dk521123/37572794.html
の続き。
今度は、折れ線グラフを作成する

公式サイトのサンプルを活用しながらやるといいかも
https://developers.google.com/chart/interactive/docs/gallery/linechart#examples

■ サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo for Google Charts</title>
</head>
<body>
<div id="targetChart">

</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
(function() {
  'use strict';
  
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the Line chart, passes in the data and draws it.
  function drawChart() {
    // Set chart options
    var options = {
      'title': 'Demo for Line Chart',
      'width': 500,
      'height': 300,
      hAxis: {'title': 'Year'},
      vAxis: {'title': 'Population'},
      // 緩やかなになる
      curveType: 'function',
      pointSize: 5,
      pointShape: 'square'
    };
    
    // Create the data table.
    var data = new google.visualization.arrayToDataTable([
      ['Population', 'Age : 05-12', 'Age : 12-18'],
      ['2015', 46, 32],
      ['2016', 31, 26],
      ['2017', 76, 54],
      ['2018', 17, 8]
    ]);
    
    // Instantiate and draw our chart, passing in some options.
    var target = document.getElementById('targetChart');
    var chart = new google.visualization.LineChart(target);
    chart.draw(data, options);
  }
})();
</script>
</body>
</html>

■ 補足:グラフに説明をつける

 * Roleを使う

サンプル(抜粋)

// Create the data table.
var data = new google.visualization.arrayToDataTable([
  ['Population', 'Age : 05-12', {role: 'annotation'}, {role: 'certainty'}, 'Age : 12-18', {role: 'certainty'}],
  ['2015', 46, null, true, 32, true],
  ['2016', 31, null, true, 26, true],
  ['2017', 76, 'Max value', true, 54, true],
  ['2018', 17, null, true, 8, true],
  ['2019', 36, 'Just Expected value', false, 65, false]
]);
role: 'annotation'
 * グラフに説明する
role: 'certainty'
 * certainty = true
  => 実線でグラフ表示
   => 実測値を表現

 * certainty = false
  => 点線でグラフ表示
   => 予想値を表現

関連記事

【JS】 Google Charts [1] ~ 円グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572608.html

【JS】 Google Charts [2] ~ 棒グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572794.html

【JS】 Google Charts [4] ~ タイムライン編 ~

https://blogs.yahoo.co.jp/dk521123/37574625.html

【JS】 Google Charts [1] ~ 円グラフ編 ~

$
0
0

■ Google Charts

 * 商用利用
 * JavaScriptで記述する
  => グラフ自体はSVG形式(Scalable Vector Graphics)で記述される



■ サンプル

https://developers.google.com/chart/interactive/docs/quick_start
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo for Google Charts</title>
</head>
<body>
<div id="targetChart">

</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
(function() {
  'use strict';
  
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and draws it.
  function drawChart() {
    // Set chart options
    var options = {
      'title': 'Demo for Pie Chart',
      'width': 400,
      'height':300
    };
    
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Language');
    data.addColumn('number', 'Votes');
    data.addRows([
      ['Java', 47],
      ['C', 21],
      ['PHP', 15],
      ['Ruby', 10],
      ['Python', 8]
    ]);
    
    // Instantiate and draw our chart, passing in some options.
    var target = document.getElementById('targetChart');
    var chart = new google.visualization.PieChart(target);
    chart.draw(data, options);
  }
})();
</script>
</body>
</html>

■ 補足

【1】オプション について

公式サイトの「Configuration options」を参照する
https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options
// Set chart options
var options = {
  'title': 'Demo for Pie Chart',
  'width': 400,
  'height':300,
  backgroundColor: '#f8f8f8',
  colors: ['red', 'blue', 'yellow', 'green', 'gray'],
  // slices: 一部を切り出して目立たさせる
  //  + 第一引数:どこを切り出すか(0番目から。「2」「3」だと「PHP」「Ruby」)
  //  + offset:どの位で切り出すか
  slices: {2: {offset: 0.4}, 3: {offset: 0.2}},
  // pieHole: 0.4, // is3Dとは一緒に使えない
  is3D: true
};

【2】データを配列で追加

google.visualization.arrayToDataTableを使う
// Create the data table.
var data = new google.visualization.arrayToDataTable([
  ['Language', 'Votes'],
  ['Java', 47],
  ['C#', 37],
  ['C', 21],
  ['PHP', 15],
  ['Ruby', 10],
  ['Python', 8]
]);

【3】Googleスプレッドシートを使う

Googleスプレッドシート/データ (共有するためのURLを取得しておく)
Language	Votes
Java	67
C	21
PHP	15
Ruby	10
Python	8
サンプル
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
(function() {
  'use strict';
  
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and draws it.
  function drawChart() {
    var sharedUrl = 'https://docs.google.com/spreadsheets/x/xxxxxxxxxxxxxxxxxxxx_xxxxxx/edit?usp=sharing';
    var query = new google.visualization.Query(sharedUrl);
    query.send(handleQueryResponse);
  }
  
  function handleQueryResponse(response) {
    // Set chart options
    var options = {
      'title': 'Demo for Pie Chart',
      'width': 400,
      'height': 300
    };
    
    // Create the data table.
    var data = response.getDataTable();
    
    // Instantiate and draw our chart, passing in some options.
    var target = document.getElementById('targetChart');
    var chart = new google.visualization.PieChart(target);
    chart.draw(data, options);
  }
})();
</script>

関連記事

【JS】 Google Charts [2] ~ 棒グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572794.html

【JS】 Google Charts [3] ~ 折れ線グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572930.html

【HTML】タイムライン を表示するには...

https://blogs.yahoo.co.jp/dk521123/37562002.html

【JS】 Google Charts [4] ~ タイムライン編 ~

$
0
0

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37572608.html
https://blogs.yahoo.co.jp/dk521123/37572794.html
https://blogs.yahoo.co.jp/dk521123/37572930.html
の続き。
今度は、タイムラインを作成する

公式サイトのサンプルを活用しながらやるといいかも
https://developers.google.com/chart/interactive/docs/gallery/timeline#a-simple-example
また、以下の関連記事が長くなったので、Google Chartsについては、分割して書く。
https://blogs.yahoo.co.jp/dk521123/37562002.html

■ サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo for Google Charts</title>
</head>
<body>
<div id="targetChart">

</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
(function() {
  'use strict';
  
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['timeline']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and draws it.
  function drawChart() {
    // Set chart options
    var options = {
      'title': 'Demo for Pie Chart',
      'width': 400,
      'height':300,
      timeline: { colorByRowLabel: true }
    };
    
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn({ type: 'string', id: 'Term' });
    data.addColumn({ type: 'string', id: 'Name' });
    data.addColumn({ type: 'date', id: 'Start' });
    data.addColumn({ type: 'date', id: 'End' });
    data.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
    
    // Instantiate and draw our chart, passing in some options.
    var target = document.getElementById('targetChart');
    var chart = new google.visualization.Timeline(target);
    chart.draw(data, options);
  }
})();
</script>
</body>
</html>

関連記事

【JS】 Google Charts [1] ~ 円グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572608.html

【JS】 Google Charts [2] ~ 棒グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572794.html

【JS】 Google Charts [3] ~ 折れ線グラフ編 ~

https://blogs.yahoo.co.jp/dk521123/37572930.html

【HTML】タイムライン を表示するには...

https://blogs.yahoo.co.jp/dk521123/37562002.html

【Node.js】Node.js ~ 基礎知識編 ~

$
0
0

■ Node.js

 * 大量のリクエストを捌くことができる

■ スレッドモデル / イベントループ

 * Node.jsでは、イベントループを採用

スレッドモデル

 * Apacheで採用
 * 1リクエストに対して、1スレッドで対応
  => スレッドをたちあげるごとにメモリ消費されるので、大量リクエストには向かない
イベントループ
 * 

■ ブロッキング / ノンブロッキング

 * Node.js では ノンブロッキング な書き方をしていかなくてはならない

ブロッキング

// Blocking
var start = new Date().getTime();
while (new Date().getTime() < start + 1000);
console.log("World");

【出力結果】
(1秒後...)
World

ノンブロッキング

サンプル
// Non-Blocking
setTimeout(function() {
   console.log("Hello, ");
}, 1000);
console.log("World");

【出力結果】
World
Hello,

■ Node.jsの実行

[1] コマンドラインからの実行(node)(.help :ヘルプ)
[2] 「node 【ファイル名】」(例:node hello.js)

■ 公式サイト

https://nodejs.org/en/

【Node.js】Node.js ~ 入門編 / Webサーバ作成 ~

$
0
0

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37579720.html
で、設定を行ったので、今回は、簡易的なWebサーバ作成し、
実行してみる

以下の動画が分かりやすい。
https://dotinstall.com/lessons/basic_nodejs/26205

■ サンプル

hello.js

// HTTPモジュールを呼び出す
var http = require('http');

var server = http.createServer();

server.on('request', function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.write('Hello World!');
  response.end();
});

// ポート「18080」、ホスト「127.0.0.1」でリッスンする
server.listen('18080', '127.0.0.1');
console.log("Server listening...");

■ 実行

以下を実行する
node hello.js

Server listening...
ブラウザで以下をアクセスする
[[http://127.0.0.1:18080]]
ブラウザから以下が表示されるはず
Hello World!

関連記事

Node.js ~ 基礎知識編 ~

https://blogs.yahoo.co.jp/dk521123/37579720.html

Node.js ~ 基本編 / あれこれ ~

https://blogs.yahoo.co.jp/dk521123/37588122.html

【Node.js】Node.js ~ 基本編 / あれこれ ~

$
0
0

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37579720.html
https://blogs.yahoo.co.jp/dk521123/37587855.html
の続き。

【1】設定を外部ファイルから取得するには
【2】URLによって処理を変える
【3】HTMLファイルを読み込む

【1】設定を外部ファイルから取得するには...

構文

外部ファイルの内容
exports.【キー】=【値】
読み込み
var settings = require('【外部ファイル】');

settings.【キー】

サンプル

settings.js
exports.port='18080';
exports.host='127.0.0.1';
hello.js
// HTTPモジュールを呼び出す
var http = require('http');

// ★外部ファイルから取得★
var settings = require('./settings.js');
console.log(settings);

var server = http.createServer();

server.on('request', function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.write('Hello World!');
  response.end();
});

server.listen(settings.port, settings.host);
console.log("Server listening...");

【2】URLによって処理を変える

構文

外部ファイルの内容
server.on('request', function(request, response) {
  var result;
  switch (request.url) {
    case '/【パス1】':
      // 【処理1】
      break;
    case '/【パス2】':
      // 【処理2】
      break;
    default:
      // 【処理3】
      break;
  }
});

サンプル

hello.js
// HTTPモジュールを呼び出す
var http = require('http');
var settings = require('./settings.js');
console.log(settings);

var server = http.createServer();

server.on('request', function(request, response) {
  var result;
  switch (request.url) {
    case '/hello':
      result = 'Hello!';
      break;
    case '/world':
      result = 'World!!';
      break;
    default:
      result = 'Thanks!!!';
      break;
  }
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.write(result);
  response.end();
});

server.listen(settings.port, settings.host);
console.log("Server listening...");

出力結果

ブラウザで以下をアクセスする
[[http://127.0.0.1:18080/hello]]
Hello!
[[http://127.0.0.1:18080/world]]
World!!
[[http://127.0.0.1:18080/aaa]]
Thanks!!!

【3】HTMLファイルを読み込む

構文

// File Systemジュールを呼び出す
var fileSystem = require('fs');

fileSystem.readFile(__dirname + '/【パス】', 'utf-8', function(error, data) {
  // 処理
});

サンプル

helloworld.html
<html>
<body>
<h1>Hello World!!!!</h1>
</body>
</html>
hello.js
// HTTPモ/File Systemジュールを呼び出す
var http = require('http'),
    fileSystem = require('fs');

// 外部ファイルから取得
var settings = require('./settings.js');
console.log(settings);

var server = http.createServer();

server.on('request', function(request, response) {
  fileSystem.readFile(__dirname + '/helloworld.html', 'utf-8', function(error, data) {
    if (error) {
      response.writeHead(404, {'Content-Type': 'text/plain'});
      response.write('Not Found...');
      response.end();
    } else {
      response.writeHead(200, {'Content-Type': 'text/html'});
      response.write(data);
      response.end();
    }
  });
});

server.listen(settings.port, settings.host);
console.log("Server listening...");

関連記事

Node.js ~ 基礎知識編 ~

https://blogs.yahoo.co.jp/dk521123/37579720.html

Node.js ~ 入門編 / Webサーバ作成 ~

https://blogs.yahoo.co.jp/dk521123/37587855.html

Node.js ~ 基本編 / npm ~

https://blogs.yahoo.co.jp/dk521123/37589593.html

【トラブル】 VirtualBox でのトラブルシューティング

$
0
0

■ CentOS7インストール時に、画面が真っ黒

Windows10上のVirtualBoxでCentOS7のインストールを開始したところ、
画面が真っ黒になり、インストールが一切進まなくなった。

エラー内容

なし(これがやっかい)

原因

 * 仮想マシン作成の際、OSのバージョンに「Red Hat(32-bit)」を選択していたため

解決策

仮想マシンのOSバージョンを「Red Hat(64-bit)」に変更

参考文献

http://heppoen.seesaa.net/article/441709839.html

■ CentOS7で、yum upgrade して再起動したらKernel panic

3.10.0-327.el.x86_64
から
3.10.0-693.21.1.el7.x86_64
にあげたら、以下の「エラー内容」が表示されて起動できなくなった

なお、解決には、以下のサイトが非常に役立った。感謝。
http://vild.hatenablog.com/entry/2016/08/19/233547

エラー内容

Kernel panic - not syncing: VFS: Unable to mount root fs on unknown-block(0,0)
CPU: 0 PID 1 Comm: swapper/0 Not tainted 3.10.0-693.21.1.el7.x86_64 #1
Hardware name: innotek GmbH VirtualBox/VirtualBox, BIOS VirtualBox 12/01/2006
Call Trace:
...
Kernel Offset disabled

原因

 * 新しいカーネル(3.10.0-693.21.1.el7.x86_64)のinitramfsが生成されていないため

解決策

[1] 古いカーネルで起動
[2] 以下のコマンドを実行
~~~~~~~~~~~~~
ls -l /boot | grep initramfs
# 「3.10.0-693.21.1.el7.x86_64.img」がないことを確認

sudo depmod 3.10.0-693.21.1.el7.x86_64
# initrdイメージの作成するためにmkinitrdコマンドを実行
sudo mkinitrd /boot/initramfs-3.10.0-693.21.1.el7.x86_64.img 3.10.0-693.21.1.el7.x86_64

ls -l /boot | grep initramfs
# 「3.10.0-693.21.1.el7.x86_64.img」が存在することを確認
~~~~~~~~~~~~~
[3] /boot/grub2/grub.cfgに、以下のように「initrd16 /initramfs-3.10.0-693.21.1.el7.x86_64.img」を追記

sudo vi /boot/grub2/grub.cfg
~~~~~~~~~~~~~
menuentry 'CentOS Linux (3.10.0-693.21.1.el7.x86_64) 7 (Core)' --class centos --class gnu-linux --class gnu --class os --unrestricted $menuentry_id_option 'gnulinux-3.10.0-327.el7.x86_64-advanced-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx' {
        load_video
        set gfxpayload=keep
        insmod gzio
        insmod part_msdos
        insmod xfs
        set root='hd0,msdos1'
        if [ x$feature_platform_search_hint = xy ]; then
          search --no-floppy --fs-uuid --set=root --hint='hd0,msdos1'  xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
        else
          search --no-floppy --fs-uuid --set=root xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
        fi
        linux16 /vmlinuz-3.10.0-693.21.1.el7.x86_64 root=/dev/mapper/centos-root ro rd.lvm.lv=centos/root rd.lvm.lv=centos/swap rhgb quiet LANG=ja_JP.UTF-8
        # !!! ADD !!! 
        initrd16 /initramfs-3.10.0-693.21.1.el7.x86_64.img
~~~~~~~~~~~~~

[4] OS再起動(sudo reboot)

参考文献

http://vild.hatenablog.com/entry/2016/08/19/233547
http://blog.seiglab.com/linux/post-440.html

関連記事

VirtualBox のインストール

https://blogs.yahoo.co.jp/dk521123/31186721.html

【Node.js】Node.js ~ 基本編 / npm ~

$
0
0

■ npm

npm : Node Package Manager
 * パッケージ(Package)を管理する(Manager)ツール

  => テンプレートエンジン「ejs (Embedded JavaScript)」をインストールする

動画

https://dotinstall.com/lessons/basic_nodejs/26209
https://dotinstall.com/lessons/basic_nodejs/26210

■ 設定

# バージョン確認
npm --version

# ローカルインストール (現在のフォルダのみにインストールする)
npm install ejs

# 確認
ls -l node_modules/ejs

=> 全体で行いたい場合は、グローバルインストール「npm install -g ejs (g:global)」

■ 構文

テンプレート読み込み

var template = fileSystem.readFileSync(__dirname + '【テンプレートパス】', 'utf-8');

出力

# エスケープ処理を行わない
<%= 【変数】 %>

# エスケープ処理を行う
<%- 【変数】 %>

■ サンプル

hello.ejs

<html>
<body>
<h1><%= title %></h1>
<h2><%= title2 %></h2>
<h3><%- subtitle %></h3>
<h4><%= index %> views</h4>
</body>
</html>

hello.js

// HTTPモ/File Systemジュールを呼び出す
var http = require('http'),
    fileSystem = require('fs'),
    ejs = require('ejs');

// 外部ファイルから取得
var settings = require('./settings.js');
var server = http.createServer();

var template = fileSystem.readFileSync(__dirname + '/hello.ejs', 'utf-8');

var index = 0;
server.on('request', function(request, response) {
    index++;
    var data = ejs.render(template, {
       title: "Hello",
       title2: "<b>Hello2</b>",
       subtitle: "<b>World</b>",
       index: index
     });
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.write(data);
    response.end();
});

server.listen(settings.port, settings.host);
console.log("Server listening...");

出力結果

Hello
<b>Hello2</b>
World
1 views

関連記事

Node.js ~ 基礎知識編 ~

https://blogs.yahoo.co.jp/dk521123/37579720.html

Node.js ~ 基本編 / あれこれ ~

https://blogs.yahoo.co.jp/dk521123/37588122.html

【Openssl】Opensslを使って、重要データをやり取りする

$
0
0

■ はじめに

重要なファイルのやり取りをするのに、ZIPファイルの暗号化だけでは心許ない。
送信者・受信者どちらもOpensslを使えば、よりセキャアにやり取りできるので
その方法を記録しておく

■ 手順

【0】OpenSSLがインストールされているか確認
【1】受信者側の作業
 【1-1】秘密鍵を生成する
 【1-2】公開鍵を生成する
 【1-3】受信者は、公開鍵(【1-2】)をメールなどで送信者に渡す
【2】送信者側の作業
 【2-1】公開鍵で送信対象を暗号化する
 【2-2】送信者は、暗号化したファイル(【2-1】)をメールなどで受信者に渡す
【3】受信者側の作業
 【3-1】暗号化されたファイルを秘密鍵で複合化する(元に戻す)

【0】OpenSSLがインストールされているか確認

openssl version

【1-1】秘密鍵を生成する

openssl genrsa 【鍵長(キーサイズ)】 > 【秘密鍵】
例:鍵長 = 2024バイトの場合
openssl genrsa 2024 > private-key.pem

Generating RSA private key, 2024 bit long modulus
...........+++
...........................+++
e is 65537 (0x10001)

【1-2】公開鍵を生成する

openssl rsa -in 【秘密鍵】 -pubout -out 【公開鍵】

openssl rsa -in private-key.pem -pubout -out public-key.pem

writing RSA key

【2-1】公開鍵で送信対象を暗号化する

openssl rsautl -encrypt -pubin -inkey 【公開鍵】 -in 【送信対象】 -out 【公開鍵で暗号化した送信対象】
例:送信対象 = helloworld.txt
openssl rsautl -encrypt -pubin -inkey public-key.pem -in helloworld.txt -out encrypted-helloworld.out

# 確認
cat helloworld.txt

Hello World!!

# 確認
hexdump encrypted-helloworld.out

0000000 6a4c 023c dd7b 1801 5d1d b695 d1b2 4cc2
0000010 113b 195a 27ac 38c1 1f4a f22c a978 7ace
0000020 17e5 19b9 b494 77dd bef0 4338 722a 86f7
0000030 fbb1 bd36 60f4 6f76 50bc 6939 4568 b013
0000040 2b94 3d5a 7c37 fa52 7846 be88 186c 5f20
0000050 330e 4af9 3886 6d0d 6ffa 3f30 5b24 17b5
0000060 7ebf 74ba d1dd dbec 3bfe 3e00 8109 962d
0000070 29d7 5a1b ec1b 8f81 4b2e acf1 870d ae32
0000080 b1fa 2d4f 7952 ceab 6b9e 9550 d35e f684
0000090 8d14 582c 42f3 5d5a ba24 f904 758e c30f
00000a0 9c03 85d4 6b9a 0d7a 4bad 0bfd 51b0 e3fa
00000b0 e6e7 9b13 aa2a 2ea4 5ee9 e6b5 ef9a 2428
00000c0 3c2d 7057 87f6 4269 8e6a eff7 1c79 4314
00000d0 c4ff f8ca c166 043f 2ef7 4928 25c0 723c
00000e0 c280 7d58 1a19 1084 ced3 2ff3 033a ae1a
00000f0 d288 aa4e c1e9 0aba 298f 7d7b 00fa     
00000fd

【3-1】暗号化されたファイルを秘密鍵で複合化する

openssl rsautl -decrypt -inkey 【秘密鍵】 -in 【公開鍵で暗号化した送信対象】 > 【複合化したファイル】

openssl rsautl -decrypt -inkey private-key.pem -in encrypted-helloworld.out > decrypted-helloworld.txt

# 確認
cat decrypted-helloworld.txt

Hello World!!

■ トラブル:エラー「data too large for key size」が表示される

エラー内容

$ openssl rsautl -encrypt -pubin -inkey public-key.pem -in bigdata.txt -out encrypted-helloworld.out

RSA operation error
140708605077392:error:0406D06E:rsa routines:RSA_padding_add_PKCS1_type_2:data too large for key size:rsa_pk1.c:153:

原因

鍵長以上の長さのデータを暗号化された場合、処理できなくなる

解決案

 * openssl smime コマンドを使って S/MIME形式にする

コマンド例

共通鍵と秘密鍵を生成
openssl req -x509 -nodes -newkey rsa:2048 -keyout private-key.pem -out public-key.pem -subj '/'

Generating a 2048 bit RSA private key
...................................+++
.........................................................................................+++
writing new private key to 'private-key.pem'
-----
暗号化
openssl smime -encrypt -aes256 -in bigdata.txt -binary -outform DEM -out encrypted-bigdata.out public-key.pem
復号化
openssl smime -decrypt -in encrypted-bigdata.out -binary -inform DEM -inkey private-key.pem -out encrypted-bigdata.txt

【Node.js】Node.js ~ 基本編 / MongoDB を使う ~

$
0
0

■ 初期設定

【1】MongoDB をインストールする
【2】Node.jsの MongoDB ライブラリをインストールする

【1】MongoDBをインストールする

https://blogs.yahoo.co.jp/dk521123/32984717.html
を参考に MongoDB をインストールする

【2】Node.jsのMongoDBライブラリをインストールする

https://blogs.yahoo.co.jp/dk521123/37589593.html
で行った npm でインストールする
npm install mongodb

■ サンプル

settings.js

exports.port='18080';
exports.host='127.0.0.1';
exports.db='nodedb';

hellonode.js

// MongoDBジュールを呼び出す
var mongoDb = require('mongodb');
var mongoClient = mongoDb.MongoClient;

// 外部ファイルから取得
var settings = require('./settings.js');

mongoClient.connect("mongodb://" + settings.host + "/" + settings.db,
function(error, client) {
  if (error) {
    return console.dir(error);
  }

  console.log("Connected to DB...");

  var db = client.db(settings.db);
  db.collection("users", function(error, collection) {
    if (error) {
      return console.dir(error);
     }

    var dataset = [
       {id: 1, name: "Mike", score: 64},
       {id: 2, name: "Tom", score: 98},
       {id: 3, name: "Smith", score: 25},
       {id: 4, name: "Kevin", score: 67}
    ];

    // INSERT
    collection.insert(dataset, function(error, result) {
       console.dir(result);
    });

    // SELECT - 1
    collection.find().toArray(function(err, items) {
        console.log(items);
     });

    // SELECT1 - '
    collection.find({name: "Mike"}).toArray(function(err, items) {
        console.log(items);
     });

    // SELECT - 2
    var stream = collection.find().stream();
    stream.on("data", function(items) {
       console.log(items);
     });

    stream.on("end", function() {
       console.log("Done");
     });
  });
});

動作確認

実行結果
$ node hellomongo.js

Connected to DB...
{ result: { ok: 1, n: 4 },
  ops: 
   [ { id: 1, name: 'Mike', score: 64, _id: [Object] },
     { id: 2, name: 'Tom', score: 98, _id: [Object] },
     { id: 3, name: 'Smith', score: 25, _id: [Object] },
     { id: 4, name: 'Kevin', score: 67, _id: [Object] } ],
  insertedCount: 4,
  insertedIds: 
   { '0': ObjectID { _bsontype: 'ObjectID', id: [Object] },
     '1': ObjectID { _bsontype: 'ObjectID', id: [Object] },
     '2': ObjectID { _bsontype: 'ObjectID', id: [Object] },
     '3': ObjectID { _bsontype: 'ObjectID', id: [Object] } } }
[ { _id: 5b25d31535efee3a429de75b, id: 1, name: 'Mike', score: 64 },
  { _id: 5b25d31535efee3a429de75c, id: 2, name: 'Tom', score: 98 },
  { _id: 5b25d31535efee3a429de75d, id: 3, name: 'Smith', score: 25 },
  { _id: 5b25d31535efee3a429de75e, id: 4, name: 'Kevin', score: 67 } ]
[ { _id: 5b25d31535efee3a429de75b, id: 1, name: 'Mike', score: 64 } ]
{ _id: 5b25d31535efee3a429de75b, id: 1, name: 'Mike', score: 64 }
{ _id: 5b25d31535efee3a429de75c, id: 2, name: 'Tom', score: 98 }
{ _id: 5b25d31535efee3a429de75d, id: 3, name: 'Smith', score: 25 }
{ _id: 5b25d31535efee3a429de75e, id: 4, name: 'Kevin', score: 67 }
Done
MongoDB内を確認する
mongo

MongoDB shell version v3.6.5
・・・略・・・

> show dbs
・・・略・・・
nodedb  0.000GB

> use nodedb
switched to db nodedb

> show collections
users

> db.users.find();
{ "_id" : ObjectId("5b25d31535efee3a429de75b"), "id" : 1, "name" : "Mike", "score" : 64 }
{ "_id" : ObjectId("5b25d31535efee3a429de75c"), "id" : 2, "name" : "Tom", "score" : 98 }
{ "_id" : ObjectId("5b25d31535efee3a429de75d"), "id" : 3, "name" : "Smith", "score" : 25 }
{ "_id" : ObjectId("5b25d31535efee3a429de75e"), "id" : 4, "name" : "Kevin", "score" : 67 }


関連記事

Node.js

Node.js ~ 基礎知識編 ~
https://blogs.yahoo.co.jp/dk521123/37579720.html
Node.js ~ 基本編 / npm ~
https://blogs.yahoo.co.jp/dk521123/37589593.html

mongoDB

MongoDB ~入門編~
https://blogs.yahoo.co.jp/dk521123/32984717.html
MongoDB ~基本編~
https://blogs.yahoo.co.jp/dk521123/32987289.html

【Node.js】Node.js ~ 基本編 / ファームデータを処理する ~

$
0
0

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37589593.html
の続き。
今回は、ファームデータを処理する。

■ サンプル

bbs.ejs

<!doctype html>
<html lang"ja">
<head>
<meta charset="utf-8">
</head>
<body>
  <form method="post">
    <input type="text" name="bbsContent">
    <input type="submit" value="Click me!">
  </form>
  <ul>
    <% for (var i = 0; i < bbsPosts.length; i++) { %>
    <li><%= bbsPosts[i] %></li>
    <% } %>
  </ul>
</body>
</html>

settings.js

exports.port='18080';
exports.host='127.0.0.1';

server.js

// HTTPモ/File System/EJS(テンプレート)/Query String(Form処理)ジュールを呼び出す
var http = require('http'),
    fileSystem = require('fs'),
    ejs = require('ejs'),
    queryString = require('querystring');

// 外部ファイルから取得
var settings = require('./settings.js');
var server = http.createServer();

var template = fileSystem.readFileSync(__dirname + '/bbs.ejs', 'utf-8');

var bbsPosts = [];

function renderForm(request, response) {
  var data = ejs.render(template, {
    bbsPosts: bbsPosts
  });
  response.writeHead(200, {'Content-Type': 'text/html'});
  response.write(data);
  response.end();
}

server.on('request', function(request, response) {
  if (request.method == 'POST') {
    request.data = "";
    
    request.on("data", function(chunk) {
      var readData = chunk;
      console.log("Read Data : " + readData);
      request.data += readData;
    });

    request.on("end", function() {
      var query = queryString.parse(request.data);
      console.log("BBS Content : " + query.bbsContent);
      bbsPosts.push(query.bbsContent);
      renderForm(bbsPosts, response);
    });
    
  } else {
    renderForm(request, response);
  }
});

server.listen(settings.port, settings.host);
console.log("Server listening...");

関連記事

Node.js ~ 基礎知識編 ~

https://blogs.yahoo.co.jp/dk521123/37579720.html

Node.js ~ 入門編 / Webサーバ作成 ~

https://blogs.yahoo.co.jp/dk521123/37587855.html

Node.js ~ 基本編 / あれこれ ~

https://blogs.yahoo.co.jp/dk521123/37588122.html

Node.js ~ 基本編 / npm ~

https://blogs.yahoo.co.jp/dk521123/37589593.html

【Polymer】 Polymer ~ 初期設定編 ~

$
0
0

■ Polymer

 * Google製
 * 凄く綺麗
 * ZIPで解凍して使う方法もあるらしいが、基本インストールが必要 (もっと気軽なのが欲しい)


■ 初期設定

Linux

CentOS7
https://www.polymer-project.org/3.0/start/install-3-0
を参考に。

【1】Gitをインストールする
【2】Node.jsをインストールする
【3】Polymer CLIをインストールする
【1】Gitをインストールする
sudo yum install -y git

git --version
【2】Node.jsをインストールする
【注意】
 * Node.js は、v8以上をインストールすること <= ★ ここで、はまった ★
https://qiita.com/you21979@github/items/4c9c382b9536effc590d
curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -

sudo yum install -y nodejs gcc-c++ make

node --version
→ ここでは「v8.11.3」が表示された
【3】Polymer CLIをインストールする
sudo npm install -g polymer-cli --unsafe-perm

polymer --version
→ ここでは「1.7.3」が表示された

■ スタートキットを動かす

https://www.polymer-project.org/3.0/start/toolbox/set-up
より

【1】プロジェクト用のディレクトリを作成する
【2】プロジェクトを初期化する
【3】プロジェクトを起動する
【1】プロジェクト用のディレクトリを作成する
mkdir my-app
cd my-app
【2】プロジェクトを初期化する
polymer init

=> ここでは「polymer-3-starter-kit - A Polymer 3.x starter application template, with navigation a
nd "PRPL pattern" loading」を選択する
【3】プロジェクトを起動する
polymer serve --open

=> ブラウザが起動し、アプリが表示されるはず。


関連記事

マテリアル デザイン フレームワーク を調査してみた

【Polymer】 Polymer ~ Hello World編 ~

$
0
0

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37597605.html
の続き。
Hello Worldとして、スタートキットを動かす

■ 前提条件

https://blogs.yahoo.co.jp/dk521123/37597605.html
で、初期設定を行うこと。

■ スタートキットを動かす

https://www.polymer-project.org/3.0/start/toolbox/set-up
を参考に。

【1】プロジェクト用のディレクトリを作成する
【2】プロジェクトを初期化する
【3】プロジェクトを起動する

【1】プロジェクト用のディレクトリを作成する

mkdir my-app
cd my-app

【2】プロジェクトを初期化する

polymer init

=> ここでは「polymer-3-starter-kit - A Polymer 3.x starter application template, with navigation a
nd "PRPL pattern" loading」を選択する

【3】プロジェクトを起動する

polymer serve --open

=> ブラウザが起動し、アプリが表示されるはず。

■ 新しいページを追加する

スタートキットを動かした後は、新しいページを追加する
https://www.polymer-project.org/3.0/start/toolbox/create-a-page
を参考に。

【1】新しいページを追加する
【2】src/my-app.js に新規追加するページの処理を追記する
【3】プロジェクトを起動する

【1】新しいページを追加する

cd ~/my-app
sudo vi src/my-new-view.js
[1] src/my-new-view.js を以下の内容で保存する
/* Load the PolymerElement base class and html helper function */
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
/* Load shared styles. All view elements use these styles */
import './shared-styles.js';

/* Extend the base PolymerElement class */
class MyNewView extends PolymerElement {
  /* Define a template for the new element */
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      </style>

      <div class="card">
        <div class="circle">4</div>
        <h1>New View</h1>
        <p>New view!</p>
      </div>
    `;
  }
}
/* Register the new element with the browser */
window.customElements.define('my-new-view', MyNewView);

【2】src/my-app.js に新規追加するページの処理を追記する

sudo vi src/my-app.js
[2-1] src/my-app.js 内で「<iron-pages」を探し、『<my-new-view name="new-view"></my-new-view>』を追加する
<iron-pages selected="[[page]]" attr-for-selected="name" role="main">
  <my-view1 name="view1"></my-view1>
  <my-view2 name="view2"></my-view2>
  <my-view3 name="view3"></my-view3>
  <my-new-view name="new-view"></my-new-view> <!-- Add -->
  <my-view404 name="view404"></my-view404>
</iron-pages>
[2-2] src/my-app.js 内で「_routePageChanged」を探し、『, 'new-view'』を追加する
_routePageChanged(page) {
   // Show the corresponding page according to the route.
   //
   // If no page was found in the route data, page will be an empty string.
   // Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
  if (!page) {
    this.page = 'view1';
  } else if (['view1', 'view2', 'view3', 'new-view'].indexOf(page) !== -1) {
    this.page = page;
  } else {
    this.page = 'view404';
  }
[2-3] src/my-app.js 内で「_pageChanged」を探し、『case 'new-view':』部分を追加する
_pageChanged(page) {
  // Import the page component on demand.
  //
  // Note: `polymer build` doesn't like string concatenation in the import
  // statement, so break it up.
  switch (page) {
    case 'view1':
      import('./my-view1.js');
      break;
    case 'view2':
      import('./my-view2.js');
      break;
    case 'view3':
      import('./my-view3.js');
      break;
    case 'new-view': // !! Add !!
      import('./my-new-view.js');
      break;
    case 'view404':
      import('./my-view404.js');
      break;
  }
}
[2-4] src/my-app.js 内で「<app-drawer」を探し、『<a name="new-view" href="[[rootPath]]new-view">New View</a>』を追加する
<app-drawer-layout fullbleed="" narrow="{{narrow}}">
  <!-- Drawer content -->
  <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="[[rootPath]]view1">View One</a>
      <a name="view2" href="[[rootPath]]view2">View Two</a>
      <a name="view3" href="[[rootPath]]view3">View Three</a>
      <a name="new-view" href="[[rootPath]]new-view">New View</a> <!-- Add -->
    </iron-selector>
  </app-drawer>

【3】プロジェクトを起動する

polymer serve --open

=> ブラウザが起動し、新規ページ追加されたか確認。

関連記事

Polymer

初期設定編
https://blogs.yahoo.co.jp/dk521123/37597605.html

その他

マテリアル デザイン フレームワーク を調査してみた
https://blogs.yahoo.co.jp/dk521123/37559037.html

【CSS】 CSS で図形を描く

$
0
0

■ CSSで四角形を描くには... / width・height・background-color

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 四角形 */
.square {
 width: 100px;
 height: 200px;
 background-color: #ff9800;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>

■ CSSで丸/丸角/二重丸を描くには... / border-radius・box-shadow

* 丸を描く
 => border-radius: 50%
* 丸角を描く
 => border-radius: XX%
* 二重丸を描く
 => box-shadow: 0 0 0 Xpx #XXXXX

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 円 */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff9800;
}
/* 丸角 */
.rounded-corners {
  width: 100px;
  height: 100px;
  border-radius: 15%;
  background-color: #ff9800;
}
/* 二重丸を描く */
.double-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #ff5800;
  background-color: #ff9800;
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="rounded-corners"></div>
<div class="double-circle"></div>
</body>
</html>

■ CSSで三角形を描くには... / border

 * 三角形を描く
  => borderプロパティを使う

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 三角形 */
.triangle {
 width: 0px ;
 height: 0px ;
 border: 50px solid transparent;
 border-bottom-color: #ff9800; /* 上向きの場合 */
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

参考文献

https://www.granfairs.com/blog/staff/make-triangle-with-css

【応用】CSSで吹き出しを作るには...

 * 円・と三角形の組み合わせで、吹き出しを表示する

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 吹き出しの本体 */
.balloon {
 position: relative;
 display: inline-block;
 padding: 7px 10px;
 color: #fff; /* 文字色:白 */
 background: #ff9800;
 border-radius: 15px;
}
/* 吹き出しの三角形部分 */
.balloon:before{
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -15px;
 border: 10px solid transparent;
 border-top: 10px solid #ff9800;
}
</style>
</head>
<body>
<div class="balloon">
  <p>はろーわーるど</p>
</div>
</body>
</html>

参考文献

https://saruwakakun.com/html-css/reference/speech-bubble
https://blog.codecamp.jp/css_balloon
動画
https://dotinstall.com/lessons/balloon_css

関連記事

CSS覚書

https://blogs.yahoo.co.jp/dk521123/9810526.html

z-indexプロパティ / positionプロパティ

https://blogs.yahoo.co.jp/dk521123/35805745.html

Font関連のCSS ~文字色 / 文字サイズetc~

https://blogs.yahoo.co.jp/dk521123/33071060.html

要素を重ねるには...

https://blogs.yahoo.co.jp/dk521123/34534679.html

CSS を取り組むには...

https://blogs.yahoo.co.jp/dk521123/24426718.html

DIVタブ(ブロック)からはみだした場合の対処

https://blogs.yahoo.co.jp/dk521123/35749161.html

【トラブル】【Linux】Windows共有フォルダをマウントした際のトラブルシューティング

$
0
0

■ はじめに

 * 以下の関連記事で起こったトラブルについて、纏める
https://blogs.yahoo.co.jp/dk521123/37415363.html

【1】 sudo mount -t cifs...した時にエラー

 * 以下の「エラー内容」がでて、マウントできない

エラー内容

mount: wrong fs type, bad option, bad superblock on //ADMIN/shared,
       missing codepage or helper program, or other error
       (for several filesystems (e.g. nfs, cifs) you might
       need a /sbin/mount.<type> helper program)

       In some cases useful info is found in syslog - try
       dmesg | tail or so.

解決策

# cifs-utils をインストールする

sudo yum install cifs-utils -y

参考文献

http://kimama-na-tomo-no.blog.so-net.ne.jp/2017-03-01

【2】 sudo mount -a した時にエラー

 * 以下の「エラー内容」がでて、マウントできない

エラー内容

Retrying with upper case share name
mount error(6): No such device or address
Refer to the mount.cifs(8) manual page (e.g. man mount.cifs)

原因

Windows共有フォルダの共有名が間違っていた

解決策

 * /etc/fstab を修正して、再度、sudo mount -a を行う

参考文献

http://linux-memo.net/knoppix/mac_fullbackup_restore.html

関連記事

CentOS7 からWindows共有フォルダをマウントする

https://blogs.yahoo.co.jp/dk521123/37415363.html

【CSS】CSSの基本文法

$
0
0

■ 基本的な文法

HTML

<h1>Hello World</h1>

CSS

h1 {
   color: red;
}

構文

【セクター】 {
   【宣言 (プロパティ: 値)】;
}

■ 基本ルール

【1】後に記載した方が有効になる

【1】後に記載した方が有効になる

後勝ち
h1 {
   color: red;
   color: blue; /* こっちが有効 */
}

■ コメント文

 /* コメント文 */ とする

注意

// これはコメント文にならない

参考文献

http://monopocket.jp/blog/css/1278/


関連記事

CSS覚書

https://blogs.yahoo.co.jp/dk521123/9810526.html

z-indexプロパティ / positionプロパティ

https://blogs.yahoo.co.jp/dk521123/35805745.html

Font関連のCSS ~文字色 / 文字サイズetc~

https://blogs.yahoo.co.jp/dk521123/33071060.html

要素を重ねるには...

https://blogs.yahoo.co.jp/dk521123/34534679.html

CSS を取り組むには...

https://blogs.yahoo.co.jp/dk521123/24426718.html

DIVタブ(ブロック)からはみだした場合の対処

https://blogs.yahoo.co.jp/dk521123/35749161.html

【分散リポジトリ】【Git】Git ~ 初期設定編 ~

$
0
0

■ Git (ギット)

 * 分散型バージョン管理システム

3つの状態

【Step1】作業ディレクトリ
【Step2】ステージング・エリア(インデックス)
【Step3】レポジトリ(Gitディレクトリ)
【Step1】作業ディレクトリ
 * 共有リポジトリ(≒リモート・リポジトリ)から取得したローカル環境のリポジトリ
【Step2】ステージング・エリア(インデックス)
 * リポジトリにコミットするファイルを置いておくためのエリア
【Step3】レポジトリ(Gitディレクトリ)
【a】 ローカル・リポジトリ
 => 自分のローカルPC内のリポジトリ
【b】 リモート・リポジトリ
 => ローカルリポジトリ以外のネットワーク上やファイル上に存在するリポジトリ

■ インストール

Linux

インストール(yum)
# yum でインストール
sudo yum install -y git-all

# インストールできたか確認
git --version
 => 今回は「git version 1.8.3.1」
アンインストール
sudo yum remove -y git-all
sudo yum remove -y git
インストール(最新版ダウンロード(v2.X.X))
【1】 公式サイトから最新版のバージョンを確認
https://git-scm.com/
【2】 以下のコマンドで、インストール

# ライブラリのインストール
sudo yum -y install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-ExtUtils-MakeMaker autoconf

# 最新版ダウンロード(今回は「v2.18.0」)
cd /usr/local/src
sudo wget https://www.kernel.org/pub/software/scm/git/git-2.18.0.tar.gz

# モジュールを解凍
sudo tar xzvf git-2.18.0.tar.gz

# インストール
cd git-2.18.0
sudo make prefix=/usr/local all
sudo make prefix=/usr/local install

# インストールできたか確認
git --version

# 意図したgitのバージョンが表示されない場合
which git
 => 「/usr/local/bin/git」と表示。
# gitのディレトリは「/usr/local/bin/git」になっているので、シンボリックリンクを設定
sudo ln -s /usr/local/bin/git /usr/bin/git

# 不要なモジュールを削除
rm -rf git-2.18.0.tar.gz
参考文献
https://hajipro.com/git/centos7-git-install
http://wp.tech-style.info/archives/592
https://qiita.com/kalmia/items/9e6a3f12b0f5f79dd14b

Windows

【1】 公式サイトからインストーラをダウンロードする
https://git-scm.com/
【2】 インストーラでインストールする
参考文献
https://qiita.com/toshi-click/items/dcf3dd48fdc74c91b409

■ 初期設定

git config --global user.name "admin"
git config --global user.email "admin@gmail.com"
git config --global color.ui true

# 設定確認
git config -l

user.name=admin
user.email=admin@gmail.com
color.ui=true

■ ファイルの管理

 * Hello World的なこととして、ファイルをgitでバージョン管理してみる

準備

mkdir my-web
cd my-web
vi index.html
~~~~~~~
Hello World
~~~~~~~

コマンド例

# 現在のディレクトリ(今回は「my-web」)をgitで使うためのコマンド
git init
 => 「Initialized empty Git repository in /home/【ユーザ名】/my-web/.git/」

# 「【Step1】作業ディレクトリ」→「【Step2】ステージング・エリア(インデックス)」に遷移するためのコマンド
git add index.html

# 「【Step2】ステージング・エリア(インデックス)」→「【Step3】レポジトリ(Gitディレクトリ)」に遷移するためのコマンド
git commit

# 確認
git log

【分散リポジトリ】 Git ~ 入門編 ~

$
0
0

■ 基本コマンド

git init

 * リポジトリを新規作成するときに使うコマンド
構文
git init ([ディレクトリ] [オプション])
参考文献
https://eng-entrance.com/git-init

git add

 * ステージング・エリアに変更済みファイルを追加
構文
git add [ファイル]

git add hello.txt

# 現在のディレクトリ配下のもの全て追加
git add .

git commit

 * コミット
構文
git commit ([オプション])

git commit

# コメント文「This is a Comment...」を追加
git commit -m "This is a Comment..."

# 直前のコミットを変更する
git commit --amend

git log

 * コミット履歴の閲覧
構文
git log ([オプション])

# 一行表示
git log --oneline

# 差分表示 - 変更箇所
git log -p

# 差分表示 - どのファイルに何か所変更があったか
git log --stat
参考文献
https://git-scm.com/book/ja/v1/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E5%B1%A5%E6%AD%B4%E3%81%AE%E9%96%B2%E8%A6%A7

git status

 * 変更の状態を確認する
構文
git status [オプション]

git diff

 * ステージング・エリアにないファイルの変更の状態を確認する

git diff

# 次の commit で反映される変更を表示
git diff --cached
参考文献
http://www-creators.com/archives/755

git checkout

 * 変更を戻す
構文
# 変更を戻す
git checkout -- [ファイル]
参考文献
https://gist.github.com/satoshin2071/7cc2a8e2135d02f36649

git reset

 * 過去の状態に戻す
構文
git reset ([オプション])

git reset --hard [ID/HEAD/HEAD^]

git reset

# 直前のコミットに戻す
git reset --hard HEAD

# 2つ前のコミットに戻す
git reset --hard HEAD^

# git resetしたあとにそれを取り消す
git reset --hard ORIG_HEAD

# ID「9402b408ad7f5315a9757241fec5c7ebb2afb7c4」に戻す(git logで調べられる)
git reset --hard 9402b408ad7f5315a9757241fec5c7ebb2afb7c4


■ サンプル

 * Hello World的なこととして、ファイルをgitでバージョン管理してみる

準備

mkdir my-web
cd my-web
vi index.html
~~~~~~~
Hello World
~~~~~~~

コマンド例

# 現在のディレクトリ(今回は「my-web」)をgitで使うためのコマンド
git init
 => 「Initialized empty Git repository in /home/【ユーザ名】/my-web/.git/」

# 「作業ディレクトリ」→「ステージング・エリア(インデックス)」に遷移するためのコマンド
git add index.html

# 「ステージング・エリア(インデックス)」→「レポジトリ(Gitディレクトリ)」に遷移するためのコマンド
git commit

# 確認
git log

vi index.html
~~~~~~~
Hello World!!
~~~~~~~

# 変更確認
git status

On branch master
Changes not staged for commit: << ステージにもなくコミットもしてない状態
  (use "git add <file>..." to update what will be committed) << 次に行うコマンドを教えてくれる
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")

# 元に戻す
git checkout -- index.html

# 再度、変更確認
git status

On branch master
nothing to commit, working tree clean

vi index.html
~~~~~~~
Hello World!!
~~~~~~~

# 変更確認
git diff

diff --git a/index.html b/index.html
index 557db03..9369771 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-Hello World
+Hello World!!

# ステージング・エリアに遷移
git add index.html

# 変更確認 (既にステージング・エリアに遷移しているので、出力結果は何も表示されない)
git diff

# 次の commit で反映される変更を表示
git diff --cached

diff --git a/index.html b/index.html
index 557db03..9369771 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-Hello World
+Hello World!!

git reset

 * 過去の状態に戻す

■ 使用上の注意

ファイルの削除/移動について

 * ファイルの削除、移動する際には、gitコマンドを使う

git mv index.html ./hello/index.html

git rm index.html

■ その他使い方

管理に含めない場合

[1] 「.gitignore」を作成する (vi .gitignore)
[2] 除外するファイルを「.gitignore」に記述する (例「*.log」)


関連記事

Git ~ 初期設定編 ~

https://blogs.yahoo.co.jp/dk521123/37613741.html
Viewing all 860 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>