ブログ

  • “.みんな” ドメインの1年利用クーポンに2行だけで応募してみた結果

    “.みんな” ドメインの1年利用クーポンに2行だけで応募してみた結果

    見事、クーポンを頂くことができました。

    せっかくもらえたので、もらうための手順を書き残しておきます。

     

    .みんなドメインのクーポンをもらうには

    Google さんがやっているキャンペーン、はじめよう.みんな の応募フォームにアクセス。

    で、応募フォームに名前とメールアドレス、アイデアを記入して応募します。

    あなたのつくりたい「◯◯◯.みんな」ウェブサイトアイデア応募フォーム – Google
    あなたのつくりたい「◯◯◯.みんな」ウェブサイトアイデア応募フォーム – Google

     

    終わりです。簡単。

     

    どういう文言を送ったか

    ぼくの場合、たった2行だけ。

    「○○○○○.みんなドメインを取得。ドメイン名に関連した○○○○○を○○○○○するサイト。」

    これだけ。添付もなし。

    応募して3日後に無事クーポンを頂くことができました。

    みんなドメイン応募結果
    みんなドメイン応募結果

     

    応募するメリットって?

    1年間無料だけかと思いきや、実際にサイトを制作すると、そのうち一部ではありますが “みんなの.みんな” というサイトで紹介してくれるんですねー。

    ある程度の流入が見込めそう!

     

    ホホまとめ

    時間にして5分程度の応募で1年間使えるみんなドメインクーポンをしゅっと手に入れられるので、どんどん応募してみればいいと思うよ!

    新しくとったみんなドメインでサイト、つくるぞーっと。

  • やながわの新商品、「丹心バウム桜」が販売されたということでさっそく

    やながわの新商品、「丹心バウム桜」が販売されたということでさっそく

    すっかりファンになってしまった西日本、兵庫県は丹波のやながわさんに足を伸ばし。

    2014年3月15日より本店限定発売の「丹心バウム桜」、買ってきました。

     

    やながわさん

    兵庫県の真ん中やや東あたりにあります。

    丹波の素材を使った特産品を作ってはられます。

     

    カフェスペースもあるんです

    店舗内にカフェスペースがありまして、飲食ができるという。

    今回はおぜんざい、「黒さや大納言小豆ぜんざい」を食べてきましたよ!

    ぜんざいのガツッとくる甘さが好きなんですよねー。

     

    買ってきました、丹心バウム桜

    この春新登場。

    桜の塩漬けをペーストにして生地に練り込んであるという…!

    しっとりとした生地からほのかに香る桜が春っぽく、あっさりしながらそれでいてグッとした甘さ。

    そこいらのバウムクーヘンではないです。

     

    ホホまとめ

    やながわさんは楽天市場でも買うことができます、興味があればのぞいてみるといいかも。

    オススメは3月で終了する和のモンブラン。

    栗全開な和のモンブランは以前に書いたので合わせて見てもらえれば。

  • 1歳の誕生日を迎える甥へのプレゼントに悩んだ結果、touch に。

    1歳の誕生日を迎える甥へのプレゼントに悩んだ結果、touch に。

    甥がこの春、無事に1歳を迎えるということで。

    初甥なので可愛がり倒し。

    誕生日にプレゼントをあげることにしました、BABY TOUCHベイビー タッチ

     

    考えたプレゼント候補

    • おもちゃ
    • お金
    • 絵本

    ベタにおもちゃってのが一番最初に考えました。

    ただ、おもしろくないので却下。

     

    次に、社会の縮図を叩き込むべく現金を与えようと考えました。

    教育上の影響を考えて却下。

     

    絵本にしたよ!

    本が好きだと聞いていたので絵本に。

    大阪梅田の紀伊國屋へ出かけ、実物を見繕う。

    まだ幼いので、できれば厚手・楽しめる・危なくないを条件に。

     

    おあつらえむきの絵本、BABY TOUCH

    そうです、touch 機能付き。

    一目見てグッときました。

    BABY TOUCH の素晴らしいところ

    写真を数点、撮ってみました。

    角が丸く、触ってケガすることのないデザイン。

    角膜が色褪せてないちびっ子に突き刺さるカラフルさ。

    さまざまな素材を実際に触って感じられるギミック。

    素晴らしい…!!写真では到底伝わらないロマン。

    むしろ大人たちが喜んで触りまくるほどの絵本。

     

    ホホまとめ

    一冊840円を2冊プレゼントしました。

    あげた瞬間放り投げてくれました。

    赤ちゃんへのプレゼントにはぴったりな一品、ほんと良い本。

  • xampp で phpDocumentor を使えるようにする

    xampp で phpDocumentor を使えるようにする

    php のライブラリやアプリケーション・CMS などの API を理解するためにソースを追いかけるっというのは無駄なのでドキュメントを生成して、ドキュメントから読み解くのが正着。

    php では phpDocumentor が主に使われています。

    Zend Framework や Google app engine、WordPress など。

    インストール手順・使い方をよく忘れるのでメモ(以下 Windows + xampp 環境

     

    php に環境変数を通しておく

    環境変数PATHに xamppインストールフォルダ/php を通しておくと便利なので通しておく。

     

    pear コマンドの確認

    pear が使えるか確認、pear バージョンが出れば使える。

    pear version

     

    インストールの前に、xampp に古い phpDocumentor 1.4.4 が入っていたので削除。

    pear uninstall phpDocumentor

     

    ついでに pear の更新。

    pear upgrade-all

     

    phpDocumentor のインストール

    phpDocumentor 公式サイトの手順に従って進める。 インストールは pear のコマンドから。

    pear channel-discover pear.phpdoc.org
    pear install phpdoc/phpDocumentor
    phpDocumentor インストール
    phpDocumentor インストール

     

    phpDocumentor のインストール完了。

    phpdoc 起動のための環境変数を設定。

    PHPBIN と PHP_PEAR_BIN_DIR を通す。

    PHPBIN_PHP_PEAR_BIN_DIR
    環境変数を設定

     

    もしくは、xamppインストールフォルダ/php の phpDocumentor 起動バッチを修正。

    最終行をコピーして書き変え・コメントアウト

    @echo off
    if "%PHPBIN%" == "" set PHPBIN=php.exe
    if not exist "%PHPBIN%" if "%PHP_PEAR_PHP_BIN%" neq "" goto USE_PEAR_PATH
    GOTO RUN
    :USE_PEAR_PATH
    set PHPBIN=%PHP_PEAR_PHP_BIN%
    :RUN
    rem "%PHPBIN%" "%PHP_PEAR_BIN_DIR%\phpdoc.php" %* ここをコピーして rem でコメントアウト
    "%PHPBIN%" "xamppディレクトリのパス\php\phpdoc.php" %*

     

    ここまでやれば phpdoc コマンドが使えます。

     

    phpDocumentor でドキュメントを出力する

    コマンドの使い方は phpdoc -h でヘルプが見られる。

    phpdoc -h
    phpdoc -h

     

    基本的には、

    phpdoc -d {ドキュメントを作りたいパス} -t [出力先]

    でオッケー。

    –title “タイトル” とか使うと、ドキュメントのタイトルの指定ができたりする。

     

     

    phpdoc コマンドでドキュメントを作るも、

    「Unable to find the ‘dot’ command of the GraphViz package. Is GraphViz correctly installed and present in your path?」つまり、GraphViz が入ってないし PATH が通ってないよ!

    と怒られるのでドキュメントのチャート生成に必要な graphviz を入れる。

    Windoes 用をインストールして、GraphViz インストールディレクトリの bin フォルダに環境変数PATH を通す。

    これでようやく問題なく出力できるように。

    WordPress のプラグイン、Jetpack の API Document 生成を試す。

    Jetpack WordPress Plugin  API ドキュメント
    Jetpack WordPress Plugin API ドキュメント

     

    できた。

     

    ホホまとめ

    完全に自分のためのメモ。

    よく忘れることは書いておくとあとあと自分で思い出せるのでよし。

    ついでに作成した Jetpack のドキュメントをサーバーにアップしておいたんで、必要な人は見るといいかも。

  • WordPress 管理画面の投稿一覧にアイキャッチを表示すると見やすい。そして野良プラグイン化。

    WordPress 管理画面の投稿一覧にアイキャッチを表示すると見やすい。そして野良プラグイン化。

    WordPress の管理画面から見られる投稿の一覧にアイキャッチがあれば便利だなーと思ったので実装。

    パッと見てわかるようになりますよ。

    2014.03.13 いらない消し忘れたコードあったので修正しました

     

    使ったフック

    投稿のカラムを触るフックたち。

    Codex にはお世話になってます。

     

    投稿一覧にアイキャッチを表示するために実装したコード

    以前、投稿一覧に ID を出力するってやつを書いたんですが、似た感じです。

    今回はアイキャッチだけ。

    // カラムタイトルにフック
    add_filter( 'manage_posts_columns', 'add_thumb_columns' );
    // 各カラム行にフック
    add_action( 'manage_posts_custom_column', 'add_thumb_column', 10, 2 );
    
    /**
     * 投稿一覧の行タイトルに thumb を配列キーとした dashicon を追加
     *
     * @param $columns
     *
     * @return mixed
     */
    function add_thumb_columns( $columns ) {
    	// サムネイル用のスタイル
    	echo '<style>.column-thumb{width:80px;}</style>';
    
    	// サムネイルをカラム先頭に追加するため array_reverse で挟み込んで追加
    	$columns          = array_reverse( $columns, true );
    	$columns['thumb'] = '<div class="dashicons dashicons-format-image"></div>';
    	$columns          = array_reverse( $columns, true );
    
    	return $columns;
    }
    
    /**
     * 投稿一覧の各行にサムネイル出力
     *
     * @param $column
     * @param $post_id
     */
    function add_thumb_column( $column, $post_id ) {
    	switch ( $column ) {
    		// 行のキーが thumb なら アイキャッチ を出力
    		case 'thumb':
    			// アイキャッチがある場合
    			if ( $thumb = get_the_post_thumbnail( $post_id, array( 80, 80 ) ) ) {
    				// 編集権限、ゴミ箱内かどうかの判別用変数
    				$user_can_edit = current_user_can( 'edit_post', $post_id );
    				$is_trash      = isset( $_REQUEST['status'] ) && 'trash' == $_REQUEST['status'];
    				// 編集権限があり、ゴミ箱でないなら画像をリンクつきに
    				if ( ! $is_trash || $user_can_edit ) {
    					$thumb = sprintf( '<a href="%s" title="%s">%s</a>',
    						get_edit_post_link( $post_id, true ),
    						esc_attr( sprintf( __( 'Edit &#8220;%s&#8221;', 'default' ), _draft_or_post_title() ) ),
    						$thumb );
    				}
    				// 出力
    				echo $thumb;
    			}
    			break;
    		default:
    			break;
    	}
    }

     

    とまぁテーマの functions.php に書くならこんな感じで。

    ちなみに WordPress 3.8未満だと Dashicon がないので適宜置き換えてください。

     

    できあがり

    うむ、見やすい。

    Admin_Posts_add_thumbnail_WordPress
    WordPress 管理画面の投稿一覧にアイキャッチが表示される!

     

    野良プラグイン化しました

    テーマに書くのはもうめんどうだ、という方へ。

    野良プラグイン化しました。

    公式に登録するほどの機能ではないので。(あと、ただただめんどくさい

    野良プラグインを安易に入れることは危険なので、そのへん了承して使ってくれたらいいと思います。

    投稿一覧+アイキャッチプラグイン: add-thumb2-admin-posts_v1.1.zip

    インストールして有効化するだけです。

     

    ホホまとめ

    いろいろなところへ簡単に手を加えられる WordPress、楽しいですね。

    難点は記事におこすこと。

    やったことは漏れなく書いていきたいなーなんて。

  • PhpStorm (WebStorm とかでもいいよ) の File Watcher で SCSS sourcemap を出力する

    PhpStorm (WebStorm とかでもいいよ) の File Watcher で SCSS sourcemap を出力する

    sass が 3.3 になって Source Maps に対応しましたね(以降 scss 表記。

    Source Maps は css コンパイルの際に元の scss ファイル何行目に定義されてたか、という情報が JSON 形式のファイルで出力できるってやつです。

    普段使っている IDE でもできるようにしたのでメモ(WebStorm でも共通です。

     

    PhpStorm を起動してプロジェクトを開く

    もちろん scss 3.3 を使えることが前提。

    サンプルとして scss, css だけのプロジェクトを作成して進めます。

    scss, css ディレクトリ、 style.scss を作成。

    Source Maps テストプロジェクト
    Source Maps テストプロジェクト

     

    scss 形式の File Watcher を追加

    PhpStorm は File Watcher プラグインがあり、これによって保存・更新時に自動コンパイルが走ります。

    メニューバーから File > Settings > File Watcher と進む。

    PhpStorm FileWatcher
    PhpStorm FileWatcher

     

    右上 + アイコンから scss を選択し、新しいウォッチャを作成、ひとまず OK に。

     

    このデフォルトのままだと、scss ファイルと同じ所に出力されるようになってます。

    もちろん Source Maps は出ません。

    デフォルトの scss watcher 実行後
    デフォルトの scss watcher 実行後

     

    Watcher を編集して css の出力先、 Source Maps 出力を設定

    というわけで、Watcher を編集します。

    設定の Wather 画面に戻り、さっき作った scss Watcher をコピー

     

    コピーして編集します。

    変更する項目 変更前 変更後 (色つきが変更文字列)
    Name: SCSS Copy SCSS Source Maps
    Argument: –no-cache –update $FileName$:$FileNameWithoutExtension$.css –no-cache –update –sourcemap $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css
    Output paths to refresh: $FileNameWithoutExtension$.css $FileParentDir$/css/$FileNameWithoutExtension$.css

    出力先フォルダは直書きで css としました。

    編集して OK を押下後、デフォルトとして作ったコピー元の SCSS Watcher のチェックを外す。

     

    これで SCSS Source Maps の出力準備ができました。

     

    SCSS Source Maps の出力を試す

    設定が終わったので、scss ファイルを更新してちゃんと出力されるか試します。

     

    いけてますね。

    ブラウザで確認するとこんな感じ。

     

    はかどりそうですね!

     

    設定が面倒な方へ

    今回設定した scss Source Maps の Watcher 設定をエクスポートしました。

    File Wathers 画面からインポートしてお使いください。

    File Watcher インポート
    File Watcher インポート

     

    ※ぼくの環境用なんで scss 実行ファイル (program: の欄) パスは適宜置き換えてください。

  • あまロス展が梅田ロフトで開催されるらしく。これは行くしか。

    あまロス展が梅田ロフトで開催されるらしく。これは行くしか。

    2013年上半期の NHK 朝ドラで放送され、どはまりしたあまちゃん

    そんなあまちゃんの展覧会が本日 3/7 より大阪梅田ロフトで開催されているらしく!

     

    アーティストさんの投稿で知りました

    青木俊直あおきとしなお というあまちゃん絵を描いている方の投稿でこのイベントを知り。

      ほんと可愛らしい絵を描かれますね。  

    梅田ロフトへのアクセス

    JR大阪駅・地下鉄梅田駅・阪急梅田駅などからほど近く。
     

    あまロス展の期間・参加費など

    大人は 500円。
    入場料 大人 500円(小学生以下無料)
    開場時間 10:30-21:00(最終入場30分前)
    期間 2014/3/7-4/6
      開催中に絵が増えていくとのことなんで、楽しみ。 行ってきます。

  • ユーザー属性とインタレストカテゴリに関するレポート、Google Analytics で年齢・性別・興味を取得する方法

    ユーザー属性とインタレストカテゴリに関するレポート、Google Analytics で年齢・性別・興味を取得する方法

    昨年、2013年の10月に大幅なアップデートがあった Analytics。

    ユニバーサル アナリティクスという新しいものができ、今までよりも詳細にアクセスを解析できるようになりました。

    ブログではずっと放置してたんですが、このたび導入したんで手順・方法を今さら(きっとまだやってない方がいるとみた)。

    ぼくは Google Analytics のコードをちょっと書き変えるだけでレポートを確認できるようになりました。

     

    ユニバーサル アナリティクスとは

    Google さんのヘルプページ、ユニバーサル アナリティクスについてを見ると全て説明されています。

    デメリットが見当たりません。

     

    ユニバーサル アナリティクスを導入する方法

    ユーザー属性とインタレストカテゴリに関するレポートを取得するためにはまず、ユニバーサル アナリティクスを導入しなければいけません。

    導入していないなら Google さんのヘルプページ、ユニバーサル アナリティクスを導入する(概要)を確認して導入しましょう。

    導入済みだったためスクショ、ないです。

     

    Google Analytics にアクセスしてみる

    ユニバーサル アナリティクスを導入してアクセスすると以前とは違った見た目になっているはず。

    で、左サイドメニューの ユーザー > ユーザーの分布 > サマリー をクリックしてみると、

    ユーザー属性とインタレスト カテゴリに関するレポート
    ユーザー属性とインタレスト カテゴリに関するレポート

     

    トラッキングコードの修正をしてから確認ボタンを押せ、と書かれています。

    修正しましょう。

     

    トラッキングコードの修正

    修正の手順は Google ヘルプ アナリティクス トラッキング コードを更新してディスプレイ広告に対応するの通りに。

    引用すると、(コードは見やすく整形しています)

    ユニバーサル アナリティクスをディスプレイ広告に対応させるには、次の例のように、既存のトラッキング コードのコマンド ‘create’ と ‘send’ の間に新しい行(太字)を挿入します。

    <script>
    	(function (i, s, o, g, r, a, m) {
    		i['GoogleAnalyticsObject'] = r;
    		i[r] = i[r] || function () {
    			(i[r].q = i[r].q || []).push(arguments)
    		}, i[r].l = 1 * new Date();
    		a = s.createElement(o),
    				m = s.getElementsByTagName(o)[0];
    		a.async = 1;
    		a.src = g;
    		m.parentNode.insertBefore(a, m)
    	})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
    	ga('create', 'UA-XXXXXX-XX', 'example.com');
    	ga('require', 'displayfeatures');
    	ga('send', 'pageview');
    </script>

     

    一行追加するだけでよし。

    追加してさきほどの Analyrics 画面に戻り、”トラッキング コードを確認” をクリック。

    画面が遷移して再度確認をクリック。

    トラッキング コードを確認 - Google Analytics
    トラッキング コードを確認 – Google Analytics

     

    トラッキングコードが正しく設置されていると、ユーザー属性レポートが有効になります。

    Google Analytics ユーザー属性が有効化される
    Google Analytics ユーザー属性が有効化される

     

    有効化されると、ユーザーの分布から サマリー・年齢・性別が見られるように。

     

    やったね!