このエントリーをはてなブックマークに追加

更新日： 2016年2月25日

実行時間： 0.0085

スマイリーヘルパー

　スマイリーヘルパーは「 system/helper/smiley_helper.php 」ファイルで、スマイリー画像をクリックすると テキストエリア「<textarea></textarea>」タグ内に、スマイリー文字を追記するjavascriptを出力する
関数や、スマイリー文字をスマイリー画像の「<img>」タグに変換する関数が定義されています。

スマイリー画像の準備

　スマイリー画像は自分で作成して用意することもできますが、CodeIgniterのサイトからダウンロードすることができます。

    1. smileys.zipファイルをダウンロードして画像ファイルを設置するディレクトリに配置します。
    2. smileys.zipファイルを解凍します。
    3. ファイル名が間違っている「rasberry.gif」を「raspberry.gif」にリネームします。
    $ cd htdocs/images/
    $ wget http://ellislab.com/asset/ci_download_files/smileys.zip
    $ unzip smileys.zip
    $ mv smileys/rasberry.gif smileys/raspberry.gif

CodeIgniterでダウンロードしたスマイリー画像

ｽﾏｲﾘｰ名ｽﾏｲﾘｰ文字ｽﾏｲﾘｰ画像
grin:-)
LOL:lol:
cheese:cheese:
smile:)
wink;-)
wink;)
smirk:smirk:
rolleyes:roll:
confused:-S
surprised:wow:
big surprise:bug:
tongue laugh:-P
tongue rolleye%-P
tongue wink;-P
raspberry:P
blank stare:blank:
long face:long:
ohh:ohh:
grrr:grrr:
gulp:gulp:
oh oh8-/
downer:down:
ｽﾏｲﾘｰ名ｽﾏｲﾘｰ文字ｽﾏｲﾘｰ画像
red face:red:
sick:sick:
shut eye:shut:
hmmm:-/
mad>:(
mad:mad:
angry>:-(
angry:angry:
zipper:zip:
kiss:kiss:
shock:ahhh:
cool smile:coolsmile:
cool smirk:coolsmirk:
cool grin:coolgrin:
cool hmm:coolhmm:
cool mad:coolmad:
cool cheese:coolcheese:
vampire:vampire:
snake:snake:
excaim:exclaim:
question:question:

スマイリーヘルパーのロード

　「 CI_Loader 」クラスの「 helper() 」メソッドでロードします。

    $this->load->helper('smiley');

スマイリーヘルパーの関数

smiley_js($alias = '', $field_id = '', $inline = TRUE)

　「<textarea></textarea>」タグ内にスマイリー文字を追記する Javascriptコードを出力します。

　出力された文字列は、HTMLの「<head> </head>」タグ内に出力されるようにViewテンプレートに渡します。

    • コントローラ
    // sample in case of Smarty
    $smiley_js = smiley_js();
    $this->smarty->assign('smiley_js', $smiley_js);
    // sample in case of CodeIgniter View
    $data['smiley_js'] = smiley_js();
    $this->load->view('smiley_sample_html', $data);
    • ビュー
    // sample in case of Smarty
    :
    <head>
    {if isset($smiley_js)}{$smiley_js}{/if}
    </head>
    :
    // sample in case of CodeIgniter View
    :
    <head>
    <?php if (isset($smiley_js)) { echo $smiley_js; } ?>
    </head>

　「<textarea>」タグの「id=」属性に別名を割り当てることもできます。
　別名を割り当てることで、この後説明する「get_clickable_smileys()」関数で「id=」属性の代わりに 別名を指定し、対象の「<textarea>」を特定させることができるようになります。

　別名を割り当てる場合は、第一引数に「別名」、第二引数に対象の「<textarea>」の「id=」属性値を指定します。 　また、連想配列で複数のマッピングを一度に指定することもできます。

    $smiley_js = smiley_js('hoge', 'textarea_1');
    $alias = array(
        'hoge' => 'textarea_1',
        'foo' => 'textarea_2',
        'bar' => 'textarea_3',
    );
    $smiley_js = smiley_js($alias);

　デフォルトでは、HTML内に Javascriptコードを出力することを想定して「<script>」タグが付いた形で 返されますが、第三引数に「FALSE」を指定することで、「<script>」タグが 付かない 純粋なJavascriptコードのみが返されます。
　外部 Javascriptファイルとして出力する際などで利用します。

    $this->output->set_content_type('text/javascript');
    $this->output->set_output(smiley_js(NULL, NULL, FALSE));

get_clickable_smileys($image_url, $alias = '', $smileys = NULL)

　デフォルトでは、「application/config/smiley.php」設定ファイルに定義されているスマイリー画像の
リンク文字列の配列を返します。

　スマイリー画像は「<a>」タグとなっていて、「onclick=」属性値に「smiley_js()」のJavascript関数が
セットされています。
　つまり、スマイリー画像をクリックするとJavascript関数が実行され、テキストエリアにスマイリー文字が追記されます。

　第一引数に、スマイリー画像のURIパスを指定します。
　第二引数には、対象のテキストエリアを特定する「<textarea>」タグの「id=」属性値、または、別名を指定します。 

    $this->load->library('table');
$this->load->helper('smiley');

$smiley_cols = get_clickable_smileys('/images/smileys', 'textarea_1');

$table_data = $this->table->make_columns($smiley_cols, 9);
$data['smiley_tbl'] = $this->table->generate($table_data);
$this->load->view('smiley_sample_html', $data);
    grin  LOL  cheese  smile  wink  smirk  rolleyes  confused  surprised  big surprise  tongue laugh  tongue rolleye  tongue wink  raspberry  blank stare  long face  ohh  grrr  gulp  oh oh  downer  red face  sick  shut eye  hmmm  mad  angry  zipper  kiss  shock  cool smile  cool smirk  cool grin  cool hmm  cool mad  cool cheese  vampire  snake  excaim  question  

　「application/config/smiley.php」設定ファイルに定義されているスマイリー画像全てを表示したくない場合は、 表示したいスマイリー画像のみの情報を第三引数に指定することで、特定のスマイリー画像のみ表示することができます。
　データフォーマットは「application/config/smiley.php」設定ファイルと同様に連想配列で定義します。 

    $smileys = array(
    ':-)'      => array('grin.gif',   '19', '19', 'grin'),
    ':lol:'    => array('lol.gif',    '19', '19', 'LOL'),
    ':cheese:' => array('cheese.gif', '19', '19', 'cheese')
);
$smiley_cols = get_clickable_smileys('/images/smileys', 'textarea_1', $smileys);
    grin  LOL  cheese  

parse_smileys($str = '', $image_url = '', $smileys = NULL)

　スマイリー文字をスマイリー画像の「<img>」タグに変換して返します。 

    $str = 'こんちは :-) またね ;-)';

$data['parsed_smiley'] = parse_smileys($str, '/images/smileys'));
$this->load->view('smiley_sample_html', $data);
/*
こんちは
<img src="/images/smileys/grin.gif" width="19" height="19" alt="grin" style="border:0;" />
またね
<img src="/images/smileys/wink.gif" width="19" height="19" alt="wink" style="border:0;" />
*/
    こんちは grin またね wink