エントリー

カテゴリー「制作」の検索結果は以下のとおりです。

Silexでセッションとデータベースとテンプレートを使うメモ

Silexの機能をいくつか使ってみたのでメモ。

主にSilexユーザーガイドを参考にしていますが、自分のやりやすいように解説と違っている箇所があります。Silex自体の導入はSilex導入メモに記載しています。

Silexでセッションを使う

セッションを使う仕組みは、標準で用意されている。

$app->register(new Silex\Provider\SessionServiceProvider(), array(
));

でセッションプロバイダーを使うことを宣言。あとは $app['session'] にアクセスすれば、セッションを扱うための命令を呼び出せる。

以下は参考コード。

<?php

require_once __DIR__ . '/silex/vendor/autoload.php';

$app = new Silex\Application();
$app['debug'] = true;

$app->register(new Silex\Provider\SessionServiceProvider(), array(
));

$app->get('/', function() use($app) {
  $app['session']->start();

  if ($app['session']->has('count')) {
    $count = $app['session']->get('count');
  } else {
    $count = 0;
  }

  $app['session']->set('count', ++$count);

  return 'count=' . $app['session']->get('count');
});

$app->run();

exit;

?>

Silexでデータベースを使う

Doctrine経由でデータベースに接続する仕組みが、標準で用意されている。ただしDoctrineそのものは同梱されていないので、自分で導入する必要がある。

まずはDoctrineからファイルをダウンロードする。解凍して作成されたファイルを silex/vendor/doctrine/ 内に配置する。

test / index.php
  |
  +-- silex / LICENSE
        |
        +-- src / ~略~
        |
        +-- vendor / autoload.php
              |
              +-- composer / ~略~
              |
              +-- doctrine / doctrine-mapping.xsd
              |       |      LICENSE
              |       |      package.xml
              |       |      UPGRADE_TO_2_0
              |       |      UPGRADE_TO_2_1
              |       |      UPGRADE_TO_2_2
              |       |      UPGRADE_TO_ALPHA3
              |       |      UPGRADE_TO_ALPHA4
              |       |
              |       +-- bin / ~略~
              |       |
              |       +-- Doctrine / ~略~
              |
              +-- pimple / ~略~
              |
              +-- symfony / ~略~

次に

$app->register(new Silex\Provider\DoctrineServiceProvider(), array(
  'db.options' => array(
    'dbname'   => 'データベース名',
    'user'     => 'データベース接続ユーザー名',
    'password' => 'データベース接続パスワード',
    'host'     => '接続先',
    'driver'   => 'ドライバ',
  ),
  'db.dbal.class_path'   => __DIR__ . '/silex/vendor/doctrine',
  'db.common.class_path' => __DIR__ . '/silex/vendor/doctrine'
));

でDoctrineプロバイダーを使うことを宣言。あとは $app['db'] にアクセスすれば、データベースを扱うための命令を呼び出せる。

以下は参考コード。

<?php

require_once __DIR__ . '/silex/vendor/autoload.php';

$app = new Silex\Application();
$app['debug'] = true;

$app->register(new Silex\Provider\DoctrineServiceProvider(), array(
  'db.options' => array(
    'dbname'   => 'test',
    'user'     => 'xxxx',
    'password' => 'yyyy',
    'host'     => 'localhost',
    'driver'   => 'pdo_mysql',
  ),
  'db.dbal.class_path'   => __DIR__ . '/silex/vendor/doctrine',
  'db.common.class_path' => __DIR__ . '/silex/vendor/doctrine'
));

$app->get('/', function() use($app) {
  $stmt = $app['db']->query('SELECT * FROM address');

  $result = '';
  while ($row = $stmt->fetch()) {
      $result .= $row['no'] . ' / ' . $row['name'] . ' / ' . $row['tel'] . '<br />';
  }

  return $result;
});

$app->run();

exit;

?>

Silexでテンプレートを使う

Twig経由でテンプレートを使用する仕組みが、標準で用意されている。ただしTwigそのものは同梱されていないので、自分で導入する必要がある。

