Blog on DooD

Amazon EC2 で Nuxt.js 環境を構築する方法

Wed, 30 Dec 2020 00:00:00 +0000

はじめに

Amazon EC2 に Nuxt.js 環境を構築する手順を解説します。

環境

Amazon Linux 2 AMI (HVM), SSD Volume Type（無料枠）

Nginx のインストール

サーバーアプリケーションとして Nginx をインストールします。

インストール手順

# amazon-linux-extras で nginx を有効化
sudo amazon-linux-extras enable nginx1

# nginx をインストール
sudo yum -y install nginx

# nginx を起動
sudo systemctl start nginx.service

# OS 再起動時に自動起動する設定
sudo systemctl enable nginx

セキュリティグループの設定

AWS コンソールでセキュリティグループの HTTP（ポート 80）を許可します。

【DokuWiki】 Bootstrap3 Templateのタイトルをかっこよく編集する

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

自分が運用している DokuWiki サイト(Bootstrap3 Template)がインデックスされるときに【dokuwiki [タイトル]】と表示されるのは他とかぶってダサいし見づらい。以下にバージョン【v2018-02-16】でのタイトルを変更してみた。追記【v2019-05-22】での変更方法も挙げておきます。

サイト設定から修正する

Bootstrap3 Template を使うと管理画面から tpl»bootstrap3»browserTitle 【@TITLE@-@WIKI@】を設定すると【dokuwiki-タイトル】に修正できるただこの方法だけだと名前空間を使用していた場合【dokuwiki-first:second:third】と表示されてさらにダサくなる

ソースを修正する

以下のファイルを修正する【dokuwiki フォルダ】/lib/tpl/bootstrap3/tpl_functions.php

18 行目あたり

include_once(dirname(__FILE__) . '/inc/simple_html_dom.php');

以下に修正する

include_once(dirname(__FILE__) . '/inc/parserutils.php');
include_once(dirname(__FILE__) . '/inc/simple_html_dom.php');

1308 行目あたり

return str_replace(array('@WIKI@', '@TITLE@'),
 array(strip_tags($conf['title']),　$browser_title),
 bootstrap3_conf('browserTitle'));

以下に修正する

$browser_title = p_get_metadata($ID,$key='title');

return str_replace(array('@WIKI@', '@TITLE@'),
 array(strip_tags($conf['title']), $browser_title),
 bootstrap3_conf('browserTitle'));

getBrowserPageTitle 関数の戻り値がそのまま Dokuwiki ページのタイトルとなる。

以上の変更で、ページの metadate から見出しを引っ張ってそのまま$browser_title を上書いてあげれば見出しがそのままタイトルとなる。つまり【===== 見出し ======】こういう見出しをページに設定していた場合【dokuwiki-見出し】となる

注意しなければならないのは見出しを設定しないと dokuwiki- となってしまう以上。

【Lambda + Boto3】AWSアカウント間でよりセキュアなSTS認証を行う

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

STS とは AWS Security Token Service (AWS STS) を使用して、AWS リソースへのアクセスをコントロールできる一時的セキュリティ認証情報を持つ、信頼されたユーザーを作成および提供することができます。アクセスキー認証情報と違いは以下の通りです。

STS が発行する、認証情報は一時的なものであり、一定時間で消失します。(時間は数分から数時間まで設定可能)
STS が発行する、認証情報はユーザーとともに保存されることはなく、ユーザーのリクエストによって提供されます。 IAM ユーザーが所有するアクセスキーをそのまま使用すると思いもよらない、セキュリティー事故が起こる可能性があります。 STS が発行する一時的なアクセスキーを持つユーザーを作成し、利用するほうが安全です。

以上を踏まえて、よりセキュアな別アカウントの情報を参照する Lambda を作成します。

参照先で AssumeRole を作成する

参照するテーブルの作成

AssumeRole とは STS の利用を許可するためのロールです。 IAM ロール作成に進んでください。

【アカウント ID】には連携先の AWS アカウントのアカウント ID を入力

