Author's Posts

ついに今日から25日まで続くAdvent Calenderが始まりました。 CakePHP Advent Calender2012の1日目を担当させていただく、たがみ(@DAI199)です。

Cakeを使い始めて半年程度の新米ですが、僕の知識をみなさんに共有するために今回の記事を書きたいと思います。

CakePHPアドベントカレンダー2012本家 http://www.adventar.org/calendars/40 Twitterハッシュタグ #cakeadvent2012

普段はFacebookと連携したアプリを量産しているため、今回の記事では、CakePHPとFacebookを連携し、ちょっとしたアプリを作ってみたいと思います。 デモアプリはこちら

>>> 女の子の画像一覧を見てみる

Facebookログインの実装

それでは早速Facebookログインを実装していきましょう。 以下のURLからFacebookSDKをダウンロードします。 >>> https://github.com/facebook/facebook-php-sdk

それをインストールしたCakePHPのapp/Vendorフォルダに入れます。ここではフォルダ名は「facebook」へ変更しました。

次に「AppController.php」に以下のコードを書きます。ここでやっていることは、Facebookに接続することと、Facebookでログイン出来たことを確認するためにSessionに書き込むことです。

<?php
App::uses('Controller', 'Controller');
class AppController extends Controller {
    public $facebook;
    public $helper = array('Html', 'Form', 'Session');

    function beforeFilter(){
        App::import('Vendor', 'facebook/src/facebook');
        $this->facebook = new Facebook( array(
                        'appId' => 'APPID',
                        'secret' => 'APPSECRET',
                        'cookie' => true 
                        ));

    }

    // Facebookで接続するときにOAuthを通す
    public function authFacebook() {
        $login_url = $this->facebook->getLoginUrl(array('scope' => 'email,publish_stream,user_birthday,user_education_history,user_likes'));
        $this->redirect($login_url);
    }

    public function connectFb(){
        $fb = $this->facebook->getUser();
        if(empty($fb)){
            $this->authFacebook();
        }
        $this->Session->write('Facebook.id', $fb);
    }
}

上記のコードのAPPID,APPSECRETの部分はFacebookアプリを作成していれてください。 Facebookアプリを作成するためには以下のURLから作成します。 >>> https://developers.facebook.com/

これでFacebookログインが実装出来ました。

Graph APIを叩く

初期画面でFacebookログインボタンを表示して、クリックするとdisplayのほうへリダイレクトされます。 以下コードになります。

【Controller】 FacebookController.php

<?php
class FacebookController extends AppController {
    public function index(){
        if($this->request->is('post')){
            $this->redirect(array('action'=>'display'));
        }
    }

    public function display(){
        // Facebookへ接続
        $this->connectFb();
        $fb = $this->facebook->getUser();

        // Friend List を取得
        try {
            $me = $this->facebook->api('/me');
            $friend_list = $this->facebook->api("{$fb}/friends?fields=gender");
        } catch (FacebookApiException $e){
            error_log($e);
        }
        $this->set(compact('fb'));
        $this->set(compact('me'));
        $this->set(compact('friend_list'));
    }
}

Viewのほうはこんな感じに書いてみました。

【View】 index.ctp

<form action="<?php echo $this->Html->url(array('action'=>'index'));?>" method="post">
    <button>Facebookログイン</button>
</form>

display.ctp

<h1>自分の顔</h1>
<img src="https://graph.facebook.com/<?php echo $fb;?>/picture?width=150" alt="" />

<h2>異性の顔((´^ω^))</h2>
<?php for($i=0; $i < count($friend_list['data']); $i++):?>
    <?php if($me['gender'] != $friend_list['data'][$i]['gender']):?>
        <a href="https://www.facebook.com/<?php echo $friend_list['data'][$i]['id'];?>">
            <img src="https://graph.facebook.com/<?php echo $friend_list['data'][$i]['id'];?>/picture?width=100&height=100" alt="" />
        </a>
    <?php endif;?>
<?php endfor;?>

