Corredor

ウェブ、プログラミングの勉強メモ。

iOS 版 Google Drive で Markdown が開けないので Notebooks というアプリに移動して閲覧する

iOS 版の Google Drive で、拡張子 .md (Markdown) のファイルをプレビューできない。中身はテキストファイルなのに、テキストファイルとしては表示してくれないようだ。

Google Drive から「ファイルのコピーを送信」という操作ができるので、Markdown ファイルを開ける別のアプリに投げれば良いかな、と思ったのだが、意外と Google Drive アプリから Markdown ファイルを送りつけられるアプリがなくて結構探した。

一番お手頃なところでいくと、Evernote アプリに転送すれば、Markdown ファイルを添付したノートが作成されるので、Evernote 内で添付ファイルをタップすれば Markdown がプレビューできる。しかしコレだと、中身を見るためだけに Markdown を添付したノートが作成されてしまい、少々目障りだ。

とりあえず見るだけなら Evernote でも良いが、もう少し見やすいのがいいなーと思い探していると、ちょうど良いアプリがあった。それが Notebooks for iPhone だ。

f:id:neos21:20191025224844p:plain
↑このアイコンのアプリ。

Google Drive → Notebooks への転送

Google Drive アプリで Markdown ファイルを開こうとすると、「サポートされていないファイル形式です」と表示され、プレビューしてもらえない。ココで「アプリで開く」を選択する (「コピーを送信」でも良いかも)。

f:id:neos21:20191025224902p:plain

すると一覧に Notebooks が出ているので、選択する。

f:id:neos21:20191025224909p:plain

このまま Notebooks に転送する。

f:id:neos21:20191025224925p:plain

Notebooks アプリを開くと、Notebooks 内で管理するノート1枚として取り込まれ、Markdown 書式がキレイにパース表示されている。

f:id:neos21:20191025224933p:plain

Notebooks → Google Drive への転送

Notebooks で編集したノートを Markdown ファイルとして Google Drive に送り返すこともできる。右下の共有アイコンから「Share...」を選択する。

f:id:neos21:20191025224940p:plain

一覧に Google Drive が表示されるのでコレを選択する。

f:id:neos21:20191025224947p:plain

あとは配置先などを選択すれば OK。

f:id:neos21:20191025224958p:plain

不要な .txt テキストファイルも送られてしまうこともあるが、コレくらいなら転送後に Google Drive 側で削除すればよかろう。

このように、双方向に Markdown ファイルがやりとりでき、キレイにプレビューできた。Notebooks ナイス。

Avast をアンインストールするための「Avast Clear」がアンインストールできなくて苦戦した

Avast Passwords が便利なので、Avast のアンチウイルス系のコンポーネントはインストールせずに Avast Passwords 部分のみ使っている。

neos21.hatenablog.com

メインのアンチウイルスソフトは「ウイルスバスター」を使っているので、ウイルスバスターを更新する時に Avast をアンインストールする必要があった。

しかし、どうにもこうにも、Avast のアンインストールが上手くいかない。「プログラムの追加と削除」から削除しても変にゴミが残ったり、ようやくアンインストールできたかと思えば再インストールが成功しない状態になってしまった。

そこで色々調べていたところ、Avast Clear という公式のアンインストールツールが存在することが分かった。公式がココまでしないとアンインストールできないのかよ…。

Avast のツール類は「管理者として実行」で動かすのが鉄則。じゃないとたいてい失敗する。Avast Clear を管理者権限で実行してインストールすると、セーフモードで再起動することになり、そこで Avast のアンインストールが行われた。

これでようやくまっさらに削除できたか、と思ったが、その後 PC を起動する度に、

  • Windows 10
  • Avast Clear Uninstall

のどちらを起動するか、という OS 選択画面みたいなのが必ず表示されるようになってしまった。

アンインストーラがアンインストールできなくなるというまさかの事態で困っていたが、以下の文献に対処法が書かれていた。

  1. スタートメニュー -> すべてのプログラム -> アクセサリ -> ファイル名を指定して実行 を起動
  2. msconfig と入力して「システム構成」ユーティリティを呼び出す
  3. 「ブート」タブから「Windows 7」を選び、「既定に設定する」をクリック
  4. 「Avast Clear Uninstall」を選択し、「削除」をクリック
  5. 「OK」をクリックし、PCを再起動

このとおり、msconfig の「ブート」欄から「Avast Clear Uninstall」を削除することで解決できた。

f:id:neos21:20191025222548p:plain

Avast しつこすぎる…

Windows に Chocolatey を使って PHP と Composer をインストールする・HTTPS 通信に失敗する時は認証局設定を行う

PHP のツールを動かしてみたくなったので、Windows に PHP 環境を構築する。Chocolatey をインストールしてあるので、コイツを使ってサクッと構築する。

PHP のインストール

Chocolatey の公式ページを見ると、何やらパラメータを指定して ThreadSafe なバージョンをインストールできたりするみたい。

/ThreadSafe - Install the thread safe version of php that is compatible with Apache.

気になったので調べてみると、PHP を動かす Web サーバに Apache を使う場合はスレッドセーフ版、IIS を使う場合はノン・スレッドセーフ版を使うと良いらしい。スレッドセーフ版はマルチスレッド対応している。

というワケで以下のコマンドでインストールする。

$ choco install -y php --package-parameters='"/ThreadSafe"'

何か色々と一緒に入れる必要があったが、とにかく Yes で進んだ。どうも Visual C++ とかも必要らしいのう。

インストールできたらこんな感じで確認。

$ php -v
PHP 7.3.10 (cli) (built: Sep 24 2019 11:59:22) ( ZTS MSVC15 (Visual C++ 2017) x64 )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.10, Copyright (c) 1998-2018 Zend Technologies