このロールには DynamoDB のアクセス権限が欲しいため、ポリシー【AmazonDynamoDBFullAccess】を選択

必要あれば入力してください。今回は未入力です。

ロール名を適当に入力。今回は【assumeRoleDynamoDB】とします。これでロールの作成を行いましょう。

参照元で DynamoDB を作成

テスト用に参照する DyanmoDB を作成します。名前は【sample_tbl】とします。

参照先で Lambda 関数を作成

以下コードを入力し、Lambda 関数を実行してみてください。

【Linux】URLエンコードされてしまったファイル名を修正する方法

Wed, 04 Nov 2020 09:19:42 +0100

URL エンコードとは

フォームでデータを送信する際に、application/x-www-form-urlencoded の仕様に沿ってエンコードされる。
以下のようなパーセントと 16 進で変換されたもの修正する方法を記載する

テスト →%e3%83%86%e3%82%b9%e3%83%88

修正方法

以下を実行し、convmv をインストール

[example@123-45-67-89 ~]# sudo yum install convmv

修正対象ファイルが存在するか確認

[example@123-45-67-89 ~]# ls
%e3%83%86%e3%82%b9%e3%83%88.txt

convmv を実行

[example@123-45-67-89 ~]# convmv --notest --unescape ./%e3%83%86%e3%82%b9%e3%83%88.txt

デコードされたか確認

[example@123-45-67-89 ~]# ls
テスト.txt

おまけ

ディレクトリ内を再帰的にデコードする

[example@123-45-67-89 ~]# ls
%e3%83%86%e3%82%b9%e3%83%88.txt
%e8%a9%a6%e9%a8%93.txt

直下ディレクトリを再帰的にデコード

[example@123-45-67-89 ~]# convmv -r --notest --unescape ./*

デコードされたか確認

[example@123-45-67-89 ~]#
テスト.txt 試験.txt

以上です。

Amazon EC2 で Let'sEncrypt の証明書を取得する

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

Amazon EC2 で LetsEncrypt でサーバー証明書を発行する必要があったため、備忘録として書き残しておきます。

Bolume Type は Amazon Linux 2 AMI (HVM), SSD Volume Type(無料枠) です。

certbot の取得

wget で取得する

wget https://dl.eff.org/certbot-auto

2. 権限追加

chmod 700 certbot-auto

certbot-auto を Amazon Linux で使えるように修正

以下を検索し

elif [ -f /etc/issue ] && grep -iq "Amazon Linux" /etc/issue ; then
 Bootstrap() {
 ExperimentalBootstrap "Amazon Linux" BootstrapRpmCommon
 }
 BOOTSTRAP_VERSION="BootstrapRpmCommon $BOOTSTRAP_RPM_COMMON_VERSION"

2. 以下のように修正

 elif grep -i "Amazon Linux" /etc/issue > /dev/null 2>&1 || \
 grep 'cpe:.*:amazon_linux:2' /etc/os-release > /dev/null 2>&1; then
 Bootstrap() {
 ExperimentalBootstrap "Amazon Linux" BootstrapRpmCommon
 }
 BOOTSTRAP_VERSION="BootstrapRpmCommon $BOOTSTRAP_RPM_COMMON_VERSION"

3. コマンドで使えるように bin に移動する

CentOS7 に PHP7 をインストールする方法

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

CentOS7 に PHP7 をインストールする手順を備忘録として残しておきます。

前提条件

CentOS 7 系のサーバー
root 権限または sudo 権限

リポジトリの追加

CentOS の標準リポジトリには PHP7 が含まれていないため、外部リポジトリを追加する必要があります。

EPEL リポジトリの追加

まず EPEL リポジトリを追加します。

sudo yum install epel-release

実行結果:

Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: mirrors.advancedhosters.com
 * extras: mirrors.advancedhosters.com
 * updates: mirrors.advancedhosters.com
...
Installed:
 epel-release.noarch 0:7-11

Complete!

Remi リポジトリの追加

