2020年9月23日水曜日

VSCode + Python + Flask + Docker で環境構築 #03. 運用環境を構築してみる

どうも、最近うちの娘(3歳)が「アレクサ、テレビ付けて」と
リモコンを使わなくなったことに一抹の不安を覚える
もりもりです。

今回はFlaskアプリやサービスを作って公開する場合の運用環境についてです。

#01. Flaskアプリをdocker上で動かしてみる
#02. vscodeのRemote Developmentでデバッグしてみる
今回はこちら → #03. 運用環境を構築してみる

まずは

第1回、第2回で作ったコンテナをそのままどこかのクラウドサービスへ
デプロイしたらダメなの?というところですが
公式ドキュメントでは以下のように書かれています。

When running publicly rather than in development,
you should not use the built-in development server (``flask run``).
The development server is provided by Werkzeug for convenience,
but is not designed to be particularly efficient, stable, or secure.

Instead, use a production WSGI server.

ということのようです。
flask runで実行した開発サーバーを本番環境で使用するべきではないと。
効率性、安定性、セキュリティを意識して設計してはいないよと。

代わりに本番環境ではWSGIサーバーを使ってねと。

てなわけで、WebサーバーとAppサーバーを用意し
WebサーバーとFlaskを繋ぐインターフェース
WSGI (Web Server Gateway Interface) を利用して
通信する環境をコンテナで作成していきます。

今回使用するWSGIサーバーはuWSGIです。
Flask + Docker + Nginx + uWSGI で環境を作っていきたいと思います。

ちなみにWSGIの読み方は「ウィズギー」だそうです。

ディレクトリ構成


flask-product
  ├── app
  │ ├── Dockerfile
  │ ├── requirements.txt
  │ ├── run.py
  │ └── uwsgi.ini
  ├── web
  │ ├── Dockerfile
  │ └── nginx.conf
  └── docker-compose.yml

ソースコードはGithubにあります。


app/Dockerfile


WORKDIRを変更し、CMDを追加します。

# base image
FROM python:3.8.5

ARG project_dir=/var/www/

# workdir にファイル等追加
COPY requirements.txt $project_dir

# workdir
WORKDIR $project_dir

# upgrade pip
RUN pip install --upgrade pip
RUN pip install --no-cache-dir -r requirements.txt

CMD ["uwsgi","--ini","/var/www/uwsgi.ini"]

追加したCMDですが、 docker-compose.ymlに下記を追加しても問題ないと思います。(また試しときます。)
command: uwsgi --ini /var/www/uwsgi.ini

app/equirements.txt & run.py


uwsgiをインストールするので追加します。
Flask
uwsgi

app/uwsgi.ini


uWSGIの設定ファイルです。
[uwsgi]
wsgi-file = run.py
callable = app
master = true
processes = 1
socket = :3031

web/Dockerfile


公式イメージをベースとします。
# base image
FROM nginx:latest

CMD ["nginx", "-g", "daemon off;", "-c", "/etc/nginx/nginx.conf"]

web/nginx.conf


Nginxの設定ファイルです。
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    upstream uwsgi {
        server app-server:3031;
    }

    server {
        listen 80;
        charset utf-8;

        location / {
            include uwsgi_params;
            uwsgi_pass uwsgi;
        }

    }
}

31行目のホスト名にはdocker-compose.ymlで指定したapp側のホスト名を指定します。

docker-compose.yml


コンテナをapp-serverとweb-serverの2つに分けます。
ホスト名も忘れずに設定しておきます。
version: "3"

services:
    app:
        container_name: app-server
        hostname: app-server
        build: ./app
        volumes:
            - "./app:/var/www/"
        ports:
            - "3031:3031"
        environment:
            TZ: Asia/Tokyo
  
    web:
        container_name: web-server
        hostname: web-server
        build: ./web
        volumes:
            - "./web/nginx.conf:/etc/nginx/nginx.conf"
            # nginxのログをホストOS側に出力
            - "/tmp/nginx_log:/var/log/nginx"
        links:
            - app
        ports:
            - "4231:80"
        environment:
            TZ: Asia/Tokyo

コンテナを起動して動作確認


$ docker-compose up -d

コンテナが起動すればブラウザから下記にアクセスするだけです。

