ads.txt の文字コード対処方法について

投稿日時: 2021年1月10日投稿者: redwing1300

WordPress に ads.txt を設置しており，以下の文字コードエラーが出力されていたので対処した．

“ISO-8859-1” は誤った文字コードです。utf-8で作成してください。

Mac の各種エディタで utf-8 を指定してもエラーが通知されていたので，.htaccess ファイルに以下の一文を追加し，対処した．

<Files ads.txt>
AddType "text/plain; charset=utf-8" .txt
</Files>

また，.htaccess で HTTP アクセス全体を HTTPS にリダイレクトしているが，ads.txt へのアクセスは HTTP も許可することが推奨されているようだったので，以下を追加しておくことにした．

RewriteRule ads\.txt - [L]

# http → httpsに転送する設定
<ifmodule mod_rewrite.c>
RewriteEngine On

RewriteRule ads\.txt - [L]

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</ifmodule>

Follow @redwing1300

Sass 始める時に参考にしたこと

投稿日時: 2019年5月16日投稿者: redwing1300

返信

▼ 設計手法について

設計手法については幾つかあるらしいですが，なんとなく主流は BEM と呼ばれるものらしい．

BEM

3つの要素を元に名前を設定する．
Block, Element, Modifier

Block__Element–Modifier
Block–Modifier

▼ Sass の表記

div タグの class 属性などは以下のように記述する．

class	セレクタの始まりを「.」にする
id	セレクタの始まりを「#」にする

▼ Sass 主な機能

& 親参照

以下の html と main.scss をビルドすると添付のような文字色で表示される.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./dist/css/main.css">
  <title>Document</title>
</head>
<body>
  <p>赤い文字</p>
  <p class="green">緑文字</p>
  <p><span class="blue">青い文字</span></p>
</body>
</html>