次に、PHP の最新版が提供されている Remi リポジトリを追加します。

sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

実行結果:

Docker で Go 環境を作成する方法

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

Docker を使って Go の開発環境を構築する手順を解説します。

前提条件

Docker がインストール済みであること
docker-compose が使用可能であること

Dockerfile の作成

作業ディレクトリを作成し、Dockerfile を作成します。

# ベースとなる Docker イメージ指定
FROM golang:latest

# コンテナ内に作業ディレクトリを作成
RUN mkdir /go/src/work

# コンテナログイン時のディレクトリ指定
WORKDIR /go/src/work

# Gin フレームワークをインストール
RUN go get github.com/gin-gonic/gin

# ホストのファイルをコンテナの作業ディレクトリにコピー
ADD . /go/src/work

# Go アプリケーションを起動
CMD ["go", "run", "main.go"]

docker-compose.yml の作成

同じディレクトリに docker-compose.yml を作成します。

version: '3'

services:
 app:
 build: .  # Dockerfile があるディレクトリを指定
 tty: true # コンテナの起動を永続化
 volumes:
 - .:/go/src/work  # ホストとコンテナのディレクトリをマウント
 ports:
 - 8080:8080 # ポートマッピング

コンテナの起動

以下のコマンドを順番に実行します。

dokuwiki-install

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

プラグインが充実しており多機能で DB も不要な wiki ツール、Dokuwiki をインストールしてみた。

前提

LAMP または LEMP 環境が作成済みであること。

Dokuwiki をダウンロードし配置

以下コマンドを実行

wget https://download.dokuwiki.org/out/dokuwiki-8a269cc015a64b40e4c918699f1e1142.tgz

tar -xzvf dokuwiki-8a269cc015a64b40e4c918699f1e1142.tgz

mv ./dokuwiki /ドキュメントルートへ

Dokuwiki のインストール

【サーバー IP/dokuwiki/install.php】にアクセスし下記をの画像を確認してください。パーミッションを設定していないためエラーが出ています。

ダウンロードした、dokuwiki ディレクトリに移動し、以下を実行

[example@123-45-67-89 dokuwiki]# chmod 777 conf
[example@123-45-67-89 dokuwiki]# chmod 777 data
[example@123-45-67-89 dokuwiki]# chmod 777 ./lib/plugins
[example@123-45-67-89 dokuwiki]# cd ./data
[example@123-45-67-89 data]# chmod 777 ./cache ./index ./locks ./media ./attic ./media_attic ./media_meta ./meta ./pages ./tmp

再度【サーバー IP/dokuwiki/install.php】にアクセスしてください。以下の警告が表示されているかと思います。これはユーザーに公開してはならないディレクトリが公開されていることで表示される警告です。非公開設定するべきディレクトリは以下の通りです。

ESLint で JavaScript を自動整形する

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

JavaScript で開発する際、コードスタイルのルールを統一することは重要です。ESLint を使用してコードを自動整形する方法を解説します。

使用するツール

パッケージ管理: npm
リンター: ESLint
スタイルガイド: eslint-config-google

Node.js のインストール

Node.js 公式サイトから Node.js をインストールし、npm を使用できる状態にしてください。

ESLint のインストール

作業ディレクトリで以下のコマンドを実行し、ESLint と Google スタイルガイドをインストールします。

npm install eslint eslint-config-google

ESLint の設定

作業ディレクトリに .eslintrc ファイルを作成し、以下の内容を記述します。

{
 "extends": ["google"],
 "rules": {
 "linebreak-style": ["error", "windows"]
 },
 "env": {
 "es6": true
 }
}

テストコードの作成

test.js というファイル名でテストコードを作成します。Google スタイルガイドでは、文字列にはシングルクォートを使用し、文末にはセミコロンが必要です。

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
 return x + y
}
document.write(add("Hello", "World"));

ESLint で自動整形

以下のコマンドを実行すると、ルールに従ってコードが自動修正されます。

HTMLHintでHTML5を自動整形をしてみた

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

