NP Log

カテゴリー: programming

  • phpのテスト環境 – Windows

    メモ書き程度で恐縮ですが。

    ローカル環境の場合

    レシピ
    – Windows10
    – PHP-7.4.x
    – phpunit
    – Git for Windows
    – VS Code

    https://windows.php.net/download/
    ここからNon Thread Safeのzipファイルをダウンロードして展開し、C:\php へ配置。

    環境変数（システム -> 詳細設定 -> 環境変数）を開いてユーザーもしくはシステムの環境変数：PATH に C:\php を追加。

    合わせて git の環境も整えておく。

    (さらに…)

  • Rails環境のwarningなど – wsl

    wsl(Windows Subsystem for Linux)のubuntuでRails環境を構築する際に、いくつかwarningが表示されたのでその対応を簡単に書いておきます。

    ちなみに rails は、

    rbenv install 2.6.5
rbenv global 2.6.5
gem install rails --no-document

    でインストールできた前提です。
    ここで例えば、

    rails -v

    として、

    ... warning: Insecure world writable dir /home/(username)/.rbenv/bin in PATH, mode 040777

    のようなメッセージが表示される場合。

    chmod go-w -R ~/.rbenv

    として、group や others の書き込み権限を外しておくと良さそうです。同様に、

    warning: Insecure world writable dir /mnt/c in PATH, mode 040777

    /mnt あたりでパーミッションの問題が表示される場合。

    参考：https://github.com/microsoft/WSL/issues/1426

    /etc/wsl.conf を開いて（なければ新規作成）、

    [automount]
options="metadata,umask=0033"

    上記を書いて保存。wsl(ubuntu)のウインドウを一旦閉じて開くと設定が反映されます。wsl.conf の詳細はこちら。

    参考：Manage and configure Windows Subsystem for Linux

  • Ruby on Rails 5 のローカル環境

    Ruby on Rails 5をvagrantで環境構築していて少し引っ掛かったのでメモ書き。

    主なレシピ

    • macOS 10.15.2
    • vagrant-box bento/centos-6.8
    • ruby 2.6.5
    • rails 5.1.7

    Vagrantfileに下記を追加。

    (さらに…)

  • Polylangメモ – WordPress Plugin

    Polylang

    プラグインPolylangを使って、ホームページ多言語化　その１：インストールして使ってみる | ゆうそうとITブログ
    プラグイン導入に際し、参考にさせていただきました。m(__)m

    Language switcherはウィジェットとして設置するので、使用するテーマがウィジェットに対応している前提。

    テーマのウィジェット対応

    上のページの例だとfunctions.phpのID home_right_1 とテンプレート側のID sidebar-1 が異なるので、実装する際はこのIDを揃える。

    外観 -> ウィジェット から Language Switcher を追加。

    Language Switcher(Widget)

    How to display the widget flags horizontally?

    デフォルトだと選択する言語が縦に並ぶので、横に並べたい場合のスタイル指定。

  • Rails Girls Ehimeに参加しました

    昨年末からehime.rbで少しずつですが Ruby on Rails を勉強していまして、
    今回 Rails Girls Ehime が開催されたのでスタッフとして参加してきました。

    スタッフといってもイベント当日のお手伝いは特にしていなくて、開催前のお手伝いでイベントのお知らせページの一部をGitHubで更新した程度です。マスターリポジトリをフォークして、ブランチを切ってファイルを編集。コミットしてPRを送ってマージされたらフェッチしてフォーク先を更新、みたいな手順を何度か行いました。これはこれでgit操作の勉強になりました。

    イベント自体は2日目の土曜日のみお邪魔して参加者と同じ立場でRailsの環境づくりとチュートリアルを試しました。昨年末かあるいはその前だったか作成済みのRails環境があって、今回のチュートリアルの環境に合わせるにはいくつかバージョンアップが必要でした。

    herokuへのdeployをする際にherokuコマンドのバージョンアップを促すメッセージが出たので、更新を実行したところ更新できず。下記のherokuのドキュメントによると、どうやらnpmでのheroku(cli)のインストールはおすすめではないらしい。

    で、なんとか環境が整ったのでチュートリアルを進めていきました。で、herokuへのdeployもできて、次の課題でファイルのアップロードに対応しようとしたところで、deployしたところでエラー発生。

    調べていくと、

    Gemfileの編集で gem 'carrierwave' これを追加する場所がまずかったようです。(developmentの中にのみ書いていた)
    そんなこんなでエラーを起こしつつもherokuでの動作確認までできました。

    あとLTで参考になるサイトとか書籍の紹介があったのでいくつか書いておきます。

    Progate – Ruby on Rails5
    Paizaラーニング – 「Ruby on Rails」入門講座

    クロスコミュニティ四国
    鎌玉のよしなしごと

    今後も引き続いてRailsの勉強会が愛媛で定期的に開催されるとのことで、プログラミング初心者の方もお気軽にご参加いただければと思います。

    Rails Girls Ehime – June 2019 のまとめ

  • CodeLabsのbarcode scannerを試してみました。 – Firebase

    チュートリアルはこちらから。
    Detect Barcodes in an Image using Firebase MLKit

    サンプルソースにはML Kitのプロジェクトがいくつか含まれているので、
    その中から barcode-scanning/starter を適当な場所に置いて AndroidStudio で開きます。

    Nextボタンで進めていきます。

    Firebase consoleで入力するパッケージ名ですが、
    誤：com.google.firebase.codelab.barcode-scanning
    正：com.google.firebase.codelab.barcode_scanning
    のようです。

    あと appのbuild.gradle ですが、

    implementation 'com.google.firebase:firebase-ml-vision:17.0.0'
    ...
    }

    apply plugin: 'com.google.gms.google-services'
    com.google.gms.googleservices.GoogleServicesPlugin.config.disableVersionCheck = true

    このように disableVersionCheck = true を追加してエラーを回避しました。
    （他に正しい方法があるのかも…）

    emulatorでアプリが起動することを確認して、USBで実機を接続。
    実行すると、書籍のバーコードが読み取れました。

  • Cookiecutter Django のテスト

    Cookiecutter Django

    最初の設定項目の説明

    python3環境とcookiecutter実行

    cookiecutter設定項目

    必要な環境に合わせて適宜変更…

    出来上がったプロジェクトフォルダに移動して、

    ビルド・実行、停止

    メールアドレスでユーザーを追加する際のactivation

    Mailhog

    Mailhog

    ビルドをやり直す場合

    （参考）Quickstart: Compose and Django

    Docker docs – Quickstart: Compose and Django

  • HTMLのヘッダについて – 勉強会の下調べ

    年明けの勉強会の予習というかメモ書き。
    クロコラボ #20 headタグの中を考えてみよう
    少しずつ書き足していきます。

    文書メタデータ（ヘッダー）要素
    文書レベルメタデータ要素
    Qiita:色々あるHTMLのmetaタグなど一覧

    JavaScriptはhead内で読み込みたい
    結論としてはhead内で良さそう。

    Document metadata – HTML 5.2
    W3C Recommendation, 14 December 2017

    headタグの短い例

    headタグの長い例

    文書レベルメタデータ要素

    エンコーディングを宣言する 要素は 要素の内部かつ
    HTML の始めから 1024 バイト以内に配置しなければなりません。
    これは、ページの文字集合を選択するまでに始めの部分しか確認しないブラウザーがあるためです。

    Document.title – タイトル

    What’s in the head? Metadata in HTML

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

    タイトル

    <title>Page title</title>

    Document’s character encoding

    <meta charset="utf-8">

    charsetをISO-8859-1に変えて文字化けを確認してみる。

    Adding an author and description

    <meta name="author" content="name here...">
