読者です 読者をやめる 読者になる 読者になる

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

MAMPのMySQLをターミナルで操作する@MAMP

MySQL MAMP

f:id:showjinx:20160823114824j:plain

ローカル環境で開発環境を構築する際に手っ取り早く、便利なMAMP。

MAMPからでもMySQLはphpMyAdminで操作できますが、ターミナルからMySQLモニターを通して操作したい場合もあります。

その場合、普通に以下のコマンドを実行しても当然ながらMAMPのMySQLにはアクセスできません。

mysql -u root -p

ターミナルからMAMPのMySQLを操作するには、ローカル環境の環境変数にパスを追加する必要があります。(この例はMac OS Xです)

環境変数のファイルはユーザーのホームディレクトリにある「.bash_profile」になります。(環境によっては.bashrc)

このようなファイル名の先頭にドットのついたファイルは隠しファイルなので、デスクトップからは見えませんから、ターミナルを起動してViやVimから操作します。

showjin-MacBookAir:~ SHOWJIN$ cd
showjin-MacBookAir:~ SHOWJIN$ vim .bash_profile

cdでユーザーのホームディレクトリへ移動。 移動先でvimを起動し、開くファイル「.bash_profile」を指定します。

export PATH=$PATH:/Applications/MAMP/Library/bin

:以降でMAMPのMySQLがあるディレクトリを指定したパスを追加します。

これだけだと追加したパスが反映されないので、ファイルの変更を保存したらvimを終了して、次のコマンドを実行して反映させます。

source .bash_profile

これで冒頭のMySQLモニターの起動コマンドが有効になり、MAMPのMySQLを操作できます。

カスタムフィールドの値を文字数制限して出力@WordPress

WordPress WordPressカスタマイズ

f:id:showjinx:20160726121516j:plain

正規表現を使ったやり方

まず、以下の解説を参考にして確認してみました。

www.tinybeans.net

カスタムフィールドの管理にプラグインToolset Typesを使っています。カスタムフィールドの指定部分は適宜書き換えます。

<?php
     $pattern = '/(^.{50})(.+)/u';
     $text_body = (types_render_field("カスタムフィールドのスラッグ", array()));
     $matches = array();
     preg_match($pattern, $text_body , $matches);
     if ($matches[2] != '') {
          $out = $matches[1] . '… <a href="'. get_permalink() .'" class="more">→ ReadMore</a>';
     } else {
          $out = $text_body . ' <a href="'. get_permalink() .'" class="more">→ ReadMore</a>';
     }
     echo($out);
?>

HTML要素は実体参照されずHTMLとして出力されます。

&nbsp;

等のエンティティも半角スペースとして出力されます。

1行目の「50」が制限する文字数です。この数値を超える場合には末尾に「…」を出力します。この数値に満たない場合にはそのまま(カスタムフィールドの値を)出力します。

50文字までいく前に改行が入っているとそこで終わりとみなされ(指定した文字数制限に満たっていない)入力されている文字が全て表示されます。

mb_strimwidth() 関数を利用する

PHPの mb_stimwidth() 関数を使った場合です。第三引数の数字のところが制限する文字数です。文字化け対策のため、文字コードを明示しています。

<?php
    $str = mb_strimwidth(post_custom('wpcf-remarks'), 0, 20 , '', utf8);
    $more = '&nbsp;<a href="'. get_permalink() .'" class="more">→ ReadMore</a>';
    echo esc_html($str); // エスケープ処理
    echo $more;
?>

カスタムフィールドのスラッグで冒頭に「wpcf-」がついてますが、これはプラグインToolset Typesを利用している場合です。プラグインを使用していなければ、そのフィールドのスラッグそのままです。

HTML要素はエスケープ(実体参照)処理しています。

wp_html_excerpt() 関数を利用する

WordPressで用意されているwp_html_excerptを利用する例です。

HTML要素が入っている場合には除去されます。エンティティ文字は変換されます。(HTMLソース上では実体が文字列として存在するので、引数の文字数指定の際にはこの文字数を考慮する必要があります)

<?php
     $str = (types_render_field("カスタムフィールドのスラッグ", array()));
     $count = 80; // 制限したい文字数
     $more = '… <a href="'. get_permalink() .'" class="more">→ ReadMore</a>';
     echo wp_html_excerpt( $str, $count, $more );