以上のコードによりGraphAPIを叩くことが出来ました。 GraphAPIについては、Facebookの公式ドキュメントを読むとよいです。

女の子一覧を見てうはうは

さて、それではログインしてみましょう。 自分の友達の女の子でもうはうはです。 あ、もちろん女性の方は男性が表示されます。 女性の方が女性を見たい場合は、Viewの部分をちょちょっといじると出来ますよ。

デモはこちら >>> 女の子一覧を見てうはうは

最後に

すごい簡単なアプリですが、Facebookを使ったアプリを作ったことがない人にとっては新鮮なのではないでしょうか。 これをもう少し改良すれば異性を解析するアプリを作ったり本格的なアプリも出来そうですね。

初めてのAdventCalenderで緊張していますが、わかりにくいこと、間違っているとこ、こうしたほうがいいよ!ってとこがあればぜひコメントを残してくださるとありがたいです。

CakePHP AdventCalender2012 2日目の担当は、@fukayatsuさんです。よろしくお願いします!!

Read more

ずれる。

Web制作をしていて本当に困るのが、OSやブラウザによって表示が崩れていたりずれていたりすること。 こうなったときによく行うのがCSSハックです。僕のブログでも一度取り上げました。

>>> 困ったときに役に立つ! CSSハックまとめ

ただこの方法だとブラウザ毎の差異は吸収出来るのですが、OS間の差異が吸収出来ません。 ほとんどずれることはないのですがたまにずれるのです。。。

こういうときに役に立つJavaScriptプラグインをご紹介します。 (JavaScriptなのでJavaScriptをoffにされるともちろん動きません。ただそういう人は既に一般的ではないでしょう。)

今回紹介するJavaScriptプラグイン

今回紹介するプラグインは、CSS Browser Selectorというものです。

>>> CSS Browser Selector

ダウンロードは以上のURLから行なってください。

使い方

使い方はとても簡単です。 このJavaScriptプラグインをHTMLに読み込んでください。 下記のコードを貼り付ければおしまいです。もちろんsrcの部分は適宜変えてください。

<script type="text/javascript" src="js/css_browser_selector.js"></script>

これで読み込みが完了しました。

例えばie全てのバージョンにおいて表示が崩れているとしましょう。 そのとき、以下のように書くことが出来ます。

.ie sample {
    margin-top: 10px;
}

また、WindowsのChromeで崩れている場合は、

.win.chrome sample {
    margin-top: 10px;
}

のように書けます。直感的でわかりやすいクラスが自動的に要素に付与されます。 またそれ以外にも多くのクラスが用意されています。 対応しているOSやブラウザは以下になります。 (種類 ・・・ 指定の仕方)のように書いています。

▶ OS
◯ Windows・・・ 「.win」
◯ Mac ・・・ 「.mac」
◯ Linux ・・・ 「.linux」

▶ブラウザ
◯ IE ・・・ 「.ie」
◯ IE6 ・・・ 「.ie6」
◯ IE7 ・・・ 「.ie7」
◯ IE8 ・・・ 「.ie8」
◯ IE9 ・・・ 「.ie9」
◯ Chrome ・・・ 「.chrome」
◯ Firefox ・・・ 「.firefox」
◯ Opera ・・・ 「.opera」
◯ Iron ・・・ 「.iron」

▶レンダリングエンジン
◯ Webkit ・・・ 「.webkit」
◯ Mozilla ・・・ 「.gecko」

▶デバイス
◯ iPhone ・・・ 「.iphone」
◯ iPad ・・・ 「.ipad」
◯ iPod ・・・ 「.ipod」

最後に

これで既存の主要なものに対してはほとんどカバー出来ます! 何度これに助けられたことやら。。作者さんありがとうございます!

もしOSやブラウザ間で差異が出てしまった場合は試してみる価値ありです!

Read more

みなさんはブラウザは何を使っていますか? 僕はMacでもWindowsでもChromeを使っています。(iPhoneはsafariですが。) このブログを見てくださるみなさんは約50%の人がChrome、約20%の人がFirefox、約10%の人がIEを使ってみていただいてるようです。(GoogleAnalytics調べ)

