Web Tips Plus: 9月 2016

2016年9月29日木曜日

Google Map 高さもレスポンシブ対応にしたい

Google Maps JavaScript API v3の使い方まとめ (サンプルコード付き)
https://syncer.jp/google-maps-javascript-api-matome#sec-12-1

HTML
地図キャンパスを囲む形の要素を追加して下さい。クラス属性値の名称は何でも大丈夫です。
HTML
<div class="map-canvas-wrapper">
<div id="map-canvas"></div>
</div>
CSS
下記が肝心の、そのスタイルシートの内容です。調整する点は一点のみで、.map-canvas-wrapperにあるpadding-bottomの値(サンプルでは75%)です。このパーセンテージは、親要素の横幅100%に対する縦幅の割合です。ここでいう「親要素」とは、map-canvas-wrapperの親要素のことです。つまり、地図のキャンパス(#map-canvas)から見れば、おじいちゃんの要素です。例えば、サンプルの場合だと、親要素の横幅が1,000pxある時、縦幅は750pxになります。そして、400pxの時は300px、といったように地図の縦幅が横幅に応じて調整されていきます。この75%を、好みに応じて調整して下さいね。
CSS
.map-canvas-wrapper
{
max-width: 100% ;
padding-bottom: 75% ;
position: relative ;
top: 0 ;
left: 0 ;
height: 0 ;
overflow: hidden ;
}

.map-canvas-wrapper > div
{
position: absolute ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 100%
}
これは、取り囲む要素の余白部分(padding-bottom)のスペースいっぱいに、その子要素である地図キャンパスを表示させるというテクニックで、アスペクト比を保ったレスポンシブ・コンテンツにする場合に、利用できます。時間や興味があったら、下記記事を読んでみて下さいね。
https://syncer.jp/google-maps-javascript-api-matome

2016年9月28日水曜日

2016年9月22日木曜日

WordPress カスタム投稿タイプの記事の作成者を変更したい

【WordPress】カスタム投稿タイプの記事の作成者（投稿者）を変更する | バシャログ。

http://bashalog.c-brains.jp/14/02/21-153032.php

functions.phpに以下を記述します。※赤文字 news は投稿タイプ名。適宜変更してください。

// カスタム投稿タイプの記事編集画面にメタボックス（作成者変更）を表示する

/* admin_menu アクションフックでカスタムボックスを定義 */

add_action('admin_menu', 'myplugin_add_custom_box');

/* 投稿ページの "advanced" 画面にカスタムセクションを追加 */

function myplugin_add_custom_box() {

if( function_exists( 'add_meta_box' )) {

add_meta_box( 'myplugin_sectionid', __( '作成者', 'myplugin_textdomain' ), 'post_author_meta_box', 'news', 'advanced' );

}

// カスタム投稿タイプの記事一覧に投稿者の項目を追加する

function manage_news_columns ($columns) {

$columns['author'] = '作成者';

return $columns;

}

function add_news_column ($column, $post_id) {

if ('author' == $column) {

$value = get_the_term_list($post_id, 'author');

echo attribute_escape($value);

}

add_filter('manage_posts_columns', 'manage_news_columns');

add_action('manage_posts_custom_column', 'add_news_column', 10, 2);

WordPress カスタム投稿タイプかどうか判別する

WordPress カスタム投稿タイプかどうか判別したい。 - かもメモ

http://chaika.hatenablog.com/entry/2015/04/19/090000

アーカイブページ
is_post_type_archive( $post_type ) を使う

<?php
// 特定のpost typeで判別
if( is_post_type_archive( 'hibiki' ) ) {
// 投稿タイプがhibikiのアーカイブページ
}

// いずれかのpost typeで判別
if( is_post_type_archive( array( 'akatsuki', 'hibiki', 'ikazuchi', 'inazuma') ) ) {
/* 投稿タイプが
* 'akatsuki', 'hibiki', 'ikazuchi', 'inazuma'
* いずれかに一致するアーカイブページ
*/
}
シングルページ ( 固定ページ、個別投稿ページ、添付ファイルページ )
is_singular( $post_type ) を使う

<?php
// 特定のpost typeで判別
if( is_singular( 'Yudachi' ) ) {
// 投稿タイプがYudachiのシングルページ
}

// いずれかのpost typeで判別
if( is_singular( array( 'Shiratsuyu', 'Shigure',
'Murasame', 'Yudachi' ) ) ) {
/* 投稿タイプが
* 'Shiratsuyu', 'Shigure', 'Murasame', 'Yudachi'
* いずれかに一致するシングルページ
*/
}
http://chaika.hatenablog.com/entry/2015/04/19/090000

2016年9月21日水曜日

2016年以降に「IE8に対応して」といわれたとき思い出したい六項目 - Qiita

2016年以降に「IE8に対応して」といわれたとき思い出したい六項目 - Qiita

http://qiita.com/d2cs-kimura/items/a0b37278931c858f622f?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=d05f6fe7b1-Qiita_newsletter_225_09_21_2016&utm_medium=email&utm_term=0_e44feaa081-d05f6fe7b1-33160825

関数型プログラミングはオブジェクト指向の正当な後継である - Qiita

関数型プログラミングはオブジェクト指向の正当な後継である - Qiita

http://qiita.com/retemo/items/d251f0b558a3ebf1d720?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=d05f6fe7b1-Qiita_newsletter_225_09_21_2016&utm_medium=email&utm_term=0_e44feaa081-d05f6fe7b1-33160825

2016年9月19日月曜日

アクセス解析の人工知能「AIアナリスト」 - サイト分析サービス

https://wacul-ai.com/

2016年9月16日金曜日

WordPress セキュリティ対策プラグイン

WordPressのセキュリティ対策プラグイン15選 - ネタワン
http://netaone.com/wp/wordpress-security/

清水誠のコンセプトダイアグラム活用講座 - WPJ

https://www.webprofessional.jp/lesson/concept-diagram/

2016年9月15日木曜日

ハイブリットアプリ開発でオーディオファイルの再生を便利にするプラグインを使う (1/3)：CodeZine（コードジン）

ハイブリットアプリ開発でオーディオファイルの再生を便利にするプラグインを使う (1/3)：CodeZine（コードジン）

http://codezine.jp/article/detail/9593?utm_source=cz-news&utm_medium=email&utm_campaign=cz-news20160914

2016年9月13日火曜日

CSS レスポンシブデザインメディアクエリブレイクポイントの最適値

[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ | コリス

http://coliss.com/articles/build-websites/operation/css/how-to-media-queries.html

2016年9月12日月曜日

jQueryでグラフ表示

jqPlot Charts and Graphs for jQuery

http://www.jqplot.com/

WP memory limit の変更方法

5倍も早い！WordPressはロリポップより、エックスサーバを使いたい。 | ふりむけばコウホウ

http://www.furimuke.com/2014/09/wordpress-lolipop-wpx.html

WordPressのメモリリミットを開放
WordPressはWP Memory Limitが40MBにWordPress側で制限されています。プラグインを沢山入れて動かす場合は、128MBぐらいに変更したほうが良いです。php.ini設定や.htaccessの編集では変更できません。なかなか情報が見つからず苦労しましたので、やりかたを書いておきます。

変更箇所は、default-constants.php の中にあります。default-constants.phpは、wp-includesフォルダーの中にあります。

探せば直ぐに見つかります。下記のコードの64Mや40M部分を、両方128Mに書き換えればOKです。

// set memory limits
if ( !defined('WP_MEMORY_LIMIT') ) {
if( is_multisite() ) {
define('WP_MEMORY_LIMIT', '64M');
} else {
define('WP_MEMORY_LIMIT', '40M');
}
}

if ( ! defined( 'WP_MAX_MEMORY_LIMIT' ) ) {
define( 'WP_MAX_MEMORY_LIMIT', '256M' );
}

2016年9月8日木曜日

Git初歩者向け解説

クックパッドサマーインターンシップ2016の資料を公開します -
クックパッド開発者ブログhttp://techlife.cookpad.com/entry/2016/09/06/185311

Git
https://speakerdeck.com/moro/about-git-at-cookpad-summer-intern-2016-day1

JavaScriptコンパイラー
https://speakerdeck.com/aamine/cookpad-2016-summer-intern-programming-paradigm

MySQL 基本的にutf8ではなくutf8mb4を使う

MySQL で utf8 と utf8mb4 の混在で起きること - @tmtms のメモ
http://tmtms.hatenablog.com/entry/2016/09/06/mysql-utf8

Git コミットをなかったことにする

Gitでリモートリポジトリを巻き戻す - @tmtms のメモ
http://tmtms.hatenablog.com/entry/20101221/git

2016年9月7日水曜日

AWS ユーザーを追加してFTP操作できるようにする

システム開発(大阪)の依頼なら鈴木商店 | AWS EC2 apacheの実行ユーザー
http://d.suzukishouten.co.jp/blog/suzuki/?p=174

//Web開発専用のユーザー「webdev」追加（グループはapacheグループとする）
useradd -g apache webdev

//Web開発用フォルダの所有者を変更
chown -R webdev:apache /var/www

//アパッチの実行ユーザーを変更するために、httpd.confを編集
//httpd.confを開いて
vim /etc/httpd/conf/httpd.conf
//以下の内容を変更
User suzukishouten
Group apache

//アパッチ再起動
apachectl restart

ec2ユーザー以外のユーザーでsshログイン
開発者にapacheの実行ユーザーでのみログインさせたい場合などec2-user以外のユーザーでログインしたいことがよくあります。

参考：AWS EC2 apacheの実行ユーザー

//rootユーザーで作業する
sudo - su
//ユーザー追加（apacheグループ）
useradd -g apache webdev
秘密鍵、公開鍵はec2-userと同じものにするのでコピー

mkdir /home/webdev/.ssh
cp /home/ec2-user/.ssh/authorized_keys /home/webdev/.ssh/authorized_keys
ファイル所有者・パーミッションの変更

chown -R webdev /home/webdev/.ssh
chmod 700 /home/webdev/.ssh
chmod 600 /home/webdev/.ssh/authorized_keys
以上でwebdevユーザーでsshログインできるようになる

//path-key.pemが秘密鍵
ssh -i path-key.pem webdev@10.10.10.10