http://localhost:4231


はい、運用環境用のコンテナができました。
あとはNginxやuWSGIの設定を本番用にちゃんと設定してから
どこかのクラウドサービスへデプロイしてあげればよさそうですね。



以上、もりもりでした。

2020年9月15日火曜日

Blogger.comでSyntaxHighlighterからPrism.jsに乗り替え

どうも、もりもりです。

ソースコードなどをキレイに見せてくれるシンタックスハイライト。
以前はSyntaxHighlighterを使用していたのですが
公式サイトがなくなってしまい? アクセスできなくなっていたため
ブログの表示がものすごく遅くなっていました。
(Githubにはソースはあるようですが)
そのためテーマから削除することに。。。

で、そのまま放置していたのですが、今回もりもりの連載
ソースコードなどを載せることがあったので他にイイのがないか
探してみました。
そこで見つけたのが Prism.js でした。
設定方法や使い方をメモとして残しておこうと思います。

プラグインの選定

まずはプラグインを選定します。
今回は下記のプラグインを使用します。
・Line Numbers
  行番号を表示
・Line Highlight
  指定行をハイライト
・Toolbar
  ツールボタンを表示するバーを追加
  Copy to Clipboard, Download Button, Show Language 使用時に必要
・Copy to Clipboard
  コピーボタンをツールバーに表示
・Autoloader
  ハイライトする言語を自動的にロード
・Command Line
  コマンドライン用

設定方法

bloggerのテーマ→カスタマイズ→HTMLの編集でHTMLを開き
</head>と</body>の直前に下記を追加します。

<head>
    ・・・
    ・・・
    <!-- Themes -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-tomorrow.min.css" />
<!-- All Themes
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-coy.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-dark.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-funky.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-okaidia.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-solarizedlight.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-tomorrow.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-twilight.min.css"/>
-->
    <!-- Line Numbers -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.css" />
    <!-- Line Highlight -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-highlight/prism-line-highlight.min.css" />
    <!-- Toolbar (Copy to Clipboard, Download Button, Show Language 使用時に必要) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/toolbar/prism-toolbar.min.css" />
    <!-- Command Line -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/command-line/prism-command-line.min.css" />
</head>

<body>
    ・・・
    ・・・
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js"></script>
    <!-- Line Numbers -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- Line Highlight -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-highlight/prism-line-highlight.min.js"></script>
    <!-- Toolbar (Copy to Clipboard, Download Button, Show Language 使用時に必要) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/toolbar/prism-toolbar.min.js"></script>
    <!-- Copy to Clipboard -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <!-- Autoloader -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <!-- Command Line -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/command-line/prism-command-line.min.js"></script>
</body>
追加したいプラグインのlinkやscriptタグは下記から選択できます。

後から知ったのですが、下記の方がラクかも。

使い方

■ Line Numbers

<pre class="line-numbers">
<code class="language-cs">if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}</code>
</pre>
こんな感じで<pre class="line-numbers">と指定すると
下記のように行番号が表示されます。
language-xxxlang-xxxでもOKです。
if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}

■ Line Highlight

<pre class="line-numbers" data-line="1,5-8">
<code class="lang-cs">if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}</code>
</pre>
こんな感じで<pre data-line="1,5-8">と指定すると
下記のように指定行がハイライト表示されます。
if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}

■ Command Line

※近々更新します!!!

なかなかイイ感じですね。
今回はテーマをTomorrowNightにしてますが他にも7種類あります。
サポートされている言語も多いですし今風な感じで気に入りました。
公式サイトでテーマやサポート言語、プラグインなど確認できます。
過去の記事でSyntaxHighlighterを使用していた箇所も
随時修正していきたいと思います。


以上、もりもりでした。

2020年9月13日日曜日

VSCode + Python + Flask + Docker で環境構築 #02. vscodeのRemote Developmentでデバッグしてみる

どうも、もりもりです。

今回はPython + Flaskの開発環境をDocker上に持っていき
コンテナ上にあるソースをvscodeでデバッグしてみます。

#01. Flaskアプリをdocker上で動かしてみる
今回はこちら → #02. vscodeのRemote Developmentでデバッグしてみる
#03. 運用環境を構築してみる