まずはTwigからファイルをダウンロードする。解凍して作成されたファイルを silex/vendor/twig/ 内に配置する。

test / index.php
  |
  +-- silex / LICENSE
        |
        +-- src / ~略~
        |
        +-- vendor / autoload.php
              |
              +-- composer / ~略~
              |
              +-- pimple / ~略~
              |
              +-- symfony / ~略~
              |
              +-- twig / .travis.yml
                    |    AUTHORS
                    |    CHANGELOG
                    |    composer.json
                    |    LICENSE
                    |    package.xml.tpl
                    |    phpunit.xml.dist
                    |    README.markdown
                    |
                    +-- bin / ~略~
                    |
                    +-- doc / ~略~
                    |
                    +-- ext / ~略~
                    |
                    +-- lib / ~略~
                    |
                    +-- test / ~略~

次に

$app->register(new Silex\Provider\TwigServiceProvider(), array(
  'twig.path'       => __DIR__ . '/views',
  'twig.class_path' => __DIR__ . '/silex/vendor/twig/lib',
));

でTwigプロバイダーを使うことを宣言。(twig.path は、テンプレートを配置するためのディレクトリ)あとは $app['twig'] にアクセスすれば、Twigを扱うための命令を呼び出せる。

以下は参考コード。

<?php

require_once __DIR__ . '/silex/vendor/autoload.php';

$app = new Silex\Application();
$app['debug'] = true;

$app->register(new Silex\Provider\TwigServiceProvider(), array(
  'twig.path'       => __DIR__ . '/views',
  'twig.class_path' => __DIR__ . '/silex/vendor/twig/lib',
));

$app->get('/', function() use($app) {
  $variables['test1'] = 'これはテストです。';
  $variables['test2'] = array('テスト1', 'テスト2', 'テスト3');

  return $app['twig']->render('test.html', $variables);
});

$app->run();

exit;

?>

テンプレートは views ディレクトリ内に test.html を作成し、以下の内容を記述する。

<html>
<head>
<meta charset="utf-8" />
<title>title</title>
</head>
<body>
<h1>テスト</h1>
<p>{{ test1 }}</p>
<ul>
  <!--{% for test in test2 %}-->
  <li>{{ test }}</li>
  <!--{% endfor %}-->
</ul>
</body>
</html>

Silex導入メモ

Silexを試してみたので導入メモ。

Silexとは

PHP5.3以降で利用できる、ライトウェイトなフレームワーク。Symfony2のクラスを利用しているらしい。Symfony2では大げさすぎる場合に使えるみたい。

利用方法

公式サイトから silex.phar をダウンロードしてrequireするだけで使える。現在はphar形式にはなっていない。

pharとは

「PHp ARchive」の略で、複数のファイルをまとめたもの。

動かない

ロリポップサーバーで Class 'Silex\Application' not found とか表示された。どうやら、環境によってはpharファイルの利用は問題があるらしい。pharをバラせば普通のPHPファイルになるので、それを使えばいい。

pharコマンドを使える環境でroot権限で、silex.phar に対して以下を実行。(rootでないと「ライセンスエラー」とか表示された。)

$ phar extract -f silex.phar

作成されたファイルを、まるごと silex フォルダに突っ込む。そして silex.phar の読み込み処理を

//require_once __DIR__ . '/silex.phar';
require_once __DIR__ . '/silex/vendor/autoload.php';

のようにするとSilexを使える。

ディレクトリ構成

参考に、ディレクトリ構成とプログラムの内容全文。

  • test ディレクトリ内で動作させるとする
  • Silexは test/silex/ に配置するとする
  • 本番環境では test/silex/ にアクセス制限をかけたり、公開ディレクトリ外に設置するとよさそう
  • LICENSEファイルや説明書ファイルなどは、動作には不要(自分でどのファイルか判りやすいように書いているだけ)
test / index.php
  |
  +-- silex / LICENSE
        |
        +-- src / ~略~
        |
        +-- vendor / ~略~

test/index.php の内容は以下のとおり。

<?php

require_once __DIR__ . '/silex/vendor/autoload.php';