?>

赤文字部分はカスタムフィールドの指定です。使用しているプラグイン等で指定の仕方が変わってきます。これはToolset Typesを使った例です。

ここまでで三通り試行してみましたが、使い勝手がよく、文字数指定への正確性も確かなのは最後の wp_html_excerpt() 関数かなと感じます。

投稿本文にYoutube動画の共有URLを埋め込むカスタマイズ@WordPress

Youtube レスポンシブWebデザイン スマートフォン対応 WordPressカスタマイズ WordPress

f:id:showjinx:20160725123133j:plain *写真は本文とは関係ありません(Oisixで購入した「ケール」とチーズのサラダです、美味しかったです)

WordPressの投稿本文にYoutube動画の共有URLを記述すると、自動でiframe要素に変換され、フロント側(訪問者が閲覧する)に動画の再生ウィジェットが埋め込まれます。

Youtubeの共有URL

f:id:showjinx:20160725122833p:plain

WordPressの投稿に共有URLを記述

f:id:showjinx:20160725122847p:plain

f:id:showjinx:20160725122857p:plain

変換されたhtmlソースはこのようになっています。

<p><iframe width="500" height="281" src="https://www.youtube.com/embed/3K__5isGpXk?feature=oembed" frameborder="0" allowfullscreen></iframe></p>

埋め込み動画をレスポンシブに対応させる

Youtube動画の共有URLが変換されるiframのhtmlソースを望む形に書き換えるためにフックを使ってfunctions.phpにコードを追加します。

functions.phpにフックを追加

/* Youtube動画の共有URLの変換をカスタマイズする */
function custom_youtube_oembed($code){
  if(strpos($code, 'youtu.be') !== false || strpos($code, 'youtube.com') !== false){
    $html = preg_replace("@src=(['\"])?([^'\">\s]*)@", "src=$1$2&showinfo=0&rel=0", $code);
    $html = preg_replace('/ width="\d+"/', '', $html);
    $html = preg_replace('/ height="\d+"/', '', $html);
    $html = '<div class="youtube_container">' . $html . '</div>';

    return $html;
  }
  return $code;
}

add_filter('embed_handler_html', 'custom_youtube_oembed');
add_filter('embed_oembed_html', 'custom_youtube_oembed');

iframeの親要素にclass名「youtube_container」をつけ、動画の再生オプションとして

  • showinfo=0 : 動画のタイトルを非表示に
  • rel=0 : 関連動画を非表示に

も追加しています。また、iframe要素のwidth, height属性をつけないようにしています。

レスポンシブに対応させるためのCSSを追加