拡張機能「Remote Development」をインストール


まずは拡張機能をインストールします。


Extension Packとなっており、インストールすると下記の3つがインストールされます。

・Remote - WSL
・Remote - Containers
・Remote - SSH

今回はコンテナ上のソースをデバッグするので「Remote - Containers」を使用。

ディレクトリ構成


flask-dev
  ├── .devcontainer
  │ └── devcontainer.json
  ├── .vscode
  │ └── launch.json
  ├── docker-compose.yml
  ├── Dockerfile
  ├── requirements.txt
  └── run.py

ソースコードはGithubにあります。


Dockerfile


前回と違い、今回はproject_dirは宣言するだけで、値を指定しません。

# base image
FROM python:3.8.5

ARG project_dir

# workdir にファイル等追加
ADD requirements.txt $project_dir

# workdir
# なければ新規作成
WORKDIR $project_dir

# upgrade pip
RUN pip install --upgrade pip
RUN pip install -r requirements.txt

docker-compose.yml


project_dirをここで設定します。
volumesで作業場にマウントします。

version: '3'

services:
    web:
        container_name: dev_flask
        build:
            context: .
            args:
                project_dir: "/work/"
        ports:
            - "5000:5000"
        volumes:
            - ".:/work"
        environment:
            TZ: Asia/Tokyo
            FLASK_ENV: "development"
        command: "sleep infinity"

requirements.txt & run.py


前回のファイルそのままです。

devcontainer.json を追加


ウィンドウ左下の赤枠をクリックし、
「Remote-container: Add Development Container Configuration Files...」を選択
docker-compose.ymlから設定ファイルを作成するため
「From 'docker-compose.yml'」を選択
これでdevcontainer.jsonが作成されるので編集します。
dockerComposeFileにyamlファイルが2つ指定されていますが、
一つ上の階層にあるファイルのみ使用するため、
設定ファイルと同階層にあるdocker-compose.ymlは削除します。

{
    "name": "RemoteDevFlask",
    "dockerComposeFile": [
        "../docker-compose.yml",
        // "docker-compose.yml"
    ],
    "service": "web",
    "workspaceFolder": "/work",
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance"
    ]
}

また、vscodeでPythonの開発するために必要な拡張機能を
コンテナにインストールするため、extensionsにPython関連の拡張機能を指定します。
指定する値は下記の赤枠のように、拡張機能名の右に表示されているIDです。

コンテナを開く


再度ウィンドウ左下にある赤枠部分をクリックし、
「Remote-Containers: Reopen in Container」を選択します。
無事にコンテナ上のProjectDir「work」を開くことができました。
vscodeの拡張機能を確認すると、コンテナ上には下記二つがインストールされていることがわかります。
(アイコン右下にリモートだと認識できるマークが付いている)
インストールされていないようであれば、通常と同様にコンテナに対して
画面から拡張機能をインストールすることが可能です。

デバッグ用設定ファイルを作成


vscodeのデバッグメニューを選択すると、まだデバッグするための設定ファイルがないため
下記のような表示になっています。
※ run.pyを開いた状態でデバッグメニューを選択する必要あり。

まずはlaunch.jsonを作成します。
今回はFlaskアプリのため「Flask」を選択
「run.py」を入力


ソースコードの任意の場所にブレークポイントをはり
いざデバッグ実行。
無事にデバッグできるようになりました。

開発環境をDocker化してしまえば、以下のようなメリットがありますね。
・自分のPCに無駄なものをインストールする必要がない
・メンバー全員が同じ環境で開発できる
・環境構築の手間が省ける
・運用環境と同じ環境でデバッグができる

ただイイことばかりではなく、WindowsPCだとDocker環境の構築が少しややこしそう?
Windows10のバージョン2004からはWSL2(Windows subsystem for linux 2)のおかげで
Hyper-VなしでもLinuxコンテナを動かせるようになったとか?
まだ2004にアップデートしてないのでアップデートしたら試してみようと思います。


以上、もりもりでした。

2020年9月8日火曜日

VSCode + Python + Flask + Docker で環境構築 #01 : Flaskアプリをdocker上で動かしてみる

どうも、もりもりです。

最近Dockerとか触ってみてるので開発環境作ったり運用環境を作ったりといったところで
連載したいと思います。

