Electronのサンプルを動かしてみる

はじめに

electron.atom.io

Electronに興味を持ち、実際にいじってみようと思いました。
今回は環境を作ってサンプルを動かすところまでやります。
ちなみにCygwinで環境を作ります。

内容はelectron-quick-startを元にしています。

github.com

まずは環境構築

electron-quick-startにて、GitとNode.jsが必要だと明記されています。
まずはこれを揃えましょう。

Gitについては、サンプルのソースコードを取得するのに必要なのであって、今後も使用していくかは自由だと思われます。

Git

GitはCygwinでサポートされていますので、こちらを使いましょう。
やり方は2つあって、

apt-cygを使う

apt-cygについては、こちらの記事を参考にしてください。
ちょっと古いですが。

hrroct.hatenablog.com

下記コマンドを実行するとインストールできます。
ついでにバージョン情報を確認してみました。

$ apt-cyg install git
$ git --version
git version 2.12.2

Cygwinのセットアップ用のexeファイルを使う

64bitなら「setup-x86_64.exe」という名前です。
Cygwinを使っている方ならどこかにあるはず…
これを使用してGitをインストールしてもOKです。

Node.js

CygwinではNode.jsのサポートをしていないのか、apt-cygで探しても出てきません。
(ソースコードから入れることはできるかもしれませんが…試してません)

なので、Windowsのものをインストールして使うことになります。

Node.js

インストールが終わりましたら、npmコマンドを叩いてみましょう。

$ npm --version
4.2.0

問題なく使えそうですね。
パスが通っていない場合は、.bashrcなど設定ファイルに下記を書き込むとよいと思います。

export PATH=$PATH:/cygdrive/c/Program\ Files/nodejs

electron-quick-start を起動する

下記コマンドを叩けと言われているので、適当な作業ディレクトリに移動してから叩きましょう。

# Clone this repository
git clone https://github.com/electron/electron-quick-start

# Go into the repository
cd electron-quick-start

# Install dependencies
npm install

# Run the app
npm start

これで、サンプルアプリが立ち上がります。

次に見るべきは…

このドキュメントでしょうか。
https://electron.atom.io/docs/tutorial/quick-start/electron.atom.io
Quick Startの詳細が書かれているので、自分がやったことの深掘りをするにはよいかもしれません。
※英語です

それと、electron-api-demosを見てみるとよいと思います。
同じ手順で、デモアプリをダウンロード、実行することができます。

$ git clone https://github.com/electron/electron-api-demos
$ cd electron-api-demos
$ npm install
$ npm start

これをみると、新しいウィンドウの作り方とか、メニューのカスタマイズとか、クリップボードの使い方とか、いろいろ書いてあります。
※やっぱり英語ですけど
自分がやりたいことへのイメージがついてくるのではないでしょうか。

さいごに

手順通りなので、あまり面白くはないですよね…
electron-quick-startは、環境を作って動作確認をする、くらいの意味合いなのかなぁと思いました。

自分が使いやすいファイラーを作ることが私の目標ですので、
学んだことはまたこちらで共有していきたいと思います。

以上でした！

実家にて無線LAN環境を整えてタブレットを導入した話

はじめに

大前提として、有線LANは既に使える状態にありました。
父(70過ぎ)がタブレットを欲しがっていたので、
　1. 無線LAN環境を整える(ルーターの選択、購入、設置)
　2. タブレットの選択と購入
を代わりにやりました、という話です。

ルーター5,000円、タブレット17,000円、合計22,000円くらいでした。

何を買ったの？

ルーター

その日のうちに設置まで済ませたかったので、近くの電気屋で買ってきました。
5,000円くらいしたんですが…ネットで買うほうが安かった…( ；∀；)

I-O DATA Wi-Fi 無線LAN ルータ Nintendo Switch 動作確認済 11ac 867Mbps ペイバック保証&土日サポート WN-AC1167R

2階建てで使えるもの、かつ同時接続数が多いもの(これだと8台)を探した結果がこれでした。
実家なので人数が集まることを想定しました。
予算は抑えたかったので、安いものを選びましたが、特に問題なく動作してくれているようです。

設置については、難しいことはなく、説明書を読めばすぐに使えるようになっていると思います。
自宅ではBuffaloのルーターを導入しましたが、同じように簡単にセットアップができました。

タブレット

私自身がタブレットを持っていなかったので、ネットで評判やスペックを調べてこれにしました。
要望があったので、8インチで探してました。

Huawei 8インチ タブレット MediaPad T2 8.0 PRO ホワイト ※Wi-Fiモデル RAM 2GB/ROM 16GB【日本正規代理店品】

Huaweiのタブレットをネットで買って実家に送付しました。
楽天だと17,000円くらいで売っていました。今はAmazonの方が安い…( ；∀；)

簡単にレビュー

設定のために実家に帰り触ってみましたが、まず（完全に私基準の印象ですが）軽くてビックリ。
ネット検索やYouTubeくらいなら動きもサクサク。
カメラも実家にあった古いデジカメよりも、全然性能がいいのでは。

元々入っているアプリは、Google関連が一式。あとはLINEも最初から入っているようでした。
LINEの設定だけ行って、使い方も簡単に説明しておきました。

これで、私から実家に孫の写真や動画を送りやすくなりました。
8インチもあれば、老眼の父も写真や文字の視認に問題はないようでした。

70過ぎの父がどこまでできたか？

