mania-ku

何か作りたいプログラマ未満。

【jQuery】親要素を削除するunwrap()

下記のようなHTMLのときに、pをクリックしたら親のdivを消したいときはどうすればいいのでしょうか?

<div>
	<p>ここをクリックする</p>
</div>

remove()ではない

jQueryで削除と言えばremove()ですが、これでは子以下も削除してしまいます。

$('div p').click(function(){
	$(this).parent().remove(); //divとその中身が全て消えちゃう
});

unwrap()を使う

親要素だけを削除したい場合はどうすればいいのでしょうか?
jQuery1.4系以降だとunwrap()が使えます。

$('div p').click(function(){
	$(this).unwrap(); //divだけを消す
});

デモ

参考サイト

親要素のみ削除する方法[jQuery1.4系版] | THE HAM MEDIA BLOG

【WordPress】記事の1枚目の画像か、OGP画像のデフォルトの画像を取得する

このブログはFacebookとTwitterに自動投稿し、ときどきGoogle+にも手動で投稿しています。
そろそろ記事特有の画像を使いたいと思い、「記事の1枚目の画像か、OGP画像のデフォルトの画像を取得する」方法を調べてみました!

function.phpで記事の1枚目の画像か、OGP画像のデフォルトの画像を取得する

※以前載せていたWordPress(ワードプレス)で記事の一番最初の画像を取得する方法 | 株式会社LIGのコードだと取得できなくなっていたので、新しいものに書き換えました。

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img)){ //Defines a default image
		$first_img = デフォルトの画像パス
	}
	return $first_img;
}

取得した画像をheader.phpで呼び出す

<meta property="og:image" content="<?php echo catch_that_image(); ?>">

参考サイト:構想雑文 : [Wordpress]投稿記事から画像を取得し、リサイズして画像を画像を表示させるには – livedoor Blog(ブログ)

【Mac】基本&よく使うコマンド

コーダーでも、いくつかコマンドを打てるとすごく便利です!
アプリを入れすぎるとPCが重くなったりするので、簡単なものはメモっておくのがオススメ。
また最近はアプリのインストールなどにも使うので、慣れておくといいのではないでしょうか?

ディレクトリ関係

ディレクトリの移動

cd パス

MacのMacintoch HDに移動 [便利]

cd /volumes/Macintosh¥ HD

ディレクトリの中身を取得

ls

※ls -以降はオプションになる

ディレクトリのより詳しい情報を取得

ls -l

表示される内容は

  • ・ファイルの種別(dはディレクトリ)
  • ・パーミッション(所有者のrwxグループのrwxすべてのrwx。)
  • ・ディレクトリ数(ファイルの場合はハード・リンク数)
  • ・所有者
  • ・グループ
  • ・容量(バイト)
  • ・最終更新日
  • ・ファイル名とリンク

パーミッションの詳細は

  • r:読むことができる:4
  • w:書きこむことができる:2
  • x:実行することができる:1

参考:Linuxコマンド道場 – ファイルの詳細閲覧:ITpro

ディレクトリの隠しファイルも取得

ls -a

パーミッションを変更

chmod パーミッション ()

パーミッションは詳細の数字を足して3桁にする。
rwxr-xr-x(所有者がrwx、グループがr-x、すべてがr-x)にしたいときは755になる。

ディレクトリの作成・削除

ディレクトリの作成

mkdir ディレクトリ名

ディレクトリの削除

rmdir ディレクトリ名

ファイル関係

ファイルの作成

vi ファイル名

ファイルの削除

rm ファイル名

ファイルのコピー

cp 元ファイル名 コピー後のファイル名

ファイルの移動・リネーム

mv 元ファイル名 移動先のパス(名前を変える場合はファイル名まで)

ファイルの中身を見る

cat ファイル名

ファイルの中身を一画面分見る

more ファイル名

スペースキーを押すと、次の画面分のテキストを見ることができる。
最後までいくとプロンプトに戻る。

less ファイル名

スペースキーを押すと、次の画面分のテキストを見ることができる。
プロンプトに戻るには「q」

ファイルの頭10行を見る

head ファイル名

ファイルのお尻10行を見る

tail ファイル名

頭やお尻の行数を変える

head -行数 ファイル名

マウスオーバー用に画像をリネームする [便利]

***.jpgや***.gif、***.pngを***_on.jpgや***_on.gif、***_on.pngに変更できます。
フォルダ内の複数の画像を一気にリネームできるので、オススメです!

for F in *.*; do mv $F ${F/./_on.};done

ワイルドカード

*:任意の文字いくつでも

拡張子がtxtのファイルを削除する場合

rm  *.txt

?:任意の1文字

test.t(何か一文字)tのファイルを削除する場合

rm test.t?t

find関係

ファイル・ディレクトリを探す

find パス -name "名前"

ファイルだけ探す

find パス -name "名前" -type f

ディレクトリだけ探す

find パス -name "名前" -type d

htmlの一覧を取得 [便利]

サイトマップを作るときに使えます!

find ./ -name "*.html"

htmlの数を数える [便利]

サイトのページ数を数えるときに使えます!

find ./ -name "*.html" | wc -l

