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月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 カスタム投稿タイプかどうか判別したい。 - かもメモ


アーカイブページ
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月13日火曜日

2016年9月12日月曜日

jQueryでグラフ表示

jqPlot Charts and Graphs for jQuery

WP memory limit の変更方法


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

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月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

WordPressプラグイン ユーザー登録して資料をダウンロード

WordPressで登録ユーザーだけ画像や資料をダウンロードできる会員制サイトの作り方
http://websae.net/download-for-member-only-20160310/

BOM(部品表)

E-BOM(設計部品表)とM-BOM(製造部品表)の関係を考える : タイム・コンサルタントの日誌から
http://brevis.exblog.jp/24157732/

2016年9月2日金曜日

nw-builderの使い方

GitHub - nwjs/nw-builder:
https://github.com/nwjs/nw-builder

上記ページの説明だと、コマンドラインにどのようにオプションを入力すればよいか例がなく分からなかった。

以下のように入力すればOKだった。


nwbuild -p win64 <PATH TO APP FILES>
※<PATH TO APP FILES> は新規作成したウェブアプリのパスです。
※win64は適宜変更してください。win32,win64,osx32,osx64,linux32,linux64 から選ぶ。

実行すると、buildフォルダに、パッケージが出力される。

開発組織マネジメントのコツ

マネジメントに悩める全てのエンジニアにささげる 伊藤直也の1人CTO Night | Kwappa研究開発室
http://randd.kwappa.net/2016/09/01/671

<script async class="speakerdeck-embed" data-id="260103925c89449284c877b895e09e29" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>