HTML5 で開発していく上で、ある程度のルールは決めておく必要がある。 htmlhint を使用し、コード管理を自動化してみました。

パッケージ管理ツール npm
使用モジュール htmllint prettier

node をインストール

nodeをインストールし npm を使用できる状態にしてください。

package.json 作成

作業フォルダ内で、以下コマンドを叩いてください。対話式で聞かれる項目はすべてデフォルト状態で問題ないです。

npm init

以下が出力されます。

こんなのができます。

{
 "name": "test",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}

htmlhint とルールとフォーマッターをインストールする作業ディレクトリ内で、以下を実行し必要なモジュールをインストールしてください。

npm install htmlhint prettier

htmlhlint ルールを記述する

作業ディレクトリ内で、【.htmlhintrc】ファイルを作成し以下を記述する。

{
 "tagname-lowercase": true,
}

package.json を編集

以下を追記

Lambda boto3で別アカウントのAWSを操作しよう

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

Lambda boto3 で他 AWS の環境を簡単に操作する方法を記載します

参照元のアクセスキー ID とシークレットアクセスキーを取得

以下手順を実施

AWS サービス【IAM】に移動
ユーザー押下
【AdministratorAccess】ポリシーがアタッチされているユーザーを選択
認証情報タブを押下
アクセスキーの作成
アクセスキー ID をシークレットアクセスキーをメモ

参照元で dynamoDB 作成

テーブルを作成。名前は【sample_tbl】とします。

参照先アカウントで Lambda 関数を作成

以下コード

import boto3

def get_external_dynamodb():
 client = boto3.client('dynamodb',
 aws_access_key_id=[アクセスキー ID],
 aws_secret_access_key=[シークレットアクセスキー] ,
 region_name=[リージョンコード]
 )
 return client

def lambda_handler(event, context):
 external_dynamodb = get_external_dynamodb()
 external_table = external_dynamodb.scan(TableName = "sample_tbl")
 return external_table

以上です

LAMP（Linux, Apache, MariaDB, PHP）環境を構築する方法

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

LAMP 環境を構築する手順を備忘録として残しておきます。

環境

CentOS 7

Apache のインストール

まず Apache がインストールされているか確認します。

httpd -v

インストールされていない場合は以下のように表示されます。

bash: httpd: command not found

Apache をインストールします。

sudo yum install httpd

バージョンを確認します。

httpd -v

Server version: Apache/2.4.6 (CentOS)
Server built: Apr 24 2019 13:45:48

Apache の起動

ステータスを確認します。

service httpd status

起動していない場合は起動します。

sudo service httpd start

自動起動の設定

サーバー起動時に Apache も自動起動するよう設定します。

sudo systemctl enable httpd

Apache の動作確認

サーバーの IP アドレスにブラウザでアクセスし、Apache のデフォルトページが表示されることを確認します。

NginxサーバーのwebサイトををLet’sEncryptでHTTPS化してみた

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

自サイトを HTTPS 通信できるようにしたかったので、無料で証明書を発行してくれる Let’s Encrypt を使用してみました。

環境

CentOS 7
nginx

Let’s Encrypt のインストール

git を使用するので、install していない場合は、install してください

[user@123-45-67-89 ~]# sudo yum install git

Letsencrypt をインストール

[user@123-45-67-89 ~]#git clone https://github.com/letsencrypt/letsencrypt.git

[user@123-45-67-89 ~]# cd letsencrypt

[user@123-45-67-89 letsencrypt]# ./letsencrypt-auto --help

証明書を発行する

[user@123-45-67-89 letsencrypt]# ./letsencrypt-auto certonly --standalone -d 【所有しているドメイン名】

以下エラーが出た場合

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator standalone, Installer None
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for example.com
Cleaning up challenges
Problem binding to port 80: Could not bind to IPv4 or IPv6.

http サーバを起動してる場合起きるエラーです。下記コマンドで nginx を停止しましょう。apache を使用している場合も同様に停止してください。