こんな感じで。

今回はこちら → #01. Flaskアプリをdocker上で動かしてみる
#02. vscodeのRemote Developmentでデバッグしてみる
#03. 運用環境を構築してみる

まずはDocker上にPythonやらFlaskやらをインストールし、
ソースを置いて実行してホストPCからアクセスしてみる。

環境


・ macOS Catalina 10.15.6
・ VSCode 1.48
・ Docker 19.03.12
・ Docker Compose 1.26.2

ディレクトリ構成


flask_hello_world
  ├── docker-compose.yml
  ├── Dockerfile
  ├── requirements.txt
  └── run.py

ソースコードはGithubにあげてます。



Dockerfile


Python公式のイメージからDockerイメージを作成します。
# base image
FROM python:3.8.5

ARG project_dir=/work/

# workdir にファイル等追加
ADD run.py $project_dir
ADD requirements.txt $project_dir

# workdir
# なければ新規作成
WORKDIR $project_dir

# upgrade pip
RUN pip install --upgrade pip
RUN pip install -r requirements.txt

# port
EXPOSE 5000

ENV PYTHONPATH "${PYTHONPATH}:/code/"
ENV FLASK_APP "/run.py"

docker-compose.yml


こちらはDockerイメージのビルド情報やコンテナ起動時の情報などを
定義するファイルです。

version: '3'

services:
    web:
        container_name: hello_flask
        build: .
        ports:
            - "5000:5000"
        tty: true
        environment:
            TZ: Asia/Tokyo
        command: flask run --host 0.0.0.0 --port 5000

requirements.txt


インストールしたいパッケージやバージョンを指定します。
flask

# バージョンまで指定する場合
# flask == 1.1.2

pip freeze で現在の環境にインストールされたパッケージと
バージョンを確認することができます。
よって下記を実行してそのままファイルへ書き出し。

$ pip freeze > requirements.txt

run.py


from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "Hello Flask!"

@app.route("/hello/<name>")
def hello_someone(name):
    return "Hello " + name + " !"

コンテナを起動

下記コマンドでコンテナを起動します。
$ docker-compose up -d

動作確認


コンテナが起動すればブラウザから下記にアクセスするだけです。

http://localhost:5000

http://localhost:5000/hello/{name}
※ {name} の部分はご自由に置き換えてください。

コンテナを停止

コンテナを停止する際は下記コマンドを実行してください。
コンテナの起動や停止はDocker Desktopから行ってもOKです。
$ docker-compose stop


うん、とりあえず動きましたね。

次回は開発環境としてソースなどをコンテナにのせて
デバッグ実行できるようにしたいと思います。


以上、もりもりでした。

2020年8月28日金曜日

Office 2013を再インストールしてみた!

6年前に購入した、Office 2013がバンドルされたWindows 7搭載PCを、Windows 10にアップグレードしていました。
このPCをリセットしたところ、Windows 10は初期状態に戻る一方、予想通りOffice 2013はなくなってしまいました。
その状態からOffice 2013を再インストールする手順のメモです。

Microsoft アカウント ダッシュボードにサインインし、「サービスとサブスクリプション」の「サブスクリプションを開始する」を選択します。
サインインしたアカウントはダウンロードするために必要なだけで、Officeへは別のアカウントでサインインできます。



プロダクトキーを入力し、地域を選択します。



製品が正しく確認されたので、ダウンロードし、インストールします。


アプリケーションの初回起動時にライセンス認証画面が表示されます。
「プロダクトキーを代わりに入力する」を選択し、プロダクトキーを入力します。



またいつか、どこかで。

2020年8月23日日曜日

NCASE M1v6.1で自作PCを組む - 組立編

こんにちは。やっまむーです。
前回のブログで自作PCのパーツを選びました。 今回は実際に組立を進めていきます。

購入パーツとケースについて


前回、パーツを選んだ際は第9世代のCore i5を選びました。
CPUは届いたのですが、あわせて注文したマザーボードがなんと在庫無しに!
急いで色々なサイトをまわりましたが、結局入手できずに終わってしまいました。
なので、第10世代にグレードアップしています。
パーツ一式
現在使用中のPCケースとサイズ比較
今回使いたかったフロントUSB3.2端子