Chromeは早いし開発者フレンドリーでもあるので僕のお気に入りのブラウザです。 デフォルトで様々なショートカットキーがあるのでそれだけでも作業効率がぐぐーんとあがります。

またChromeのいいところといえば、拡張機能があることですよね!

今回は便利なChromeをもっと便利に、快適に、早く使えるようになる「Keyconfig」というショートカットキーを拡張するChrome拡張機能の紹介です。

そもそもChromeのショートカットキーを知らないから復習しよう!

Chromeにはショートカットキーが割り当てられているのを知っているでしょうか? もしまだショートカットキーを知らないのであればこの機会に知っておきましょう!

今回紹介するショートカットキーは僕が普段使っていて便利なショートカットキーばかりです。ぜひ覚えましょう!

● Ctr+t ・・・ 新しいタブを開く
● Ctr+l ・・・ URLバーに移動する
● Ctr+w ・・・ 現在のタブを消す
● Ctr+n ・・・ 別ウインドウで新しいタブを開く
● Ctr+f ・・・ ページ内検索をする
● Space ・・・ 画面下にスクロール
● Space+Shift 画面上にスクロール

※Macの人はCtr=Commandだと思えばいいです!

以上が僕がよく使っているショートカットキーです。 覚えておくと便利なものばかりなので覚えておきましょう!

その他のショートカットキーは以下のURLを参考にしてみてください。

Windowsの方はこちら >>> Chrome ショートカットキー

Macの方はこちら >>> Chrome ショートカットキー

“Keyconfig”を導入することでどう変わるの?

それではもう既に相当便利なChromeですが、なぜ”Keyconfig”を導入する必要があるのでしょうか。

まず僕がChromeを使っていて思うのはタブ間の移動のショートカットキーが少し使いづらいということです。 タブ間の移動はたくさん使うものなのですが、押しづらい場所にあります。(次のタブ:Ctr+tab、前のタブ:Ctr+shift+tab) 片手で押そうと思えば押せるのですがもっと自由にカスタマイズしたい!

その他にも一応ショートカットキーはあるけど押しづらい!別のキーに割り当てたい!

その要望に答えてくれるのが“Keyconfig”です。

実際に使ってみよう!

それでは実際に使ってみましょう! 以下からダウンロードしてインストールしましょう!

>>> “Keyconfig”

インストールが終了したらオプション画面を開きます。 スパムのアイコン→ツール→拡張機能→オプション から設定することが出来ます。

上記の画面から色々設定することが出来ます。

僕の場合何をしたかというと、
○ 「左のタブを選択」の割り当てキーを「o」
○ 「右のタブを選択」の割り当てキーを「p」
にしました。
これによりタブ間を移動してSpaceやSpace+Shiftを使いこなすことにより片手でWebブラウジングが可能になりました!

その他の設定もたくさんすることが出来ます。 設定することが出来る全ての項目は以下の画像から見ることが出来ます。

※クリックすることで拡大することが出来ます

最後に

いかがでしたでしょうか。 今更のネタながらやはり超ベンリな拡張機能です。 もしまだ導入していない人がいたらすぐにインストールしましょう。 作業効率が2倍にも3倍にもなるはずです。

※注意点 もしKeyconfigに割り当てられているキーの原因でうまく動かない(例えばGoogle Readerの「j」「k」キーを使いたいけどKeyconfigでは別の役割が割り当てられているなど)ときはその割当てられているキーを別のキーに割り当ててしまいましょう。

Read more

11月も中旬に入ってきました。年末に向けてやり残しのないようにしましょう。

毎週Facebookの変更点やニュース、コラムをまとめて配信します。 今週は9個の記事を紹介! 記事は上から時系列順になっています。今週のFacebookを振り返ってみましょう!

パスワードなしで他人のFacebookアカウントにアクセスできる問題が発覚

Facebook、新規アカウント作成時のプライバシー説明を強化