node.jsでDynamoDBのデータを取得する方法まとめてみた

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

個人で DynamoDB を使う機会があり、node で操作する方法が AWS のドキュメントだとわかりづらかったため自分なりに修正してコーディングしてみました。

aws の DynamoDB に保存されているデータを取得するとき、色々な方法があったので個人的によく使う物を以下にまとめておきます。

getItem()を使って個別に取得する方法

一番簡単なデータ取得方法です。

パーティションキーを指定して、一件だけデータを取得できます。ログインユーザー情報などを取得するときに使えばいいのかなと思います。

ただパーティションキーだけしか指定できないため、使い勝手はあまりよろしくない。

以下の例では id をパーティションキーとして使います。

const dynamodb = new AWS.DynamoDB({ region: "ap-northeast-1" });

router.get("/get", (req, res, next) => {
 const params = {
 TableName: "user",
 Key: {
 id: { S: 1 }
 }
 };
 dynamodb.getItem(params, function(err, user) {
 const user = {
 id: "",
 name: "",
 };
 user.id = user.Item.id.S;
 user.name = user.Item.name.S;
 res.json(user);
 });
});

batchGetItem()でまとめデータを取得する方法

getItem があるんだから getItems もあるだろうと思ったのんですが、ありませんでした。

PHPのライブラリ管理ツールComposerをインストールしてみた

Wed, 04 Nov 2020 09:19:42 +0100

初めに

PHP のライブラリ管理ツール Composer をインストールしたので備忘録として残しておきます。参考: 　composer 公式サイト

環境

Linux(CentOS)
PHP7.0.33
Apache

インストーラーをダウンロードします。

[user@123-45-67-89 ~]# php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
[user@123-45-67-89 ~]# ls
composer-setup.php

インストーラーのチェック

問題ないとは思いますが、インストーラが有効なものかチェックします。【Installer verified】が表示されたら問題ないです。

[user@123-45-67-89 ~]# php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Installer verified

インストーラーを実行

インストーラーを実行し、【composer.phar】が出力します。

[user@123-45-67-89 ~]# php composer-setup.php
All settings correct for using Composer
Downloading...

Composer (version 1.8.5) successfully installed to: /home/centos/composer.phar
Use it: php composer.phar

[user@123-45-67-89 ~]# ls
composer.phar composer-setup.php

グローバルでコマンド実行できるように設定

composer.phar がちゃんと実行されるか確認する

spreadsheet

Wed, 04 Nov 2020 09:19:42 +0100

初めに

インストール方法を紹介する前に、以下の記事を参考に php7 系と Composer がインストールされている Linux 環境を準備してください。

https://wiblok.com/blog/it/composer-install/

必須ライブラリのインストール

以下コマンドを実行し PhpSpreadsheet で必須のライブラリをインストールしてください。

[user@ip-123-45-67-891 ~]$ sudo yum --enablerepo=emi,remi-php72 install -y php-xml php-gd php-mbstring php-zip

phpSpreadsheet のインストール

以下コマンドを実行し PhpSpreadsheet をインストールしてください。

[user@ip-123-45-67-891 ~]$ sudo composer require phpoffice/phpspreadsheet

以下コマンドで vendor ディレクトリが作成されていることを確認してください。

[user@ip-123-45-67-891 ~]$ ls
vendor

php と composer の設定さえできていれば割と簡単にインストールできちゃうと思います。

サンプルを動かしてみる

では公式サイトで公開されているサンプルを動かしてみましょう。 PhpSpreadsheet 公式

[user@ip-123-45-67-891 ~]$ sudo vi HelloWorld.php
<?php

require 'vendor/autoload.php';

use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;

$spreadsheet = new Spreadsheet();
$sheet = $spreadsheet->getActiveSheet();
$sheet->setCellValue('A1', 'Hello World !');

$writer = new Xlsx($spreadsheet);
$writer->save('hello world.xlsx');

以下コマンドで実行します。

StyleHintでCSS を自動整形する

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