<meta name="description" content="description here...">

    Googleで MDN Web Docs を検索してみる。
    descriptionの内容やtitleが検索結果に利用されていることを確認。

    その他のメタデータタイプ

    Open Graph Data: Facebookが作ったプロトコル。ウェブサイトの提供をリッチに。

    <meta property="og:image" content="ロゴデータのパス..."
<meta property="og:description" content="サイトの説明..."
<meta property="og:title" content="サイトのタイトル..."

    <meta name="twitter:title" content="サイトのタイトル..."

    カスタムアイコン

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    他に、iPadのホームスクリーン用の高解像度アイコンを定義するなど。

    CSSやJavaScriptファイルを組み込む。

    <link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js"></script>

    Primary Languageの設定

    <html lang="ja">

    The Open Graph protocol

    http://ogp.me/
    Basic Metadata
    – og:title
    – og:type
    – og:image
    – og:url
    Object Types
    – music
    – video
    – No Vertical(article, book, profile, website)

    Meta Tags in WordPress

    https://codex.wordpress.org/Meta_Tags_in_WordPress

    Markup Validation Service

    https://validator.w3.org/

  • herokuまわり – Rails Tutorial

    明日の勉強会の準備。メモ書き程度です。

    1.5.1 Herokuのセットアップ
    このあたりの作業中。

    ndenvのnpmをインストール済みなので、

    $ npm install -g heroku-cli

    を試したところ、npm WARN ... 'heroku-cli' has been renamed 'heroku' と表示されたもののインストールはできた様子。
    それと、cross-spawn no longer requires a build toolchain, use it instead という警告もあり。

    cross-spawn-async
    cross-spawn

    $ heroku --version
heroku/7.19.3 darwin-x64 node-v8.11.2

    $ heroku login
ブラウザが開くのでログインします。

    SSHキーを作成して登録。

    $ ssh-keygen -t rsa -C "your.name@example.com" -f ~/.ssh/id_rsa_heroku
$ heroku keys:add

$heroku create
ブラウザで確認

    herokuにデプロイ

    $ git push heroku master

    pushでrejected
    SQLite on Heroku

    ローカルのGemfileを編集したものの、コミットするのを忘れていました。(^^;

    herokuでgoodbye worldが表示されることを確認。

    git pushで失敗する場合

    macOS で再起動しても ssh agent に秘密鍵を保持させ続ける二つの方法
    OSのUpdateで再起動したようで、

    $ ssh-add ~/.ssh/(秘密鍵)

    が必要でした。

  • PyEhime 20181020 – MkDocs

    ターミナル（シェル環境）

    $ env | grep LANG
何も設定されていない場合は、
$ export LANG=ja_JP.UTF-8
としておく。

    Python3環境

    venvをお勧めします。作業用フォルダを workspace とすると、

    $ cd workspace
$ python3 -m venv venv
$ source venv/bin/activate

    mkdocs インストール

    $ pip install mkdocs
pip 自体のアップグレードが勧められたら、
$ pip install --upgrade pip

    mkdocsのプロジェクト作成

    $ mkdocs new mktest

    ビルド

    $ cd mktest
$ mkdocs serve

    ブラウザで http://127.0.0.1:8000 を開く。

    カスタマイズ

    いろいろ記事がありますので、適宜試してみてください。
    MkDocsによるドキュメント作成
    練習で数式を試してみました。
    https://kazweda.github.io/mkdocs-lesson/math/

    GitHub Pages

    GitHubでリポジトリを作成。mktest
    git clone の URL(PATH/TO/REPO)を取得

    $ git init
$ git remote add origin (PATH/TO/REPO)
$ git pull origin master
$ mkdocs gh-deploy