/* Youtube動画をレスポンシブ対応 */
.youtube_container{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.youtube_container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

以上です。

これでYoutube動画の共有URLを投稿本文に記述すると、width, height属性をもたないiframe(class名「youtube_container」を持つdiv要素に囲まれた)要素と、動画再生オプションに「動画タイトル非表示」と「関連動画非表示」をつけた文字列が出力されるようになりました。

以下の解説のお世話になりました。ありがとうございます。

WordPressの投稿にURLだけでYouTube動画を埋め込む際のHTMLをカスタマイズする方法

テキスト、またはinput要素のvalue値を指定した文字列置換(あるいは削除)@jQuery

jQuery

f:id:showjinx:20160722124658j:plain

jQueryを使った文字列置換の例です。(割愛してますが、いずれの例もjQuery本体を先に読み込む必要があります)

HTML要素の文字列を対象

<script>
    jQuery(function() {
        jQuery('.name_place').each(function(){ // 対象要素を指定
            var txt = jQuery(this).html();
            jQuery(this).html(
                txt.replace('ブルーベリーファーム','北池袋駅') // 置換対象の文字列を指定し、次に置換する文字列を(削除なら空で)
            );
        });
    });
</script>

上記の例ではclass名に「name_place」を持つ要素内にある「ブルーベリーファーム」という文字列を「北池袋駅」に置換します。

jQueryのhtmlメソッドを使用しています。この例の場合、textメソッドを使うとHTMLソースも対象となり、指定した文字列のみの置換結果が得られません。htmlメソッドを使うのかtextメソッドを使うのか、ケースによって使い分けます。

input要素が持つ値を対象

<script>
    jQuery(function() {
        jQuery('.mw_wp_form input').each(function(){ // 対象要素を指定
            var txt = jQuery(this).val();
            jQuery(this).val(
                txt.replace('日本以外','') // 置換対象の文字列を指定し、次に置換する文字列を(削除なら空で)
            );
        });
    });
</script>

上記の例では指定したinput要素が持つ値(value)を対象としています。input要素の値を指定する場合にはhtmlメソッドではなくvalメソッドを使用します。

カスタム分類のターム名(スラッグ)で条件分岐@WordPress

WordPress条件分岐

f:id:showjinx:20160722115620j:plain

WordPressのカスタム分類で割り当てられているターム名(スラッグ)を判別して出力を分ける例です。single.phpで使用します。

以下の例ではカスタム分類で「seminar-type」というものが存在し、これに「brown-pickles」というスラッグが割り当てられている場合を判断しています。

<?php if ( is_object_in_term($post->ID, 'seminar-type','brown-pickles') ): ?>
ここにタクソノミー(スラッグ)固有のPHP/HTMLを書く
<?php endif; ?>

Vimのセットアップ

Vim

f:id:showjinx:20160721141316j:plain

XSERVERでsshによる接続が出来るようになり、Vimをインストールしました。

が、このままでは私が普段使う環境にないのです。

例えば私は「:E」を使ってファイラー機能を多用するのですが、インストールしたデフォルトの状態ではこの機能は使えません。

*Vi互換モードになっていることが原因です。

Vimの設定ファイルを用意する

Vimは設定ファイルの内容次第で様々にカスタマイズ出来ます。なので、まずはこの設定ファイルを作成します。場所はユーザーホームです。

ここまで、XSERVERを対象として進めてきているので、XSERVERの場合のユーザーフォームは

/home/XSERVERのユーザー名

になります。(格納しているドメインごとのディレクトリがある階層)

.vimrc

設定ファイルの名前は「.vimrc」です。これは決まり事で、勝手な名前はつけられません。

まず「Vi互換モード」の動作をしないよう、設定を追加します。

:set nocp

これでコマンド「:E」が使えるようになりました。ファイラーとして、ディレクトリにある内容(ファイル、ディレクトリ)の一覧を見ることができます。

プラグインを追加する

Vimにはプラグインを追加することが出来ます。これもユーザーのホームディレクトリに「.vim」という専用ディレクトリを作成し、この中に「plugin」ディレクトリを作り、使用するプラグインのファイルを置きます。

*.vimはVimインストール後、起動させるとswpファイルを置くために作成されるので、既にある場合にはそのままでかまいません。

私はそれほどプラグインや細かい設定はしませんが、文字コード関係で必要なものは使用しています。以下がそれですが、これとっても大事、重宝してます。

recognize_charcode.vim
https://github.com/banyan/recognize_charcode.vim

こちらを.vim/pluginディレクトリ内にアップロードすれば、Vimの起動時に読み込まれます。

.vimrcに設定を追加する

シンタックスハイライトやインデントのタブ設定等、自分の使い勝手のいい設定を.vimrcに記述することで使いやすくなります。こういったカスタマイズが出来るところもVimのありがたいところです。

さきほどの.vimrcに私は以下を追記しています。カラースキーマも指定すると格段にコードが読みやすくなり、コーディング作業がしやすくなります。(カラースキーマは自作のものを公開している方もいらっしゃるので、気に入ったものがあれば使うといいでしょう)

私は「desert」がお気に入りです。

Vim Colors http://www.softantenna.com/wp/webservice/vim-colors/

私の.vimrc

:syntax on
:autocmd FileType *      set formatoptions=tcql nocindent comments&
:autocmd FileType c,cpp  set formatoptions=croql cindent comments=sr:/*,mb:*,ex:*/,://
:set nocp
:set number
:set sw=4 ts=4 sts=0
:set shiftwidth=4
:set autoindent
:set autowrite
:ab #d #define
:ab #i #include
:ab #b /********************************************************
:ab #e ^V^H^V^H********************************************************/
:ab #l /*------------------------------------------------------*/
:set notextmode
:set notextauto
:set hlsearch
:set incsearch
:colorscheme desert

""
" GetStatusEx
"
"
function! GetStatusEx()
  let str = ''
  let str = str . '[' . &fileformat . ']'
  if has('multi_byte') && &fileencoding != ''
    let str = '[' . &fenc . ']' . str
  endif
  return str
endfunction
set statusline=%y%{GetStatusEx()}%F%m%r=<%c:%l>

Vimをインストール@XSERVER

Vim XSERVER

f:id:showjinx:20160721133008j:plain

GUIを必要としない(マウス操作が不要でキーボードのみで操作できる)高機能なテキストエディタ「Vim」をXSERVERで使えるようにします。

Vim - ウィキペディア
https://ja.wikipedia.org/wiki/Vim

Vimのソースをダウンロード

リポジトリをみて最新版を確認します。

ftp://ftp.vim.org/pub/vim/unix/

7.4が最新版(2016年7月21日現在)のようなので、これ(vim-7.4.tar.bz2)をダウンロードします。(ターミナルでssh接続してコマンドラインで操作します)

$ mkdir ~/tmp
$ cd ~/tmp
$ wget ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2
$ tar jxvf ./vim-7.4.tar.bz2

それぞれのコマンドの意味は

mkdirコマンドでホームディレクトリにtmpディレクトリ(一時的なファイル保管場所)を作り、このディレクトリにcdコマンドで移動。

先ほどftpのリポジトリで確認したソースファイルを指定してwgetコマンドでダウンロード。

ダウンロード完了したらtarコマンドにオプションつけて、ダウンロードしたソースファイルを指定して展開、です。

これで圧縮ファイルが展開され「vim74」というディレクトリが出現します。

パッチをあてる

パッチファイルを以下のURLで確認します。

ftp://ftp.vim.org/pub/vim/patches/

必要なパッチはVimのバージョン7.4向けのものなので、上記URLの一番下のほうにある「7.4」というディレクトリをクリックします。

遷移先で「7.4.001」から始まる各パッチファイルが何番まであるか確認します。今回は末尾のパッチファイルが「7.4.999」だったので、これを指定してダウンロードします。

$ cd vim74
$ mkdir patches
$ cd patches
$ curl -O 'ftp://ftp.vim.org/pub/vim/patches/7.4/7.4.[001-999]'

cdコマンドで展開したvimのソースファイルがあるディレクトリに移動。そこでパッチ用のディレクトリ「patches」を作成。このディレクトリに移動し、今度はcurlコマンドを使って必要なパッチを全てダウンロード。

999まであるので、けっこう時間かかります。しばらく放っておいて他のことをするかお茶でも飲んで待ちます。お茶の場合は5杯くらい飲めちゃうかもしれません。

全てのパッチファイルをダウンロードしたら、いまいる階層からひとつ上(patchesがあるvim74)に移動し、catコマンドにオプションをつけてパッチをあてます。

$ cd ../
$ cat patches/7.4.* | patch -p0

vim74の中にあるsrcに移動してコンパイルします。

$ cd ./src
$ ./configure --enable-multibyte --enable-xim --enable-fontset --with-features=big --prefix=$HOME

エラーがでました。ライブラリが足りないということです。

no terminal library found checking for tgetent()... configure: error: NOT FOUND! You need to install a terminal library; for example ncurses. Or specify the name of the library with --with-tlib.

「for example」で示している「nurses」をインストールすることにします。

tmpディレクトリに移動してwgetでソースを取得、tarで展開します。(リポジトリを見る6.0が最新版だったのでこれを指定)

$ cd ~/tmp
$ wget http://ftp.gnu.org/pub/gnu/ncurses/ncurses-6.0.tar.gz
$ tar zxfv ncurses-6.0.tar.gz

展開したらnursesのディレクトリに移動してインストールします。

$ cd ncurses-6.0
$ ./configure --prefix=$HOME
$ make
$ make install

nursesがインストールできたら再度vimをインストールします。(重複するので既出のコマンドの説明は割愛します)

$ cd ~/tmp/vim74/src
$ ./configure --enable-multibyte --enable-xim --enable-fontset --with-features=big --prefix=$HOME --with-local-dir=$HOME
$ make
$ make install

今度はインストール完了できました。

vimコマンドを打って確認します。

$ vim

f:id:showjinx:20160721132821p:plain

Vimの起動を確認出来ました。

Vimのセットアップ

自分に使いやすいように設定ファイルやプラグインを用意します。

詳しくは別に投稿しました。

blog.showzine.co