大企業のFacebookページの投稿にアクションするファンはたった6%

Facebook、米大統領選投票日に向けた機能を準備

Facebook、「iOS」版アプリをアップデート–メッセージングと写真機能を改良

Facebook、ハリケーンで中止した「Gifts」関連イベントを2週間遅れで開催へ

日本のFacebookユーザー数の伸び率が鈍化

Facebook、米大統領選関連の書き込みが過去最高を記録

なぜフェイスブックが、無料Wi-Fiアクセスを提供するのか

Read more

FacebookのOffline_accessが廃止されてから、アクセストークンは最大2ヶ月までしか使えないようになりました。 色々調べた結果、アクセストークンのアクセス期間を最大で2ヶ月までのばす方法を見つけました。 そこでアクセストークンのまとめとして、PHPで今までのアクセストークンを自動で60日間に延長させるコードを書いてみます。

ただこのスクリプトは自分で発行したアクセストークンを使用しているため、他の人のアクセストークンの場合うまくいかない可能性があります。

ご参考程度にお願いします。

それでははじめましょう

アクセストークンの取得

Facebookのアクセストークンには、ユーザーに紐付けられたアクセストークンと、Facebookのアプリに紐付けられたアクセストークンがあります。 Facebookのアプリを1つでも作ったことがある人であれば以下のURLからアプリのアクセストークン、自分のアクセストークンを確認することが出来ます。

>> Access Token Tool

どれでもよいので1つ自分のアカウントに紐付けられたアクセストークンを取得してみましょう。 そして右にある「Debug」というボタンを押してみてください。

Debugger Toolを使えばアクセストークンがいつまで有効かを確認することが出来ます。 確認してみましょう。

「in about an hour」と書いてある通り、あと大体1時間くらいしかこのアクセストークンは有効ではありません。 これを60日間、つまり2ヶ月間有効にしてみようと思います。

60日間に延長するためには?

アクセストークンを延長するためには以下のコードを使うことで60日間に延長することが出来ます。 APP_ID,APP_SECRET,ACCESS_TOKENの部分はそれぞれのアプリに合わせてください。

https://graph.facebook.com/oauth/access_token?client_id=APP_ID&client_secret=APP_SECRET&grant_type=fb_exchange_token&fb_exchange_token=ACCESS_TOKEN

このURLを使用すればアクセストークンを60日間まで延長することが出来ます。 それでは早速ですがコードを見てみましょう。

完成コード

それでは早速ですがコードを書いてみます。 もちろん僕が書くコードはPHPですw

<?php
// それぞれの環境に合わせる
define('APP_ID', アプリID);
define('APP_SECRET', アプリシークレット);

//事前に取得しておいたアクセストークン
$accessToken = "取得したアクセストークン";

$accessUrl = "https://graph.facebook.com/oauth/access_token?client_id=".APP_ID."&client_secret=".APP_SECRET."&grant_type=fb_exchange_token&fb_exchange_token={$accessToken}";
$validTokenData = file_get_contents($accessUrl);
$validToken = preg_replace('/(access_token=)(.*)(&expires=.*)/i', '$2', $validTokenData);

print_r($validToken);

本当に簡単なコードですが、これで出力されたアクセストークンをDebugger Toolで確認してみると60日間に延長されています。

上記の画像の赤枠を確認してみると「in about 2 months」と書いてあります。 つまりアクセストークンを60日間に延長することが出来ました!

最後に