$app = new Silex\Application();
$app['debug'] = true;

$app->get('/', function() use($app) {
  return 'index';
});

$app->run();

exit;

?>

ブラウザソフトから index.php にアクセスして、index と表示されれば成功。

各機能の使用方法はSilexでセッションとデータベースとテンプレートを使うメモに記載。

jQueryでネタバレボタン作成

クリックすると文章を表示できるという、いわゆるネタバレボタンをjQueryで作成してみます。

利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編jQueryプラグインの作成メモ 後編 を参考にしてください。

以下、内容を解説していきます。

続きを読む

ギルティクラウン公式サイトの私的な技術メモ

ギルティクラウンの公式サイトを見て、

  • ローディング画面はどんな方法で表示しているんだろう?
  • CHARACTERページでのページ切り替えはどうやっているんだろう?

が気になったので調べてみたメモ。あと、普通のHTMLページっぽくないページを作るのに使えそうなものをメモ。プラグインの詳細解説や使い方は、ググると出てきます。

QueryLoader2

ページが読み込まれてから表示する、いわゆる「Now Loading」画面を作れるjQueryプラグイン。ギルティクラウンのサイトで使われているのはバージョン1だけど、そっちは最新のjQueryには対応していないみたい。

hashchange

「Ajaxでページ遷移させたいけど、ブラウザの進む・戻る機能も使えるようにしたい」ができるjQueryプラグイン。CHARACTERページみたいに、普通のページ遷移とは違った見せ方をしたい場合に。

以下は、ギルティクラウンの公式サイトとは関係なくメモ。

jScrollPane

クロスブラウザでスクロールバーのデザインを変えたい場合に。同じ機能のプラグインをいくつか試したけど、HTMLが一番綺麗だったので採用。

自作プラグイン

最近作ったjQueryプラグインから、普通のHTMLページっぽくないページを作るのに使えそうなものをメモ。

jQueryでツールチップ表示

jQueryでツールチップを表示する仕組みです。ブラウザ標準のツールチップとは違い、CSSで自由に装飾することができます。

利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編jQueryプラグインの作成メモ 後編 を参考にしてください。

以下、内容を解説していきます。

続きを読む

jQueryでタブ切り替え

タブに見出しを表示し、クリックするとその内容が表示される仕組みです。少ないスペースにたくさんの情報を格納することができます。

利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編jQueryプラグインの作成メモ 後編 を参考にしてください。

以下、内容を解説していきます。

続きを読む

jQueryでブロックの高さを揃える

CSSをブロックを並べると、それぞれの高さを揃えるのが難しいことが解ります。高さをピクセル単位で指定することはできますが、それだとブロック内の文字数が変わったときに入りきらなくなる問題があります。これは、JavaScriptで要素の高さを揃えるプラグインです。

利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編jQueryプラグインの作成メモ 後編 を参考にしてください。

以下、内容を解説していきます。

続きを読む

jQueryでスムーズなスクロール

<a href="#abc">abc</a> のように a タグを書くと、ページ内で移動するリンクを設置できます。このようなリンクをクリックした際、アニメーションでページ内を移動できるようにする方法です。サンプルを触ってみるのが解りやすいと思います。

利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編jQueryプラグインの作成メモ 後編 を参考にしてください。

以下、内容を解説していきます。

続きを読む

jQueryでCookieを扱う

JavaScriptの標準命令のみでCookieを扱うのは若干面倒ですが、jquery.cookie.js を利用すると簡単に扱うことができます。

jquery.cookie.jsGitHub からダウンロードすることができます。

続きを読む

jQueryでスライドショーを作成

一時期よくFlashで作成されたスライドショーですが、今はJavaScriptのみで作成されることが多いです。サイトのトップページで、一定時間ごとにメイン画像を切り替えたりすることができます。

利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編jQueryプラグインの作成メモ 後編 を参考にしてください。

以下、内容を解説していきます。

続きを読む

ページ移動

ユーティリティ

カテゴリー

検索

エントリー検索フォーム
キーワード

過去ログ

過去ログ表示フォーム
キーワード

Feed