CSS で開発していく上で、ある程度のルールは決めておく必要がある。
stylelint を使用し、コード管理する。
コードルールは stylelint-config-standard を使用する。

パッケージ管理ツール npm
使用モジュール stylelint prettier
使用ルール stylelint-config-standard

node をインストール

nodeをインストールし npm を使用できる状態にしてください。

package.json 作成

作業フォルダ内で、以下コマンドを叩いてください。
対話式で聞かれる項目はすべてデフォルト状態で問題ないです。

npm init

package.json ができます。

{
 "name": "test",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}

stylelint とルールとフォーマッターをインストールする作業ディレクトリ内で、以下を実行し必要なモジュールをインストールしてください。

npm install stylelint stylelint-config-standard prettier

stylelint ルールを記述する

作業ディレクトリ内で、【.stylelintrc】ファイルを作成し以下を記述する

Vagrant で Ruby on Rails 環境の作成する方法

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

以下記事を確認し、Ruby 環境を作成してください。
https://wiblok.com/blog/it/vagrant_ruby/

必要なモジュールをインストール

sudo apt-get update
sudo apt-get -y install git curl g++ make
sudo apt-get -y install zlib1g-dev libssl-dev libreadline-dev
sudo apt-get -y install libyaml-dev libxml2-dev libxslt-dev
sudo apt-get -y install sqlite3 libsqlite3-dev nodejs

Rails インストール

gem install rails

以上です。

VagrantでRuby環境を作成する方法

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

Ruby 環境を作成するとき、配布もバックアップも容易な Vagrant を使用することをお勧めします。
やること

VirtualBox のインストール
仮想化ソフトの VirtualBox をインストールします。
使用バージョンは 6.0.8 公式サイトから VirtualBox インストール

Vagrant のインストール

VirtualBox の設定や機能を簡単に使えるようにしたコマンドツールである Vagrant をインストールします。使用バージョンは 2.2.5 公式サイトから Vagrant インストール

Linux 環境を作成

Vagrant コマンドを使用し、環境を作成します。コマンドラインツールで以下を入力してください。 Windows に標準で入っているコマンドプロンプトでもかまいません。

# 作業フォルダ作成
C:\Users\> mkdir ruby_env
# 作業フォルダに移動
C:\Users\> cd ruby_env
# vagrantファイル作成
C:\Users\ruby_env> vagrant init bento/ubuntu-18.04
# 環境を作成し、起動
C:\Users\ruby_env> vagrant up
# 環境にSSHログイン
C:\Users\ruby_env> vagrant ssh

RVM インストール

Ruby のバージョン管理ツール RVM をインストールします。そのまま Ruby をインストールしてもかまわないですが、Ruby のバージョンを柔軟に変更できるようにしておいたほうがよいでしょう。環境に SSH ログインした後以下を実行してください。参考

VirtualboxをVagrantで賢く使う方法

Wed, 04 Nov 2020 09:19:42 +0100

Virtualbox とは

既存ホスト OS 上に別のゲスト OS を起動することができる仮想化アプリケーションです。

簡単に書くと、自分の PC 上に別の PC を起動できるアプリケーション。

利点としては、Windows OS 上で LinuxOS を使うことができ、以下のような機能があります。

スナップショット機能(バックアップ)
シームレス・モード(ホスト OS とゲスト OS での同時並行作業)
共有フォルダ(ホスト OS とゲスト OS 間でのファイル共有)
クリップボード共有

Vagrant とは

Virtualbox でゲスト OS(仮想環境)を作成を簡単にかつ管理しやすく再配布を用意にしてくれる CLI ツールです。

Virtualbox をインストール

VirtualBox を公式サイトからダウンロードしてインストール　 virsion は 6.0.6

デフォルトで以下のフォルダにインストールされる “C:\Program Files\Oracle\VirtualBox\VirtualBox.exe”

Vagrant をインストール

Vagrant を公式サイトからダウンロードしてインストール virsion は 2.2.4

以下コマンドでインストールされたか確認する(Git Bash)を使用