grep関係

ファイルの中身を検索する(行単位)

grep テキスト 対象ファイル

マッチしたカウント数を出す

grep -c テキスト 対象ファイル

ディレクトリ以下も検索する

grep -r テキスト 対象ファイル

コマンドラインのTIP

入力補助

文字列+Tab

過去のコマンドを呼び出す

過去のコマンドから新しい方に移動するときは

過去のコマンドを一覧で出す

history
↓
!使いたいコマンドの数字

1個前のコマンドを呼び出す

!!

文字列で始まる最近使ったコマンドを呼び出す

!+文字列

文字列で始まる最近使ったコマンドの内容が見れる

!+文字列+:p

マニュアルを調べる

man コマンド

スペースで移動し、「q」で終わる

ディレクトリ構造を調べる

tree

Macの場合は、MacPorts や Homebrewでtreeコマンドをインストールする必要があります

時間を調べる

date

カレンダーを表示する

cal

カレンダーの年を指定する

cal -y 年

ファイルの行数を調べる

wc l ファイル名

サーバ系

MySQLがつながらないとき

killall -9 mysqld

その他

DNS キャッシュをリセットする方法

OS X Mountain Lion または Lion

sudo killall -HUP mDNSResponder

Mac10.6

sudo dscacheutil -flushcache

【WordPress】テーマを3代目にしてみた

WordPress3.8.1にアップデートするときにテーマを変更したかったので、またテーマを作ってみました!

今回こだわった・変えたところ

  • ・どっかにロングシャドウを使いたかったので、使ってみた。
    ジェネレーター:Long Shadows Generator
  • ・前検索が下でユーザビリティが悪かった気がしたので、上に持ってきた。
  • ・フラットデザイン的なふんいき
  • ・字をでかくする
  • ・あまりつまってないフォントを使う。
  • ・aタグは蛍光マーカーのような感じで

次回気をつけたいところ

  • ・iframeの存在を忘れない。
  • ・サイト内検索のタグとカテゴリを変更したときに、検索結果でもそのままのoptionにしたい。
  • ・もうすこしWordPressに慣れる
  • ・PHPもっと勉強する
  • ・なるべく旦那さんに聞かない

【WordPress】管理画面のサイドバーにショートカットを追加

WordPressの管理画面のサイドバーにショートカットを追加する方法を調べてみました。
今回は自分の投稿一覧へのリンクをサイドバーの一番上に表示して、アイコンはアバターのアイコンにしてみました。

2014/02/01追記
httpとhttpsをどちらとも使える方法に変更しました。

add_action( 'admin_menu', 'register_menu_page' );

function get_avatar_url($id_or_email, $size = null, $default = null, $alt = null){
    $image = get_avatar($id_or_email, $size, $default, $alt);
    if(preg_match("/src='(.*?)'/", $image, $match)) {
        if(isset($match[1])) {
            return $match[1];
        } else {
            return false;
        }
    } else {
        return false;
    }
}

function register_menu_page(){
	//管理画面のサイドバーに追加:add_menu_page( ページのタイトル, メニーのタイトル, ,メニューページのコンテンツを表示するPHPファイル, メニューページにコンテンツを表示する関数 )
	//ユーザのアイコンを取得する:get_avatar( IDもしくはメールアドレス, 画像のサイズ, デフォルトで表示するもの, ALT )
	add_menu_page('タイトル', '自分の投稿ページ', 'manage_options', 'page_redirect','redirect_url',get_avatar_url(get_current_user_id(), 16),1);
}

$current_pageURL = $current_protocol.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];

function redirect_url() {
	$redirect_url = get_bloginfo('url').'/wp-admin/admin.php?page=page_redirect';
	if( isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') {
		$current_protocol = 'https://';
	} else {
		$current_protocol = 'http://';
	}
	$pageURL = $current_protocol.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	$external_redirect_url = admin_url( 'edit.php?post_type=post&author='.get_current_user_id(), 'admin' );

	if ($pageURL == $redirect_url) {
		wp_redirect( $external_redirect_url, 302 );
	}
}

add_action( 'admin_menu', 'redirect_url' );

【slidesjs】iPhoneでスワイプ時の不具合の直し方

iPhoneでslidesjsをスワイプしていると、スワイプできなくなったりなにもスライドされてこないことがあります。
英語でぐぐると出てきますが、日本語では見つからなかったのでメモ。

やんわりほんやく

jsの88行目の
webkitBackfaceVisibility: “hidden”
を削除するか、
webkitBackfaceVisibility: “visible”
を設定しよう。

英語は2に近い3という成績だったのですが、仕事を始めてからやんわりわかる部分が増えてきたような気がします。
今年は英語習いに行こうかなぁ・・・

【Youtube】埋め込みコードにhttp:が無くなった!

会社でそんな話を聞いたので、Youtubeに見に行ったら本当に無くなってました。
例えばラスマス・フェイバーのこちらの動画の埋め込みコードを見てみると、
http://www.youtube.com/→//www.youtube.com/
になっています。

<iframe width="560" height="315" src="//www.youtube.com/embed/aswXRccrxVU" frameborder="0" allowfullscreen></iframe>