CPUとM.2 SSDの取り付け


今回選んだマザーボードは「asus ROG STRIX Z490-i Gaming」。
ゲーミング仕様だけあってヒートシンクが大きいです。
特にバックパネル側については、CPUクーラーと干渉しそうです。
今回購入したCPUクーラー「M9 Plus」はファンの位置を少しずらせば設置できると先人の知恵があったので選んでいます。
実際に設置すると、予想通りかなりギリギリです。
「M9 Plus」は左右のバランスが異なるので、向きを変えれば写真のようにバックパネルに干渉しないのですが、反対側はメモリの上にファンがせり出しています。
ヒートシンク付きのメモリだと確実にアウトなので、パーツ選びが難しいです。
M.2 SSDはCPUの下側、ログが刻印されているヒートシンクの部分に取り付けます。
2層式になっており、最大2枚まで設置できるので、システム用に250GB、データ用に1TBを用意しました。
システム用ならこれくらいで十分
ドライブレス実現のためにデータ用もM.2を選択
これで取付完了です。
下側が押さえつけられて若干歪んでる・・・

ケースへ組み込み


バックパネル一体型なのでケースへの取り付けは過去一でやりやすかったです。
初めてMini-ITXで自作していますが、上部も全部取り外せるので作業はしやすいです。
電源には取り付け用のブランケットをネジ止めしてからケースに取り付けます。
電源を取り付けるとこんな感じ。
この後、電源が邪魔でフロント用のケーブルが接続しづらく、一度電源を外す事になりました。
リアの9cmファンは排気、サイドの12㎝ファンは吸気で取り付けてケース内のエアフローを確保します。
上から見るとこんな感じ。
無駄なケーブルが少ないのでとてもスッキリしています。
グラフィックボードは後々、今のPCから抜き取る予定です。
まだデータの整理がすんでいないので、一旦はオンボードで動作確認します。
無事にBIOSの起動を確認、各パーツが正しく認識されている事を確認できたのでこれで完成です。

負荷がかかっていない時は電源のファンが停止し、他のファンも低速回転しているので静かです。
負荷をかけた際にどこまで回転数があがるかわかりませんが、これなら机の上に置いても音に悩まされることはなさそうです。

この後、Windows10のインストールをしたのですが、ちょっと余所見をしている間にインストールが終わっていました。
むしろインストールメディア(USB)を作る方に時間がかかったぐらいです。

これにてPCの組立は完了です。
あとはデータの引っ越しが残っていますが、こちらは時間を見つけて少しずつ進めていきます。

ではではー。

2020年8月10日月曜日

タブレット(Lenovo Yoga Smart Tab)を購入したので感想など

こんにちは。よっしーです。

前からタブレットが欲しいな~と思っていて、

いろいろな商品をチェックしながら、

買い時を伺っていたのですが、

目星をつけていた商品がいろいろな店で在庫切れに

なっていくのを見て、今しかないと思い購入することにしました。

Lenovo Yoga Smart Tab の Wifiモデルです。


ちょっと変わった形をしており、

下部が円柱状のスピーカーになっていて、結構いい音が出ます。


で、これを購入した決め手は、

「キックスタンドが内蔵されていること」です。


このスタンド、良い感じの固さがあり、角度をつけることでいろいろな使い方が出来ます。

ディスプレイっぽく立てて使ったり

キーボードっぽく、机上に角度をつけて置いて操作したり、

直角の棚とかなら、スタンドで引っ掛けることも出来ます。

スタンドに穴が開いているので、全開にしてフック等に掛けることも。



私は、CPUパワーやメモリが必要な用途はあまり考えておらず、
Webサイト閲覧や動画視聴、地図表示など、
それぐらいのアプリが問題なく動作出来れば良い。と考えているので、
スペックはあまり気にしていません。

スペック的に同等で、Yoga Smart Tab よりも安いタブレットもいろいろとありますが、
私はこのキックスタンドが付いているだけで付加価値として十分良い商品でした。

タブレット購入を検討されている方は、
一度、Lenovo の Yoga Smart Tab も候補に
入れてみてはいかがでしょうか?

ではまた~。

2020年8月3日月曜日