user MINGW64 ~/
$ vagrant --version
Vagrant 2.2.4

Vagrant Box のインストール

Vagrant Box とは、仮想マシンのテンプレートとなるファイルです。他社と共有するときはこの Box ベースで仮想環境を共有します。試しに他者が構築した CentOS 環境の Vagrant Box をインストールして使ってみます。

WordPressプラグインYadaWikiを使ってみた

Wed, 04 Nov 2020 09:19:42 +0100

はじめに

WordPress で簡単な wiki サイトを使ってみたいと思い、人気の高い YadaWiki をインストールして使ってみました。

なぜ YadaWiki なのか

プラグインであること
私自身が使いたいテーマがあり、Wiki テーマだとそれが使えないから
無料で使えること
お金がないから
サポート体制が充実されていること
開発者の dmccan さんが、記事作成時点ではすべての問題に答えてくれており、サポートされていると判断

定期的にアップデートされていること
記事作成時点では、二か月前に更新されておりました。
ユーザーからの評価が高い
以下の画像の通り高評価でした。

YadawWiki の特徴

このプラグインをインストールするだけで、使用しているテーマをそのままに、新しいインデックスを作成し、その下に wiki ページを作成できます。

さらに wiki ページはカスタムタグとカテゴリに分けることができ、目次オプションも提供してくれるので、サイトの利便性を向上させることができます。

サイトエディタには、2 つのショートコードボタンが提供されます。 Wiki のリンクを追加するボタンと Wiki リスト追加ボタンです。ブログサイトから Wiki サイトに飛ばす際に活用しましょう!

使ってみた感想

上述の通り使いやすいプラグインなのですが、私の使っているテーマと相性が悪かったのか、バグが出まくりました。

一応対応できる内容だったので修正はできたのですが、PHP の知識がないと、厳しいかもしれないです。デフォルトで入っているテーマでしたら問題なく運用できるので、このプラグインを使いたい人はそちらでの運用をお勧めします。

他に少し気になったのが、Wiki 内で検索機能はそのままでは使えないです。頑張ればできるらしいです。今回は緊急の内容ではなかったので私は試していません。

ですが PHP の多少の知識がある方ならば、利用することでサイトを簡単に wiki 化できる素晴らしいプラグインだと思います。興味がある方はぜひ使ってみましょう！

クラウドプラットフォーム(AWS vs Azure vs GCP)比較

Wed, 04 Nov 2020 09:19:42 +0100

概要

クラウドプラットフォームの採用は、新機能の導入・コストの削減・拡張性の向上のため様々な企業・案件で採用されてきました。
また個人でも使用する人が増えてきており、昨今のビジネスのスタートアップを推進してきました。
この状況からかオンプレミス（自社設備）から、クラウドに移行するという会社も少なくないです。

クラウドプラットフォームは基本的に、インターネットを通じて、サーバーやストレージ、データベース、ソフトウェアなどの開発を手助けするサービスが提供されており、それぞれの会社が提供するクラウドプラットフォームで値段や機能、利便性が違います。

ここでは、それぞれのクラウドプラットフォームを比較し、あなたのプロジェクトにとって最良の選択肢を紹介します。

AWS(Amazon Web Service)

Amazon が提供するクラウドプラットフォームです。

クラウドプラットフォームの元祖であり、2004 年に登場してからシェア率トップを維持してきた巨大なクラウドプラットフォームです。
現在でも様々な選択肢が増えてきたにも関わらずシェア率は 30%を超えています。

クラウドプラットフォームのデファクトスタンダートといえるサービスであり、
幅広い開発要件に対応できるのが強みです。とりあえず候補に入れるべき存在です。

メリット

デファクトスタンダード
クラウドプラットフォームのデファクトスタンダードであり、ドキュメントも豊富です。調べれば大概の不具合は解決できます。
日本で 2 つのリージョン提供
日本だけのメリットですが、東京・大阪リージョンを提供しています。これにより日本で公開するサービスにおいて速度向上のメリットが受けられます。
豊富なサービス
AWS で提供されていなくて他のクラウドプラットフォームで提供されているサービスはほぼないです。開発要件にあったサービスが必ずあります。
豊富なドキュメント
ドキュメントが豊富なことです。