Composer のインストール

さらに、PHP 向けのパッケージ管理システムである Composer も入れておく。

$ choco install -y composer

コチラは以下のようにバージョン確認。

$ composer --version
Composer version 1.9.0 2019-08-02 20:55:32

php.ini でタイムゾーン設定をする

Chocolatey で PHP をインストールすると、

  • C:\Tools\php73\

というディレクトリにブツがインストールされた。

この中にある

  • C:\Tools\php73\php.ini

というファイルを開くと、PHP のグローバルな設定が色々とイジれる。

この中から date.timezone という単語を検索すると、954行目あたりに次のような行が見つかると思う。

; Defines the default timezone used by the date functions
; http://php.net/date.timezone
date.timezone = UTC

この date.timezone = UTC 部分を、

date.timezone = "Asia/Tokyo"

と変更すると、PHP で扱うタイムゾーンが UTC から日本時間 (JST) になる。

ある PHP アプリを動かしてみる

今回動かしてみたかったのは、以下のコード。

次のように叩くと構築が完了する。

$ git clone https://github.com/kin29/ticket-hunter.git
$ cd ticket-hunter/
$ composer install

あとは ./example.php を実行すれば、ウェブページをスクレイピングして、そのデータを JSON 形式で出力してくれるというモノだ。

HTPS 通信時にエラーが出る

以下のように実行してみたところ、ネット通信が上手くいかないようだった。

$ php example.php
Error creating resource: [message] fopen(): SSL operation failed with code 1. OpenSSL Error messages:
error:1416F086:SSL routines:tls_process_server_certificate:certificate verify failed
[file] C:\ticket-hunter\vendor\guzzlehttp\guzzle\src\Handler\StreamHandler.php
[line] 323
[message] fopen(): Failed to enable crypto
[file] C:\ticket-hunter\vendor\guzzlehttp\guzzle\src\Handler\StreamHandler.php
[line] 323
[message] fopen(https://eplus.jp/sf/search?keyword=%E9%9B%A8%E3%81%AE%E3%83%91%E3%83%AC%E3%83%BC%E3%83%89): failed to open stream: operation failed
[file] C:\ticket-hunter\vendor\guzzlehttp\guzzle\src\Handler\StreamHandler.php
[line] 323

どうやらコレは、PHP が HTTPS 通信を行う時の認証局情報が不足しているからだそうだ。

GitSDK をインストールしていれば、以下にある ca-bundle.cert が使える。通常の GitBash の場合も、ファイル名で検索すればどこかに ca-bundle.cert があるはず。

  • C:\git-sdk-64\usr\ssl\certs\ca-bundle.crt

このファイルへのパスを php.iniopenssl.cafile プロパティに記載すれば良い。

  • C:\Tools\php73\php.ini
; 1925行目あたりから

[openssl]
; The location of a Certificate Authority (CA) file on the local filesystem
; to use when verifying the identity of SSL/TLS peers. Most users should   
; not specify a value for this directive as PHP will attempt to use the    
; OS-managed cert stores in its absence. If specified, this value may still
; be overridden on a per-stream basis via the "cafile" SSL stream context  
; option.
openssl.cafile=C:\git-sdk-64\usr\ssl\certs\ca-bundle.crt

コレで再度 example.php を実行すれば、正常に HTTPS 通信ができた。

日本語が Unicode 文字になっていたり文字化けしたりしていたので、jq で整形してから nkf でエンコードしてみた。

$ php example.php | jq '.' | nkf -w

neos21.hatenablog.com

neos21.hatenablog.com

コレで良い感じ。

気づけばプロ並みPHP 改訂版--ゼロから作れる人になる!

気づけばプロ並みPHP 改訂版--ゼロから作れる人になる!

OS 設定に沿って Web サイトもダークモード化させる CSS

最近は PC でもスマホでも取り入れられている「ダークテーマ」。OS 設定でダークモードに切り替えると、ウィンドウのカラーテーマが暗くなったりする。

今回は、OS 設定でダークモードを選択した時に、Web サイトもダークモードに合わせてスタイル変更するための CSS の書き方を紹介する。

prefers-color-scheme メディアクエリを使用する

書き方は簡単で、prefers-color-scheme というメディアクエリを使えば良い。

@media (prefers-color-scheme: light) {
  /* ライトテーマの時のスタイル */
}

@media (prefers-color-scheme: dark) {
  /* ダークテーマの時のスタイル */
}

例えば以下のように実装しておくと、システムがダークテーマの時に暗い感じのサイトにできる。

/* prefers-color-scheme が有効にならない場合はこの設定が効く */
body {
  color: #ccc;
  background: #999;
}

/* 通常は Light テーマと判断される */
@media (prefers-color-scheme: light) {
  body {
    color: #113;
    background: #ffe;
  }
}

/* OS でダークテーマを選択している場合 */
@media (prefers-color-scheme: dark) {
  body {
    color: #f0f0f0;
    background: #161616;
  }
}

実際に以下の CodePen のサンプルを見てみてほしい。このページを開きながら、OS の設定画面でダークテーマとライトテーマを切り替えてみると、ページの配色も変化していることが分かるだろう。

See the Pen Dark Mode CSS Example by Neos21 (@Neos21) on CodePen.

ベースは @media 未指定で記載しておき、ダークテーマ向けのスタイルを @media (prefers-color-scheme: dark) で上書きすると良いかと思う。

ユーザの利用テーマに合わせて配色を切り替えられるので、よりユーザフレンドリーなサイトにできるだろう。

今すぐ使えるCSSレシピブック

今すぐ使えるCSSレシピブック

CSSグリッドレイアウト デザインブック

CSSグリッドレイアウト デザインブック