実はルーターの設置だけしてその日は帰り、のちにタブレットが送られました。
Wi-Fi接続の設定をしてあげないと、しばらく使えなくてモヤモヤするだろうなぁと思っていたのですが…
困ることなく自分で設定できたみたいです。パスワードの話とかしてなかったんですが。

それに加え、カメラで既に写真を取っていたり、なかなかに使えているではないですか。
ちょっと心配しすぎでした。

一応、注意点としてルーターに書いてあるパスワードは簡単に他人に教えないように、とだけ伝えておきました。

最後に

外部にサポートを頼むと費用がかさみそうだったので、先に手を出せてよかったなと思っています。
もし同じ要望を持つ親御さんがいる方のお役に立てれば、幸いにございます。

以上でした！

文字列の省略 +「…」をTwigでやるには？

どういうこと？

要は長い文字列に対して、例えば15文字で切って、その後を「…」で省略する。
というのがやりたいことです。

CSSのtext-overflowでもできますが、そちらはwidthを指定するもので、文字の長さの指定ではありません。

やりかた

15文字で区切りたかったら…

{{ target.name|length > 15 ? target.name|slice(0, 15) ~ '…' : target.name }}

ただ、sliceの実装はTwig 1.6からになるので要注意です。
「自分のSymfonyに入ってるTwigのバージョンはいくつなんだろう？」
と思われた方は…

// vendor/twig/twig/lib/Twig/Environment.php

/**
 * Stores the Twig configuration.
 *
 * @author Fabien Potencier <fabien@symfony.com>
 */
class Twig_Environment
{
    const VERSION = '1.24.0';

ここに書いてあります。
最近のSymfonyだと、場所が変わっていたりして…。

短いですが、以上でした！

サポート対象バージョンの調査

はじめに

セキュリティの観点から、Webサービスに使用しているアプリケーションのサポートバージョンを調査する必要性に駆られました。
私はいわゆるLAMP環境で作られたWebサイトを扱っておりますので、対象はそれに付随するものとなります。

きちんとしたページが用意されているところもあれば、ないところもあり…
様々でした。

対象

Apache, MySQL, PHP, Symfony
この4つだけです。

調査結果

Apache

Welcome! - The Apache HTTP Server Project

きちんとしたページはないですが…
よくよく見ると、「Apache httpd 2.2.32 Released」のところに書いてあります。

2.2.x 
maintenance releases: June of 2017
security patches    : December of 2017

今年の12月までですね…。
2.4.xについては、特に期限は書いていないようです。

MySQL

MySQL :: MySQL テクニカル・サポート

http://www.oracle.com/jp/support/library/lifetime-support-technology-069183.pdf?ssSourceSiteId=ocomjp

MySQLはPDFファイルです…
資料の19ページ目に、MySQLについて書いてあります。

5.7: 2020年10月
5.6: 2018年 2月
5.5: 2015年12月
5.1: 2013年12月
5.0: 2011年12月

PHP

PHP: Supported Versions

PHPはきちんとしたページがあります。
セキュリティサポートの期限は、下記のとおりです。

5.6: 31 Dec 2018
7.0:  3 Dec 2018
7.1:  1 Dec 2019

Symfony

Symfony roadmap, notifications and release checker

Symfonyも専用のページがあります。
下の方にいくと、「Symfony version checker」なるものまであります。

まとまったものが見たいなら、Wikipediaの方がいいかも…
ただし、調べるからには一次情報をみたいものですよね。

Symfony - Wikipedia

2.7: 2019年5月
2.8: 2019年11月
3.4: 2021年11月
※現在生きている長期サポート版だけを抜粋
※3.4は2017年11月にリリースですけど…

おわりに

本日時点のものを書き出してみましたが、当然変わる可能性があります。
最新版につきましては、必ず一次情報を参照するようにお願い致します。

以上でした！

JSON整形ツール？を作りました

はじめに

整形されていないJSON形式の文字列を整形するツールです。
Webサイトで公開されているものが多々ありますが、入力情報を取得されていたら困ります。

そこで、ローカルで同じことができるものを作成しました。
「JsonFormatter.html」とでも名前をつけて、ローカルに保存してお使いください。

ただし、CDNを使用してるため、通信は発生しているという中途半端さがあります…。

内容はこちら

・エラー処理はしていないので、お好みで変更してください。
・インデントは半角スペース4つです。これもお好みで変更してください。
・CDNを使用してるため、通信は発生します…。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Json Formatter</title>
        <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script type="text/javascript">
        <!--
            $(function() {
                var sampleText = '{"id":12345,"code":10,"detail":{"name":"Foobar","size":"50.00"}}';
                $('#input-area').val(sampleText);

                $('#formatter').on('click', function() {
                    var inputData = $('#input-area').val();
                    try {
                        var jsonBefore = JSON.parse(inputData);
                    } catch(e) {
                        return false;
                    }
                    var outputData = JSON.stringify(jsonBefore, null, "    ")
                    $('#output-area').val(outputData);
                });
            });
        // -->
        </script>
    </head>
    <body>
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <textarea class="form-control" id="input-area" rows="10"></textarea>
            <button id="formatter" class="btn btn-primary btn-lg">Format</button>
            <textarea class="form-control" id="output-area" rows="20"></textarea>
        </div>
        <div class="col-md-2"></div>
    </body>
</html>

見た目はこんな感じ

シンプルですが、使えればいいということで(；´∀｀)

以上でした！