デメリット

ハイブリッドクラウド戦略を無視
オンプレミスとクラウドを使用を同時に使用する戦略をハイブリッドクラウドと呼ぶのですが、AWS はそれを認めていません。もしあなたがオンプレミスも同時に運用したいというのであれば、AWS は少し難しい選択肢になると思われます。
管理が難しい
AWS 自体様々なサービスがあり、それをどのように組み合わせて使うかは技術者の手にゆだねられます。しかし多くの場合、一人で管理することが難しくどのようなサービスが使用されているか管理者も理解できなくなってくるでしょう。例えば EC2 で WEB サービスを公開したい場合を例に出してみると、EC2 管理画面で Elastic IP を取得し、Route53 でドメイン登録、DB を使用する場合は RDS を契約し紐づけたりします。単純な WEB サービスを公開するだけでもこれほど必要な操作が多いですが、Lambda で静的サイトを作ろうとしたときもっと大変になることが予想されるかと思います。そのため、クラウドプロバイダーなど AWS を使うことに消極的です。

Azure(MicrosoftAzure)

Azure は、Microsoft が運用・開発を行っているクラウドプラットフォームです。AWS と比較して大きな魅力は、組織的にクラウド以降を支援してくれています。あなたがオンプレで Windows システム(Windows Server、SystemCenter、ActiveDirectory)を利用しておりかつ、クラウドに移行したいと考えている場合、非常に協力な選択肢となります。

またシェア率自体は AWS に負けていますが、ゴールドマンサックスの調査によると、上位の IT エグゼクティブにアンケート調査を実施した結果、Azure のほうが人気でした。

ワイヤフレームとは

Wed, 04 Nov 2020 09:19:42 +0100

ワイヤフレームとは

ワイヤーフレームとは、コストと再現度が最も低いデザイン表現です。主に以下の構造要素で構成されています。

コンテンツのグループ - 情報のまとまり
コンテンツの配置 - レイアウト構成
コンテンツの説明とインターフェース同士の関係 - 要素間の繋がり

ワイヤーフレームを作るメリット

1. 情報の整理ができる

レイアウト設計: コンテンツの配置をあらかじめ整理できる
コンテンツ計画: 表示する情報（画像・文章など）を事前に整理できる

2. 認識合わせができる

エンジニア・デザイナー・クライアント間のコミュニケーションツールとして活用でき、認識のずれを防ぎます。結果的に工数の短縮にも繋がります。

3. アイディア出しの土台になる

スタートアップ時のたたき台として、素早くアイディアを形にできます。

ワイヤフレーム作成時の注意点

色について

不適切な色を使用しない - ワイヤフレームはカラフルである必要がない
グレーの濃淡を活用 - 階層を視覚的に表現する
画像やアイコンは常にグレー - 視覚的に目立たせない
テキストは読みやすく - 適切なコントラストを確保する
機能的な色は使用可能 - リンクは青、アラートは赤、確認は緑、警告は黄色
黒は避ける - 境界線に黒を使うとワイヤフレームが乱雑になる

デザインについて

デザインを凝りすぎない - シンプルに保つ
醜い画像・アイコン・奇抜なフォントは使用しない
実際のサイズを使用する - 例: スマートフォンは 375px、タブレットは 768px など

コミュニケーションについて

他の人が理解できない記号やコードは記載しない
理解しやすいアフォーダンスを意識する

ワイヤフレーム作成前に知っておくべきこと

ドキュメントを記載する - アラートやモーダルなど、小さな UI 要素についても説明を書く
メイン画面から作成する - 主要なデザインコンポーネントは他箇所でも再利用される可能性が高く、手戻りが少ない
状態変化は画面を分けて記載 - ホバー、クリック後など、状態が変わる場合は別画面として表現する