/* main.scss */
p {
  color: red;
  &.green {
    color: green;
  }
  .blue {
    color: blue;
  }

▼ mixin

@mixin で定義して，@include で適用する．

▼ インターポレーション(#{})

変数の参照

参考:
今更ながらBEMについてと、それに対応するSassについてまとめてみる
 BEMをSassで快適に書く方法

▼ sass と scss の違いは？

記法のことを指していることが多く，scss 記法が CSS に近いルールで記述できる．
主流はこちらになっている．

Follow @redwing1300

HTML，CSS3 メモ

投稿日時: 2019年5月16日投稿者: redwing1300

返信

いまさらながらですが，ちゃんとHTML，CSS3とか見たことがなかったので，体系立てて少し見てみました．
用語，仕様が複雑ですね… ベンダープレフィックスとか…

▼ レイアウトの変遷

1. テーブルレイアウト
2. float
3. Flexbox
4. Grid Layout

レイアウトには流行廃りがあって，上記のような感じらしい．
プログラマであれば，今後は bootstrap4 あたりをチェックすれば良いと思う．
でも結局なんとなく全部把握しておく必要があるかも…

参考: CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門

日本語対応！CSS Flexboxのチートシートを作ったので配布します

▼ ブラウザ間の差分をなくす方法

html 各要素のブラウザ毎に異なる差異をなくしてスタイルをリセットするスタイルシートを適用すれば良い．
sanitize.css

リセットCSS，ノーマライズCSS，サニタイズCSSなど初心者には区別が付けにくい言葉があったので，ついでに調べておく．

【サンプルあり】リセット・ノーマライズ・サニタイズCSSの違いと使い方

▼ html ファイルから css ファイルの指定方法

1	<link href="css/base.css" rel="stylesheet" type="text/css">

▼ css セレクタ

より後から読み込まれたスタイルが適用される．
・要素の状態によって適用できるセレクタに擬似クラスがある．
・全ての要素に適用する「*」．
・擬似要素 :first-letter / :before / :after

参考: CSS 複数のセレクタを指定する/絞り込むサンプル
参考: CSSのセレクタとは？覚えておきたい25種類と書き方
参考: cssを書く人がブクマしておきたいジェネレーターサイト8選

▼ css ショートハンド

margin プロパティなどの数字の指定方法は以下の通り．

1つ	4辺とも同じ値
2つ	上下，左右
3つ	上，左右，下
4つ	上，右，下，左

指定しない場合，デフォルトになる

参考: 余白については以下の記事が良かった．

CSSのmarginとは？paddingとは？余白の指定方法まとめ

▼ 特殊文字

     &nbsp;    &#160;    ノーブレークスペース（前後で自動改行しないスペース）
"    &quot;    &#34;    クォーテーション（引用符）
&    &amp;    &#38;    アンパサンド
<    &lt;    &#60;    小なり
>    &gt;    &#62;    大なり

&#以降はUnicodeのコード番号

▼ レスポンシブ対応の仕組み

css で以下のようにメディアクエリを記述し，スクリーンサイズで処理を分岐する．

@media screen and (min-width:480px) {
    /*　画面サイズが480pxからはここを読み込む　*/
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/

Follow @redwing1300

Atom で HTML を編集する際に知っておくと便利なこと

投稿日時: 2019年5月15日投稿者: redwing1300

返信

▼ Emmet

【概要】
Emmet とは HTML，CSS コーディングをサポートするプラグイン．
【使い方】
タグ入力後，「Tab」キーを押下
【例】
・ html の雛形を入力する
「!」入力後，「Tab」キーを押下

・「要素.class名」の指定
div.box と入力し，「Tab」キーを押下

1	<div class="box"></div>

・「>」でネストを指定
div>p と入力し，「Tab」キーを押下

1
2
3

<div>
  <p></p>
</div>

参考: EMMETの使い方

▼ フォルダ配下の検索方法を調べる

command + shift + f
「ファイルまたはディレクトリのパターン」を指定しないと検索できないことに注意．

▼ html を整形する

“atom-beautify”プラグインで整形することができる．

エディタ上で右クリック > Beautify editor contentsをクリック
ショートカットキーは，control + option + b(eautify)

▼ ファイルの差分を調べる

“split-diff”プラグインを使用する．

Follow @redwing1300

API 開発時の便利ツール Postman

投稿日時: 2019年5月7日投稿者: redwing1300

返信

API 開発時にレスポンス内容を確認したり，テスト実行したり，環境変数に応じて URL を変更したりできる．
便利ツールの個人的なメモ．

クライアントアプリは以下からダウンロードできる．
Postman

アプリの使い方，何ができるか？は以下の良記事を読めば把握できる．
参考：API開発・テスト便利ツール Postmanの使い方メモ
参考：APIの開発がむちゃくちゃ捗る「Postman」の使い方
参考：RESTサービスを触る際の必須ツールPostmanを使ってみました
参考：[ツール] Postmanを利用したAPIの試験 [機能の紹介]

Follow @redwing1300

Sass ビルド環境構築のメモ

投稿日時: 2019年4月24日投稿者: redwing1300

返信

osx で Sass のビルド環境を作る際のメモ．

1. Node.js のインストール
2. 作業用フォルダの作成 (package.jsonなど)
3. Gulp のインストール
4. Sass 環境に必要なパッケージをインストール
5. gulp でビルドする

$ sudo npm install gulp -g  // gulp インストール
$ sudo npm install          // Sass 環境に必要なパッケージをインストール

補足:
Atom に EditorConfig プラグインを適用するとチームでコードスタイルを統一することができる．

セットアップ時に以下のエラーが出力されてビルド出来なかったので，以下のコマンドで対処した．
permission denied, mkdir /node_modules/node-sass/build’

$ npm config set user 0
$ npm config set unsafe-perm true

参考: Ubuntuにnode-sassを入れようとしたらつまづいた話
参考: 『現場のプロが本気で教える HTML/CSSデザイン講義』のサンプルデータ
参考: 「Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」の公式サポートサイト

Follow @redwing1300

MAMP をアンインストールして，再セットアップした話

投稿日時: 2017年8月16日投稿者: redwing1300

返信

MySQL が不調だったので，MAMP を AppCleaner でアンインストールして再セットアップしました．

結果，問題なく動作しました．という話．
普段あまり使用しないマシン環境で問題が発生．調査するまでもない場合は，サクッとアンインストールして，再セットアップするのもよいなーと気づきました．（約 10 分で作業完了です）

もちろん MAMP と MAMP Pro の２つを削除対象とします．

▼ テスト環境
macOS Sierra 10.12.6
MAMP 4.2
AppCleaner 3.4

Follow @redwing1300

wri.pe Note 削除する手順

投稿日時: 2015年5月18日投稿者: redwing1300

返信

wri.pe というメモ書きに便利なサービスを利用しています。
Markdown 記法に対応しており、キーボードショートカットが結構便利だったりします。

メモを書いていて削除する方法がすぐ分からなかったので、メモしておきます。

Note を削除する手順
1. Notes で削除したノートをオープンする。
2. 画面右側に配置されている”Settings”を選択する。
3. 画面下部に”Delete this note”ボタン(赤色) を押下する。

wri_pe

Follow @redwing1300

iPad アプリのリアルタイム計測ができない場合に確認する項目

投稿日時: 2014年10月11日投稿者: redwing1300

返信

iPad アプリで Google Analytics ライブラリを更新し、リアルタイム計測のテスト時につまずいたのでメモ。
新規に Google Analytics を設定する際には問題になることは少ないかと思うが、既存アプリで新しい担当者がライブラリバージョンアップを担当した場合などは注意する必要があるかも知れない…私はそれで問題に気づくのに時間がかかりました。。。(>_<) 【iPad アプリのリアルタイム計測ができない場合に確認する項目】
・(当然ですが…)アプリの実装が適切に行われているか？
・不要なフィルタリングが設定されていないか？
・[アナリティクス設定] の”ビュー”は、”モバイルアプリ”とされているか？

【リアルタイム計測ができなかった原因】
・Google Analytics の設定のため、リアルタイム計測が確認できなかった。
・Google Analytics はトラッキングID ごとに、”プロパティー”、”ビュー”という概念があり、
ビューが ”モバイルアプリ”でないと、iPad アプリからの送信データをリアルタイムに集計ができない模様。
・新規にビューを”モバイルアプリ”で作成し、検証したところ、iPad アプリからのデータをリアルタイムに集計ができた。

【モバイルアプリのビューを作成する方法】
[アナリティクス設定] 画面には、”アカウント”、”プロパティ”、”ビュー”の設定項目がある。

モバイルアプリをリアルタイム集計するには、”ビュー”に新たに”モバイルアプリ”用のビューを作成する必要がある。
[すべてのウェブサイトのデータ]を選択し、[新しいビューを作成]を選択する。
[このビューでトラッキングするデータ]にて[モバイルアプリ]を選択する。

Follow @redwing1300

PHP のデバッグ環境を作成する手順

投稿日時: 2012年7月18日投稿者: redwing1300

返信

Mac OS X バージョン 10.7.4 に port を利用して PHP のデバッグ環境を作成した際の手順を記します。
※ eclipse と PDT も別途インストールしておくこと

1. PHP5 をインストールする

php をインストールする(pear を利用したい場合)

1	$ sudo port install php5 +apache2 +pear

php.ini の設定

1	$ sudo cp /opt/local/etc/php5/php.ini-development /opt/local/etc/php5/php.ini

;timezone の設定
[Date]
date.timezone = Asia/Tokyo

;mbstring の設定
[mbstring]
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_output = UTF-8

;エクステンションの設定

;930 行目付近 (mac の場合)
;;;;;;;;;;;;;;;;;;;;;;
; Dynamic Extensions ;
;;;;;;;;;;;;;;;;;;;;;;
:
extension=php_mysql.so
:
extension=php_pdo_mysql.so

2. MySQL5 をインストールする

1	$ sudo port install mysql5-server

データベースのセットアップ
上記コマンドのメッセージで以下のコマンドでセットアップするよう指示される

1 2	$ sudo port load mysql5-server $ sudo -u mysql mysql_install_db5

root パスワードの設定

1	$ sudo /opt/local/lib/mysql5/bin/mysqladmin -u root password 'new-password'

文字コードの設定

1 2	$ sudo cp /opt/local/share/mysql5/mysql/my-medium.cnf /opt/local/etc/mysql5/my.cnf $ sudo vi /opt/local/etc/mysql5/my.cnf

my.cnf ファイルに以下の設定を追加する

[mysqld]
character-set-server=utf8
[client]
default-character-set=utf8
[mysql]
default-character-set=utf8
[mysqldump]
default-character-set=utf8

接続確認

1	$ mysql5 -u root -p

3. Apache2 をインストールする

– PATH 設定
環境変数を参照する

1
2
3

$ printenv PATH
 
$ sudo port install apache2

– 設定ファイル
port でインストールした場合
/opt/local/apache2/conf/httpd.conf

– ドキュメントルートの設定

1 2	$ sudo mkdir -p /var/www/(ドキュメントルートにするディレクトリ) $ sudo chown (ユーザ名) /var/www/(ドキュメントルートにするディレクトリ)

– hosts にドメイン設定
– バーチャルホストの設定
/opt/local/apache2/conf/httpd.conf から、以下のコメントを外す

1	Include conf/extra/httpd-vhosts.conf

/opt/local/apache2/conf/extra/httpd-vhosts.conf に以下の設定を追記する

<VirtualHost *:80>
	ServerName (ドメイン名:localhost など)
	DocumentRoot /var/www/(ドキュメント ルート)
	DirectoryIndex index.php index.html
 
	<Directory "/var/www/(ドメイン名)">
		AllowOverride All
		Allow from All
	</Directory>
</VirtualHost>

– php5モジュールの追加設定

1	$ sudo /opt/local/apache2/bin/apxs -a -e -n "php5" libphp5.so

httpd.conf の LoadModule に以下の設定が追記される

1	LoadModule php5_module modules/libphp5.so

動作確認

1	$ ps aux \| grep apache2

ブラウザから php が動かない場合
/opt/local/apache2/conf/httpd.conf
ディレクディブに以下の設定を追加する

1	AddType application/x-httpd-php .php

4. xDebug をインストールする

以下のコマンドで xdebug に関する記述がない場合、インストールする必要がある

1	$ php -i \| grep xdebug

PECL で xDebug をインストールする
(PEAR がインストールされていることとする)

1	$ pecl install xdebug

2012/08時点、xDebug のパッケージがあるみたい？

php.ini に xDebug に関する設定をする

1	$ sudo vi /opt/local/etc/php5/php.ini

[xDebug]
zend_extension="/opt/local/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so"
xdebug.remote_enable = On
xdebug.remote_handler = dbgp
xdebug.remote_host = localhost

上記の作業中に問題となった箇所
– 最初に port で php5 がインストールできなかった
– php5 を variants 指定でインストールできなかった
$ sudo port upgrade ncursesw
$ sudo port install ncurses
他、違うバージョンの PHP をインストールしたりしているうちにインストールできるようになった。^_^;

– eclipse (PDT) でデバッグ時にブレークポイントで処理を中断することができなかった
xDebug がインストールされてなかったので、インストールすることで対処した。
（まぁ当然ですが、知らなかったので気づかなかった (T-T) )

5.phpmyadmin をインストール

インストール

1	$ sudo port install phpmyadmin

config ファイルの設置

1 2	$ cd /opt/local/www/phpmyadmin/ $ sudo cp config.sample.inc.php config.inc.php

phpmyadmin へのアクセス
http://localhost/phpmyadmin/ でアクセスさせる場合

$ sudo vi /opt/local/apache2/conf/httpd.conf
 
<IfModule alias_module>
...
Alias /phpmyadmin "/opt/local/www/phpmyadmin/"
<Directory /opt/local/www/phpmyadmin>
　  Order allow,deny
　  Allow from all
</Directory>
...
ScriptAlias /cgi-bin/ "/opt/local/apache2/cgi-bin/"
...
</IfModule>

(注意) ScriptAlias より上に記述すること

その他、便利そうなコマンド

MySQL5 の起動、停止

1
2
3

$ sudo /opt/local/share/mysql5/mysql/mysql.server start
$ sudo /opt/local/share/mysql5/mysql/mysql.server stop
$ sudo /opt/local/bin/mysqladmin5 -u root -p shutdown		(手動停止)

apache2 の起動、停止、再起動

1
2
3

$ sudo /opt/local/apache2/bin/apachectl start
$ sudo /opt/local/apache2/bin/apachectl stop
$ sudo /opt/local/apache2/bin/apachectl restart

apache2, mysql の alias 設定

alias apache_start="sudo /opt/local/apache2/bin/apachectl start"
alias apache_stop="sudo /opt/local/apache2/bin/apachectl stop"
alias mysql_start="sudo /opt/local/lib/mysql5/bin/mysqld_safe &"
alias mysql_stop="sudo /opt/local/bin/mysqladmin5 -u root -p shutdown"

設定ファイルの更新
色々便利そうなワンライナーが紹介されていたので、メモしておく。

sudo perl -p -i.bk -e 's/;date.timezone =/date.timezone = Asia\/Tokyo/g' /opt/local/etc/php5/php.ini
sudo perl -p -i -e 's/pdo_mysql.default_socket=/pdo_mysql.default_socket = \/opt\/local\/var\/run\/mysql5\/mysqld.sock/g' /opt/local/etc/php5/php.ini
sudo perl -p -i -e 's/mysqli.default_socket =/mysqli.default_socket = \/opt\/local\/var\/run\/mysql5\/mysqld.sock/g' /opt/local/etc/php5/php.ini
 
sudo perl -p -i -e 's/;mbstring.language = Japanese/mbstring.language = Japanese/g' /opt/local/etc/php5/php.ini
sudo perl -p -i -e 's/;mbstring.internal_encoding = EUC-JP/mbstring.internal_encoding = UTF-8/g' /opt/local/etc/php5/php.ini
sudo perl -p -i -e 's/;mbstring.http_input = auto/mbstring.http_input = auto/g' /opt/local/etc/php5/php.ini
sudo perl -p -i -e 's/;mbstring.detect_order = auto/mbstring.detect_order = auto/g' /opt/local/etc/php5/php.ini
 
sudo perl -p -i -e 's/;default_charset = "iso-8859-1"/default_charset = "UTF-8"/g' /opt/local/etc/php5/php.ini

Follow @redwing1300

PROGRAMMING NOTE

個人の趣味とメモを記しています

「web」カテゴリーアーカイブ

ads.txt の文字コード対処方法について

Sass 始める時に参考にしたこと

▼ 設計手法について

BEM

▼ Sass の表記

▼ Sass 主な機能

& 親参照

▼ mixin

▼ インターポレーション(#{})

▼ sass と scss の違いは？

HTML，CSS3 メモ

▼ レイアウトの変遷

▼ ブラウザ間の差分をなくす方法

▼ html ファイルから css ファイルの指定方法

▼ css セレクタ

▼ css ショートハンド

▼ 特殊文字

▼ レスポンシブ対応の仕組み

Atom で HTML を編集する際に知っておくと便利なこと

▼ Emmet

▼ フォルダ配下の検索方法を調べる

▼ html を整形する

▼ ファイルの差分を調べる

API 開発時の便利ツール Postman

Sass ビルド環境構築のメモ

MAMP をアンインストールして，再セットアップした話

wri.pe Note 削除する手順

iPad アプリのリアルタイム計測ができない場合に確認する項目

PHP のデバッグ環境を作成する手順

1. PHP5 をインストールする

2. MySQL5 をインストールする

3. Apache2 をインストールする

4. xDebug をインストールする

5.phpmyadmin をインストール

その他、便利そうなコマンド