いかがでしたでしょうか。 この方法で僕は1つのアクセストークンを使いまわしています。 ただこの方法でやり始めてまだ10日間くらいしかたっていないので60日たったあと、どうなるかはちょっとわかりませんw もしうまくいかない場合はこの記事をアップデートしようと思います。 もっといい方法があるよ!っていう人は @DAI199 までか以下のコメント欄に書き込んでいただけると泣いて喜びます(´;ω;`)

この記事を読んでいるあなたにおすすめ!

僕がFacebookアプリを最初に作るときに参考にした本。始めは何か書籍で始めるのがよいのかもしれません。

10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)
多田 智史 岩崎 雅也
翔泳社
売り上げランキング: 134,532
Read more

先日2012年10月23日にHTML5とか勉強会に参加してきました! 今回の勉強会は、先日行われたHTML5カンファレンス2012の内容をもう一度(reloaded)再現しよう!ということで、人気の高かった講演会を少し短縮してもう一度行おう!という主旨で行われました。

僕自身HTML5カンファレンス2012は知っていたのですが、予定の都合上行けず、とてもよい機会でした。

HTML5カンファレンス2012についてはこちら >> HTML5 Conference 2012

第32回HTML5とか勉強会のページはこちら >> 第32回HTML5とか勉強会

今回の勉強会のアジェンダは以下になります。

「更に進化する CSS の表現力と新しい Web ツール」
轟 啓介 – アドビシステムズ株式会社

「パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた」
白石 俊平 – 株式会社シーエー・モバイル

「jQuery Mobileカスタマイズ自由自在 ver1.2」
吉川 徹 – 株式会社シーエー・モバイル

それぞれの発表資料は以下になります。

「更に進化する CSS の表現力と新しい Web ツール」
轟 啓介 – アドビシステムズ株式会社

>> http://www.slideshare.net/keisuke322/css-web-reloaded

「パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた」
白石 俊平 – 株式会社シーエー・モバイル

>> http://www.slideshare.net/shumpei/j-query-mobile-14227660

「jQuery Mobileカスタマイズ自由自在 ver1.2」
吉川 徹 – 株式会社シーエー・モバイル

>> http://www.slideshare.net/yoshikawa_t/jquery-mobile-14844564

感想

今回初めてHTML5とか勉強会に参加させていただいたのですが、とても刺激的で面白い勉強会でした。 早速AdobeのAdobe Edge Animate 10とAdobe Edge Codeをダウンロードさせていただいてこれからちょっと使ってみようかと思っているところですw

Adobe製品のダウンロードは以下から行うことが出来ます。

>> http://html.adobe.com/jp/

Edge Codeの拡張はこちらから

>> https://github.com/adobe/brackets/wiki

パララックスなサイト、今流行っているのでとても勉強になりました。 白石さんチームがパララックスなサイトを作成したときに作られたプラグインが便利そう。 こちら >> ScrollTween.js

定形タスクを自動化するgrunt.jsが便利そう。いつか導入する。

jQueryMobileはむか〜し(jQueryMobileがまだv1にも満たないとき)に使ったことがあったのですが、使いづらい印象がすごかったです。 ただ今回のセミナーで説明された部分を意識すると結構使いやすくなるんじゃないかなぁと。 慣れてしまえば普通に作るよりも圧倒的に早くなりそうなので。 jQueryMobileを使って独自フレームワークを作る勢いでカスタマイズするところに面白さを感じましたw

最後に

とても参考になる勉強会でした。 やはり勉強会のメリットは開発者さんの開発環境などを学ぶことが出来るところですね。 自分はFacebookアプリをよく作成するので何か手伝えることがあれば手伝ってみたいなぁと思いました。

Read more

前回このブログでもお伝えしたzencodingですが、そのzencodingが新しく名前を変えて「Emmet」というプラグインになるそうです。

まだ正式にリリースしているわけではありませんが、既に使うことが可能なので先駆けでちょっと試してみましょう!

ちなみに既にzencodingは使ったことがある前提でお話するのでもし使ったことがなければ下記の記事を参考にしてみてください。

>> 知らないなら損をしている!HTMLコーディングスピード3倍に!? zencoding 導入方法まとめ

それでは始めましょう。

EmmetをAptanaにインストール

それでは早速ですが、Aptanaにインストールしてみましょう。 もちろんEclipseでも同様の手順を踏むことでインストールすることが出来ます。

メニューの「Help」→「Install New Software…」をクリックすると以下の画面が出てくるので、「 http://emmet.io/eclipse/updates/ 」と入力する。 以下の画面のようにチェックを入れたら「Next」をクリック

「Next」→「Finish」をクリックでインストール開始。インストール出来たらAptanaを再起動しましょう。

これでインストール完了しました! メニューに「Emmet」が追加されていることだと思います。

新しい機能を試してみる

それでは早速新しい機能を試してみましょう!

例えば以下のようなHTMLを打ちたいとします。

<div id="wrapper">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="start"></div>
</div>

ZenCoding:

div#wrapper+(ul>(li*4)+div.start)

Emmet:

div#wrapper>ul>li*4^div.start

「^」を使うことでいわゆる階層が1つ上がります。これを用いることでスピードを落とすことなく記入することが出来ますね。

ベンダープレフィックス系のやつを一気に書く

border-radius系のプレフィックスを書くの、面倒ですよね。

そういうときは

-bdrs10

と打って展開すると

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

グラデーションなんかも次のような感じです。

lg(top,#fff,#000)

展開すると

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#000));
background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

超早い!

最後に

新しい名前になってパワーアップしたEmmet。 今日から僕もEmmetに乗り換えました。やはりすらすらと書ける「^」の書き方はすごいいいですね。 早速たくさん使っています。 LESSやSassなど色々ありますがやはりEmmetは最速かもしれません。 これからも動向を追っていきたいです。

参考

Emmet – github

Read more

僕が最初にプログラミングを始めたころ、最初に手にとった本の中でPEARが使われていました。 ただ、本当に学び始めたころってパスを通すってのもわけがわからないしPEARで何が便利になるのかわかりませんでした。 また、その影響もあってか、PEARは難しいもの、として今の今まで避けてきました。

しかし、さすがにそろそろPHPUnit使ってテストコード書いていかないと最近のプログラマーではないよな、と思い、今回はさくらVPSにPEARを導入し、PHPUnitを動かしてみるところまで行なってみます。

それでは始めましょう。

PEARをインストールする

PEARはすごい簡単にインストールすることが出来ます。

yumが使える環境では以下のコマンドで一発です。

$ yum -y install php-pear

yumが使えない環境の場合は、以下の記事を参考にしてみてください。

>>> PEAR パッケージマネージャの取得とインストール

PHPUnitをPEAR経由でインストールする

PEARをインストールすることが出来たら、今度はPHPUnitをインストールしましょう。 以下の2つのコマンドを打ち込むだけでインストール出来ます。

$ pear config-set auto_discover 1
$ pear install pear.phpunit.de/PHPUnit

インストールされているか確認しましょう。

$ pear list
Installed packages, channel pear.php.net:
=========================================
Package          Version State
PEAR             1.9.4   stable
PHPUnit          1.3.2   stable

インストールすることが出来ました。

PHPのinclude_pathを通す

僕はここで2時間つまりました。

ここで何がしたいかというと、PHPファイルの中でrequire_onceしたときにPEARでインストールしたパッケージを読み込めるようにするということです。 そのためにはまずPEARでインストールしたファイルがどこにあるのか確認しましょう。

$ pear config-show
Configuration (channel pear.php.net):
=====================================
...
PEAR directory                 php_dir          /usr/share/pear
...

色々設定が出てきますが、「PEAR directory」という部分を探してください。 そこに書いてある部分にパスを通していきます。 僕の場合だと、「/usr/share/pear」にパスを通すべきだということがわかりました。

次に、php.iniの設定を変更します。 php.ini内に include_path という部分があるので、そこに上で確認したパスを追加してあげます。

$ vim /etc/php.ini
....
include_path = ".:/usr/share/pear"
....

追加して保存したらapacheを再起動してPHPを再読み込みしましょう。 以下を実行して、動けばOKです。

$ phpunit
PHPUnit 3.7.7 by Sebastian Bergmann.

Usage: phpunit [switches] UnitTest [UnitTest.php]
       phpunit [switches] 

.....

これでPHPUnitを使用する準備を整えることが出来ました!!

終わりに

最初はPEARがどのディレクトリに入っているのかを探すのにとても苦労しました。 また、include_pathを変更する!と気づいてから更に1時間くらい悩みました。 これは、include_pathの書き方をコロン(:)ではなくセミコロン(;)にしていたので動きませんでした。 この区切り文字は環境によって変わるらしいのでもし動かない場合は何個か試してみるとよいかもしれません。

しかしPEAR、便利ですね。昔のPEARは難しいと思っていた僕から相当成長したのだなぁと感じます。

Read more

今日10月11日でブログを毎日更新し続けて3ヶ月がたちました。

7月11日にこのブログを立ちあげました。 なぜ立ち上げたかというと、今はソーシャルメディアの時代です。 このソーシャルメディアの時代の中、ブログは最大のちからを発揮しています。

インバウンドマーケティングという言葉があるように、ソーシャルメディアをフックとしてブログにコンテンツを集約させていくマーケティング手法があります。 僕はこのインバウンドマーケティングをかなり身近で見てきました。

多くのインフルエンサー(ソーシャルメディア上で影響力の高い人)の人と話す中で、自分もソーシャルメディアの時代にしっかり発信して自分だけのメディアを持ちたい!と思ったのがこのブログを立ち上げたきっかけでした。

思えば僕自身大学に入ってソーシャルメディアを使い始め、暇さえあればTwitterを触り、暇さえあればFacebookをいじっているような、完全にソーシャルメディアにはまっていた人間でした。

ただ、その中で自分というメディアを持つことはあまり意識しておらず、発信することは心がけていたものの、ブログというものに手をつけていませんでした。

しかしやはり世の中はソーシャルメディアの時代なのです。 僕の周りで多くのインフルエンサーがいて、その人たちが発信すれば何百人、何千人の人たちに影響をもたらすことが出来る。 そんなインフルエンサーに対する憧れが強くなっていきました。

そんな中、思い立って1日で作ってしまったのがこのブログなのでした。

インフルエンサーではない僕がどうすれば多くの人に影響を与えることが出来るのか。 それを考えた結果、「毎日ブログを書き続けて発信すること」が目標になりました。

凡人であるからこそ、多くのコンテンツを配信し、出来るだけ皆の前に出す。 これがあのときの僕の答えでした。

その結果、つい数日前からなのですが、Googleからの流入が毎日100を超えるようになりました。

Googleからの流入数が100を超える

これは僕が毎日毎日記事を書き続け、今日に至るまでに96のコンテンツを作ったある種の結果だと思います。 またPVも最近は200PVくらい入っており、それが安定して継続しています。

7月11日の僕が下した決断は間違っていなかったのだと思います。 毎日ブログを書き続けたからこそ、普通な僕でも毎日100人以上に僕の記事を読んでもらえているのだと思います。

なんかこのブログが終わってしまいそうな書き方をしていますが、これからが本当の勝負だという気持ちでこれからも毎日書き続けていきたいと思います。

そして7月にたてた小さい目標が「1ヶ月で3000PV、つまり1日100PV」を今では普通に達成してしまっているため、次は「1ヶ月で3万PV、つまり1日3000PV」を目標に、これからもみなさんの小さな力になれるような記事を書いていきたいと思います。

それではこれからも tagamidaiki.com(たがみだいき) を何卒よろしくお願いします。

Read more

みなさんはCSSの拡張メタ言語であるLESSを知っていますか? 拡張メタ言語というのは、普通の言語とは違って、ある言語をより簡単に書くために作られた言語です。 例えば最近だと、CoffeeScriptとかTypeScriptとかが話題になっていますね。 これらは全てJavaScriptの拡張メタ言語であり、CoffeeScriptTypeScriptで書いたファイルをコンパイルするとJavaScriptを生成することが出来ます。

今回入門してみたLESSはCSSの拡張メタ言語です。つまりLESSで書いたファイルをコンパイルすると、CSSが生成されるわけですね。

それでは早速入門してみましょう!!

LESSのメリット・デメリット

▶メリット ・導入が簡単 実際僕も軽く書いてみましたがほとんどLESSを意識することがないです。 CSSを書いていて、変数があればいいなぁとかネスト出来ればいいなぁと思っていたのが解消されているからかもしれません。 とにかく導入が簡単なのがメリットです。

・コードが簡潔に理解しやすくなる 変数や関数のようなMixinという仕組みを使うことですっきり書くことが出来ます。 同じコードが重複する、ということも少なくなるので理解しやすくなります

▶デメリット ・コンパイルする必要がある LESSで書かれたものは一度コンパイルする必要があります。 LESSのコンパイルはJavaScriptで行うことが出来るので比較的簡単に導入することが出来ますが、やはりクライアントサイドでコンパイルしてしまうと、パフォーマンスが落ちるなどのデメリットがあるので普通はコンパイルしたものをサーバーに置くのが普通でしょう。

LESSを動かすには?

LESSを動かすには3つの方法があります。

  1. サーバー側(Node.js)でコンパイルしたCSSを読み込む
  2. コンパイルツールやウェブサービスで変換してCSSとして読み込む
  3. JavaScriptを読み込んでクライアントサイドでCSSに変換する

今回は簡単に動かすために3のless.jsをHTMLに埋め込んで動かしてみます。 以下のコードをHTMLに埋め込みましょう。



これでstyle.lessに書いたLESSが動くようになりました。 次の章で実際に書いていきましょう。

LESSを書いてみよう

LESSでは変数、ネスト(入れ子構造)、Mixin(関数のようなもの)を使うことが出来ます。 CSSが書ければほとんど覚えることがないのでビビる必要はありません。 1つずつ見て行きましょう。

変数が使える

LESS:

@color: #eee;

.contain {
    color: @color;
}
#comment {
    background-color: @color;
}

CSS:

.contain {
    color: #eee;
}
#comment {
    background-color: #eee;
}

変数は「@〜〜」で表すことが出来ます。 CSSを書いていると何回も同じ色のコードを書くことがあります。 これだと変更をかけるときにいくつもの修正がはいることになります。 かといって一括置換も怖いですよね。 変数が入るだけでもLESSを使う価値は出そうです。

Mixin(関数のようなもの)が使える

LESS:

.rounded-corners(@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

.contain {
    .rounded-corners;
}
#comment {
    .rounded-corners(10px);
}

CSS:

.contain {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#comment {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

共通化しているコードやプレフィックスがつくようなコードをこのような形でまとめておくと何回も同じコードを書くことがなくなり便利です。 また例にあるように変数で定義してあげればpxだけ違うようなものにも対応出来るのでとても便利です。

ネスト(入れ子構造)で書くことが出来る

LESS:

.contain {
    border: solid 2px #eee;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.7);

    .inner {
        margin: 0 auto;
        padding: 5px;
    }
    .logo {
        float: left;
        height: 55px;
    }
}

CSS:

.contain {
    border: solid 2px #eee;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
.contain .inner {
    margin: 0 auto;
    padding: 5px;
}
.contain .logo {
    float: left;
    height: 55px;
}

上記の例のようにネスト(入れ子構造)にすることが出来ます。 こうすることによって直感的にわかりやすくなりますよね。 これで無駄なクラスを定義することが減りそうです。

計算式も書ける

LESS:

@color: #111;
@pad: 10px;

.contain {
    padding: @pad + 20;
}
header {
    color: @color * 6;
}

CSS:

.contain {
    padding: 30px;
}
header {
    color: #666;
}

簡単な計算式を書くことが出来ます。 幅の調整や余白サイズなどをこれでうまく管理することが出来そうです。 また、こういう風に計算式で書くことによって保守性も高まりそうですね。

終わりに

導入ハードルの高さ、学習コストの観点から考えて、これだけ便利なものがすぐ使えるというのはとても魅力的だと思います。 またより高機能なSCSS(Sass)などを使うほどでもないけど。。。というときに便利ですね。 チーム内で導入の検討を考えてみてはいかがでしょうか。

参考資料

Read more