ちなみにこのような動画です

httpがなんでなくなったのか?

ウェブサイトにはSSL(フォームなどセキュリティが必要なページ)と普通のページがあるのですが、半年ほど前からSSLのページでYoutubeが見れなくなっていました。
たぶんブラウザの仕様の変更か、Youtubeの仕様変更だと思います。
もともとhttp:がない記述だと、SSLと普通のページ両方に使えるコードになるので、そのようにな変更されたのかな?と思います。

ローカルで見れない

この記述だとローカルでは見れないですね・・・
でもテストサーバなりで確認するときに見ることができたら、いいのではないでしょうか。
どうしてもローカルで見たい場合は、ローカルにサーバを立てればいいと思います。
プログラマじゃなくても、ちょっとがんばればできます。
MacであればMAMP、WinであればXAMPPあたりがメジャーだと思います。私はMAMPを使っています。

【Advent calendar】sublimeText2でJSHINTを入れる方法

これはadvent calendar13日目の記事です。
12日目の昨日はWindowsXPのサポートが終了するけど、そのあと使い続けるってどういうこと?でした。

jQueryプラグインの構文チェックをしてみたくて、Mac10.6.8でインストールしてみました。
必要なものは

  • ターミナル
  • sublimeText2

です。

ターミナル

(nodeとHomebrewがあったらとばす)Homebrewのインストール

ruby <(curl -fsSkL raw.github.com/mxcl/homebrew/go)

(node入ってたらとばす)nodeをインストール

brew install node

JSHintをインストール

sudo npm install -g jshint

sublimeText2

(sublimeText2入ってたらとばす)sumlimeText2をインストール

Sublime Text: The text editor you'll fall in love with

(Package Control入っていたらとばす)Package Controlを入れる

View > Show Console

Ctrl + `

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation') 

JSHINTを入れる

Cmd+Shift+p>install>JSHINT

適当なJSを開いて、動くか確認

ファイルの上で右クリック>JSHINT
もしくは
Ctrl+J

リアルタイムにエラーチェックするためにSublimeLinterをインストール

Cmd+Shift+p>install>SublimeLinter

エラーチェックの設定

よくわからないので、ひとまずバシャログの設定をコピペしました。
これで、jQueryのエラー出なくなるみたいです。
Preferences>Package Settings>SublimeLinter>Settings – User

でもこれだとJSHINTと違う箇所にもエラーが出てしまいます・・・
謎です

【Advent calendar】カンマ区切りの金額の正規表現

これはadvent calendar9日目の記事です。
8日目の昨日はAndroidの文字を太字にする方法2種でした。

これから増税が2回もある(2014年と2015年あたりに)ので、それに伴うサイトの修正作業があるかもしれませんよね。
正規表現を使うと、簡単に検索や置き換えができます。
※DreamweaverやSublimeでも使えます。

「税込X,XXX円」のとき

税込(0|([1-9][0-9]{0,2}(,[0-9]{3})*?)|0|([1-9][0-9]{0,2}(,[0-9]{3})*?))円

「X,XXX円(税込)」のとき

(0|([1-9][0-9]{0,2}(,[0-9]{3})*?)|0|([1-9][0-9]{0,2}(,[0-9]{3})*?))円(税込)

記述はなかなか難しいですが、ぐぐると例がいっぱいあります。
自分で一から作るのは難しくても、似たようなものを修正すれば結構使えたりしますよ!

10日目の明日は【Advent calendar】2011年モデルMacBook Proのディスプレイの修理方法とその値段 | mania-kuです。
へばのー;)

【Advent calendar】jQueryプラグイン作成で気をつけたいところ

1日空いてしまいました・・・
これはadvent calendar5日目の記事です。
4日目のおとといはjQueryプラグイン作成で躓いたことでした。

new Array()と[]どちらを使うか?

いつも[]を使ってるけど、new Array()使ってる人やプラグインも見るので違いを調べてみました。
サイズを指定することがなければ[]でいいみたいです。(new Array(数字)で配列の数を指定できます)
速度的にも[]の方がよいとか。びっくりです!
参考:JavaScript – new Array()と[]の違い – Qiita [キータ]

$(window).scrollの注意点

forなどループをまわすときは、パフォーマンスによってスクロール終了時のイベントに変更したほうがいいみたいです。
スクロール終了時のイベントの書き方参考:make a record of…: [JavaScript] スクロールの終了時にイベントを起動する

CSSを複数書くときは、書き方をそろえるとキレイ

$(this).css({
    top: '50%';
    marginTop: '-100px'
});
//もしくは
$(this).css({
    'top': '50%';
    'margin-top': '-100px'
});

キャメルケースや_などの命名規則は統一した方がキレイ

プログラマさん(java、phpとか)はキャメル、それ以外(デザイナー、コーダーとか)_を使ってることが多いイメージです。
私はまぜまぜしちゃうので、ちゃんと気をつけて命名したいですね。

6日目の明日は横浜の動物園野毛山動物園/金沢動物園はオススメ!です。
ズーラシアは大学のときにイベントのときに何度も行ったのもあって、最近は行ってないなぁ・・・
また行きたいですね!