vscode #04 : Explorerのシングルクリックでのプレビュー表示をやめる

こんばんは、もりもりです。

vscodeネタ第4弾です。
vscodeのフォルダExplorerで、ファイルを選択した際に
ファイルをプレビュー表示するのをやめる方法です。

小ネタですが、地味にワンクリックでファイルが開くのが
鬱陶しいと思われてる方もいるかもなので。
シングルクリックで一つのタブでファイルを開いて行くので
タブが増えないというメリットはあるのですが
開いておきたいファイルがたまにどこいった?なんてこともあるんですよね。

設定方法の変更



[Ctrl + ,] (Macの場合は [command + ,]で設定を開く
Workbench -> List: Open Mode
デフォルトはsingleClickになっています。

doubleClickに設定を変更すればOKです。

これでExplorerでファイルを選択してもファイルは開かれなくなりました。

この機能、ViualStudioでもそうですよね〜。
もりもりは真っ先にオフにする機能ですが、デフォルトってことは
シングルクリックでのプレビュー表示を利用している方のほうが多いってことですかね?
皆さんはどっち派???

過去のvscode関連記事はこちらを↓↓↓

以上、もりもりでした。

2020年7月19日日曜日

NCASE M1v6.1で自作PCを組む - パーツ選定

こんにちは。やっまむーです。

皆さんは自作PCに興味ありますか?
私の友人達の間では自作PCを使っている率が高かったのですが、会社に入ってみると案外興味ある人が少ない印象です。

自宅では7年ほど前に組んだ自作PCを使っています。
性能としては今のところ問題ないのですが、ケースが大きくて最近は置き場所に困っています。
なので、机の上におけるようなコンパクトなPCに変えようかと検討していました。

ケースの検討


PCケースについては机の上における事を考えて以下の条件で探していました。
  • Mini-itx対応
  • フロントにUSB-typec装備
  • 高さ350㎜以下
  • グラフィックボード搭載可
今まではサイズに関して特に考慮していなかったので、選択肢が多く価格も安かったのですが、小型PCケースは全体的に高価なものが多いです。
以下、候補に挙げていたものです。
これらを比較していき、ケースは最終的にNCASE M1に決定しました。
決め手としては、LED付きファンを搭載する予定がなくサイドパネルが透明である必要性がない事、机の上に置くということで、静音性も重視しました。

各種パーツの検討


続いて他のパーツも検討していきます。
ケースをNCASE M1にしたこともあり、マザーボードの選択は非常に限られてきます。
Mini-ITXかつ、フロントUSB3.1 Gen2対応が条件となりますが、公式ブログで公開している対応マザーボードのリストから選ぶ形になります。

CPUについてはIntel系で考えていましたが、最近第10世代のCPUが発売された事もあり、選択肢が多い状況です。
今回は予算を考えて少し値下がりしてきた第9世代のCore i5を選びました。

グラフィックボードは比較的最近購入したこと、最近はPCでゲームする機会が少ないので今使っているものを流用します。

そして、ストレージはM.2規格のものでOS用、データ用の2枚を用意します。
小型PCケースなので、配線はできれば少ない方が組み込みやすくなります。
以前組んだ時にはなかった選択肢なのでわくわくします。

その他、電源やケースファン等を選び、最終的な構成は以下のようになりました。

CPU インテル
Core i5 9400 BOX
CPUクーラー CRYORIG
M9 Plus
マザーボード ASUS
ROG STRIX Z390-I GAMING
メモリ crucial 
CT2K8G4DFS832A [DDR4 PC4-25600 8GB 2枚組]
グラフィックボード MSI
GeForce GT 1030 2G LP(流用)
ストレージ1 WESTERN DIGITAL
WD Blue SN550 NVMe WDS250G2B0C
ストレージ2 WESTERN DIGITAL
WD Blue SN550 NVMe WDS100T2B0C
電源 Corsair
SF600 CP-9020105-JP
ケースファン1 noctua
NF-A9 PWM
ケースファン2 noctua
NF-A12x25 PWM
PCケース NCASE
M1 v6.1

最安値を調べながら注文して総額13万弱でした。
あとはパーツが届き次第組むぞー!
と意気込んでいましたが、ここで誤算が。

マザーボードが品薄状態となり、どこも在庫問合せ状態になってしまいました。
CPUを先に注文していたため、第10世代のCPU/マザーボードに変更する事もできません。
7月末くらいには届くようなので、それまでは待つしかありません。

届きましたら組み立て編を書く予定ですので、続きはお待ちください。

ではではー。

2020年7月10日金曜日

PCに必ずインストールしたい!クリップボード履歴ソフト、Clibor(クリボー)


こんにちは。よっしーです。

今回は私がよく使う便利なフリーソフトを紹介します。




このソフトは、クリップボードを履歴化してくれるソフトです。

プログラムを書く際など、コピペすることが多々あると思いますが、

PCの標準機能だと、直近にコピーした内容しかペーストすることが出来ません。


このクリボーを使えば、以前コピーした内容を履歴として覚えているので、

履歴を表示して選ぶだけで、過去にコピーしたテキストをペーストすることが出来ます。


単純な機能ですが、プログラミングや資料作成など、さまざまな作業が効率的になります。


Ctrlキーを2回叩くと、コピーしたテキストの履歴が表示されます。

リストから選択するだけで、ペーストされます。



他にも定型文を登録しておくことが出来るので、

何かと使い勝手がいいんです。


このソフトが入っていないPCはもう使えないぐらい、

便利な機能ですので、興味のある人は一度使ってみて下さい。


ではまた~。

2020年7月6日月曜日

vscode #03 : 便利機能

こんばんは、もりもりです。

vscodeの便利機能 第三弾です。

今回は下記の拡張機能です。

vscodeでクラスやメソッドなどにコメントを書く際に便利な拡張機能です。

普段は仕事でVisualStudioを使用しているのですが
当たり前のように使っている機能で
vscodeにはデフォルトではない機能なんですねぇ。えぇ。
インストールするとこんな感じです。


「///」と入力するとコメントの雛形を作成してくれます。
サポートされてる言語は「C、C++、C#」ですが
Javaでも使用できました。
「/**」と入力するとJavadoc用のコメントとして雛形を作成してくれます。

地味かもですが非常にありがたい機能です。
vscodeでCやC#、Javaなどのコードを書くことがあればぜひお使いください!!!

過去のvscode便利機能はこちらを↓↓↓

以上、もりもりでした。

2020年6月28日日曜日

Monaca Educationで「ぷよぷよプログラミング」を試してみる

こんにちは、やっまむーです。

いつも時代の先端をいくセガがぷよぷよのプログラミング教材を世に出してきました。

【公式】ぷよぷよeスポーツ×プログラミング

ぷよぷよのプログラムがどういうものか気になりますし、環境も簡単に準備できそうなので早速試してみました。

Monacaのアカウント作成


Monaca Educationのページで「アカウント作成」を選択し、メールアドレスとパスワードを入力します。

②確認メールが送信されます。メールに本登録用のリンクが書かれているので選択します。


③利用プランを選択します。今回はお試しなので「Freeプラン」を選択します。

④これでアカウント作成は完了です。

ソースコードの入手とプロジェクトのインポート


【公式】ぷよぷよeスポーツ×プログラミングでソースコード一式と小冊子のPDFをダウンロードします。

「ぷよぷよプログラミング」サポートページでプログラミングのコースを選択します。コースによって入力するコード量が変わってきます。

③インポートの画面が出てくるので、Monaca Educationで作成したアカウントでログインします。ログインするとインポートボタンが表示されるのでこれを押します。


④インポートが完了すると、自動的にMonacaのダッシュボードに移動します。プロジェクトにぷよぷよプラグラミングが追加されています。これを選択するとIDEの画面に切り替わります。
⑤ダウンロードしておいたソースコード等のPDFに従ってプログラミングを始めます。


コースの内容はぷよの落下や回転といった基本の動きを自分で実装して進めていきます。
テキストはプログラム初心者でもわかるように細かく書かれおります。
自信があれば、上級コースでゲームの動作部分を全て自分で入力することもできます。
一通りやれば、初心者であればプログラムの楽しみを、上級者であれば落ちものゲームの基本的なロジックがわかるようになっています。

環境構築に時間がかからないので、皆さんも気軽に試してみてはいかがでしょうか。

ではではー。