サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
中東情勢
kwski.net
今回は、プロフィール情報に使用されるデータに絞ったバリデーションルールです。 バリデーションルール 以下の5つのバリデーションルールがコアに用意されています。 email メールアドレス url URL postal 郵便番号 phone 電話番号 ip IPアドレス email (メールアドレス) email(string $check, boolean $deep = false, string $regex = null) 第2引数$deepがtrueの場合、getmxrrもしくはcheckdnsrrもしくはgethostbynamelを使用してドメインの有無まで検証してくれます。第3引数$regexに正規表現を使用してドメインを限定してくれます。 public $validate = array( 'mailaddress' => array( 'rule' => array( '
ChromeでCookieの中身を確認する方法も、一般的に3通りあると思います。 「Chromeの設定画面から」「拡張機能を使用する」「クッキーデータに直接アクセスする」 Chromeの設定画面から データごとに参照と削除のみが可能です。 「設定」→最下部の「詳細設定を表示...」で、プライバシー >「コンテンツの設定」から、Cookie > 「すべてのCookieとサイトデータ」 拡張機能「Edit This Cookie」 現在開いているサイトのクッキーデータのみが参照でき、追加・変更・削除のいずれも可能です。 Edit This Cookie クッキーデータに直接アクセスする Firefox同様ChromeもクッキーデータをSQLiteの形式で保持しています。 Windowsの場合、保存場所は以下のフォルダにCookiesというファイル名で保存されています。 XP: %UserPro
メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回、キャプションをあらかじめ非表示にしておいてマウスオーバーすると表示されるような実装をしてみました。プラグインを探してみたのですがいい感じのものが見つけれなかった。(ご存知であれば、ご教授いただければと) まずはキャプションの表示のされ方 ショートコードは以下のようなフォーマットになります。 [caption id="attachment_25" align="alignnone" width="300"] <a href="画像URL"> <img src="画像URL" alt="キャプション" width="画像幅" height="画像高" class="size-medium wp-ima
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デモ スクリプト <script src="inewsticker.js" type="text/javascript"></script> 実装 <ul class="fade"> <li>ニュース1つ目</li> <li>ニュース2つ目</li> <li>ニュース3つ目</li> <li>ニュース4つ目</li> </ul> <!-- オプション --> <script type="text/javascript"> $(document).ready(function() { $('.fade').inewsticker({ speed : 3000, // テキストの切替時間 effect :
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」 「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を [続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」 「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト カウントダウン プラグイン FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipco
商用ディストリビューションであるRed Hatやそれの無償版であるCentOSで、Google Chromeはサポート対象から外されてしまったようです。 Google Says Red Hat Enterprise Linux 6 Is Obsolete 作者であるRichard K. Lloydさんのサイトでダウンロードとインストール方法が紹介されています。 # wget http://chrome.richardlloyd.org.uk/install_chrome.sh # chmod u+x install_chrome.sh # ./install_chrome.sh 導入に若干時間がかかりますが、動作しています。 Ubuntuバージョンを取得する Ubuntuのバージョンはコマンド「lsb_release」を使用して確認することができます。 /etc/lsb-releaseを参
WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、各投稿をその部分まで抜粋として表示してくれます。 今回はその「続きを読む」についてのカスタマイズについていくつか。 URLに#more~が付かないようにする 「続きを読む →」の遷移先のURLには、[#more~]とついてしまいます。それを取り除くコードです。 URLに#more~が付いた状態で一人歩きするのもキモチ悪いので除去しました。 // functions.php(子テーマ)に追加 function remove_more_jump_link( $link) { $offset = strpos( $link, '#more-'); if ($offset) { $end = strpos( $l
Firefoxでは起動時に前回終了時に開いておいたタブを復元してくれる機能が標準で備わっています。個人的にタブを開きまくるのでとても便利な機能ですが、正常に終了しなかった際などにごく稀に復元してくれないときがあります。 設定 まず、毎回起動時に「前回終了時のウィンドウとタブ」を復元するようにするには、「ツール」→「オプション」→「一般」タブ とすすみ、「Firefoxを起動するとき」を"前回終了時のウィンドウとタブを表示する"を選択して設定します。 タブの情報データ 現在開いているタブの状態はsessionstore.js、前回終了時のタブの状態はsessionstore.bakにそれぞれ保持されています。Firefox終了時に、~.jsのほうに保存されます。 保存場所 Windows XP %USERPROFILE%\Application Data\Mozilla\Firefox\Pr
CakePHP 2になっていくつか数値用バリデーションルールが追加されています。 数値用 (コア)バリデーション decimal - 十進数であること numeric - 数値であること naturalNumber - 自然数(正の整数)であること range - 数値の範囲(超え・未満)であること comparison - 大・小・一致・不一致の比較に合致すること 5つともnotEmptyとなるので、必須としない場合は'allowEmpty' => trueを追加する必要があります。 decimal 十進数であることであることを検証します。 decimal(integer $check, integer $places = null, string $regex = null) 小数点以下の桁数を限定する場合は第2引数($places)で指定します。 第3引数で正規表現を指定した場合は、
管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可能なタグへのリンクが用意されているのでそちらを参考に組み合わせみて下さい。 このサイトでは、 /%category%/%post_id%/ =>/カテゴリー(スラッグ)/投稿ID/ オプション カテゴリーアーカイブページ・タグアーカイブページはデフォルトでは以下のようになります。 [サイトURL]/category/「カテゴリーのスラッグ」 [サイトURL]/tag/「タグのスラッグ」 このオプションでは、「カテゴリーベース」・「タグベース」でそれぞれ"category"や"tag"を別の文字に置き換えることができます。 ただし、共通設定で"デフォルト"に設定している場合は、以下のようになります。 [サイトU
FirefoxでCookieの中身を確認する方法ですが、一般的に3通りあると思います。 ■ Firefoxのオプション ■ アドオンを使用する ■ クッキーデータに直接アクセスする Firefoxのオプションから 「ツール」→「オプション」の「プライバシー」タブ内の"Cookieを個別に削除"から開き、削除を行うことができます。 Cookieビューア用アドオン「Advanced Cookie Manager」 ぱっとみて、これが一番使い勝手がよさそうでした。 サイト インストールしたら、「ツール」→「Cookie manager」を開きます。 あとは、「Filter Domain」でサイト、「Filter Cookies」でクッキー名などで絞り込みを行って値を確認し、値の編集を行うことができます。 他、インポート・エクスポートもできるようです。 クッキーデータに直接アクセスする Firef
スワイプ対応の画像スライダー・ギャラリー用プラグイン 画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b 開閉できるツリー構造を表現できる「jsTree」 「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち 「jqPlot」 カスタマイズ 以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし ページ内のフォントサイズを変更してくれる「Text Resizer」
ユーザに地名入力を促す際には、Google Places Autocompleteが便利です。 簡単なサンプルを以下に スクリプト <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=en"></script> 実装 <input id="searchTextField" type="text" name="city" /> <script type="text/javascript"> function initialize() { var input = document.getElementById( 'searchTextField'); var options = { types: ['(cities)']
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 Bootstrap2版はこちら Datepicker for Bootstrap (別記事) 実装方法 ダウンロード / サンプル (v0.2.6) スクリプト <link href="bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="css/timepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-timepicker.js" type="text/javascript"> 時刻指定時
CakePHPでは、ログイン時にはpasswordを自動的にハッシュ化して認証を行ってくれますが、そのパスワードを登録する際は、明示的にハッシュ化する必要があります。 ハッシュ関数はデフォルトではSHA-1が使用されます。変更する場合は、Security::setHash($hash)を使用して(AppController.php内で)定義することができます。 ソース:/lib/Cake/Utility/Security.php // /app/Controller/AppController.php public function beforeFilter(){ Security::setHash( 'sha256'); } 各ハッシュ関数でハッシュ化した際の長さになります。(length固定なのでvarcharよりcharを指定したほうが処理コストが少なくなるでしょう。) 以下がCak
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリー内にサムネイルを設置できナビゲーションできるものなどがあります。また、最近のものは、モバイルに最適化されておりレスポンシブ対応はもちろん(タッチ)スワイプも可能なものが増えてきました。 Lightboxなどが実装できるプラグイン「Magnific Popup」 Lightboxプラグイン「Boxer」
プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず)。そこで、できるだけ余計な読み込みを減らすためプラグインごとにハックしていきたいと思います。 「Contact Form 7」 バージョン:3.8.1 「Contact Form 7」は"お問い合わせ"ページによく使用されているプラグインだと思いますが、標準で以下の3つのCSSやJSが読み込まれるはずです。 plugins/contact-form-7/includes/css/styles.css plugins/contact-form-7/includes/js/jquery.form.min.js plugins/contact-form-7/includes/js/scripts.
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」 「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン 様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ) Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際 「jqPlot」を使って円グラフを作成 Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」 「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト Wysiwygエディタ用プラグイン「CKEditor」 「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表 親要素の大きさに合わせて画像をリサイズ「imgLiquid」 「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装 カレンダー実装プラグイン「Bootstrap Calendar」 「Bootstrap Calendar」はBoot
CakePHPでは、モデルにアソシエーションを設定している場合、recursive(=>joinする階層)はデフォルトで0に設定されています。「recursiveゼロ」の意味するところとは、「1跨ぎまでのJoinを行う」ということになり、Find()関数を使用した場合、デフォルトの状態でJoinが行われてしまいます。テーブル単体でfindしたい場合などは、find()の前に$recursive = -1とすることで余計なjoin処理を省略することができます。join先のテーブルのレコード数が多い場合などは効果絶大。 例 「User」とそれに紐付く「Usercomment」モデルを用意しました。 -- usersテーブル CREATE TABLE IF NOT EXISTS `users` ( `id` INT NOT NULL AUTO_INCREMENT , `username` VAR
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいですよね~。そこで実装してみました。 スクリプト <script type="text/javascript" src="jquery.min.js"></script> <div id="div802">3.25</div> <input id="div802-edit" name="div802" style="display:none;"></input> <script type="text/javascript"> $('#div802').click(function() { $('#div802').css( 'display', 'none'); $('#div802-edit')
SQLのクエリーをデバッグするには、Debug Kitを使用すればできますが、デバッグログと一緒に出したいのでやり方を調査してみました。 別々のログやビューでみるのもいいですが、秒単位で実行される処理もどちらが先に実行されたのかなどわかりやすくなるので、いいかなと個人的に思っています。 明示的に実行SQLをデバッグする モデル操作(find, save, deleteなど)の後に以下のコードを挿入すると実行SQLを(デバッグ)ログに出力させることができます。 $this->log( $this->[Model]->getDataSource()->getLog(), LOG_DEBUG); 出力先は自由に設定して下さい。 暗黙的に実行SQLをデバッグする DataSourcesをオーバーライドさせます。 MySQLの場合 1. MysqlLog.phpを作成(名前は自由に) // \app
CakePHPでは、「beforeValidate」「afterValidate」というバリデーション処理の前後で追加の処理を実装できるコールバック関数が用意されています。 beforeVali 続きを見る
ページの画像を非同期で読み込んでくれる「Lazy Load」 「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード | 画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」 「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ 表示パターン豊富なスライダー「flexslider 2」 「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示 わずかなコー
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプト <link href="css/style.css" type="text/css" rel="stylesheet"> <script src="js/jquery.catslider.js" type="text/javascript"></script> <script src="js/modernizr.custom.63321.js" type="text/javascript"></script> 実装 ナビゲーション(nav)を用意し、あとは、その順番通りにリスト要素(<ul>~</ul>)を記述していくだけです。 <div id="mi-slider" class="mi-sli
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみました。 CSSファイルを読み込む方法 CSSを読み込むには、以下の関数を使用します。 wp_enqueue_style ★例として、子テーマフォルダ下に配置したBootstrapのCSSファイルを読み込ませる functions.php(子テーマ)に追加して下さい。 // wp-config/theme/[子テーマ名]/functions.php function my_styles() { wp_enqueue_style( 'bootstrap', get_bloginfo( 'stylesheet_directory') . '/bootstrap.min.css', array(), n
CakePHPには、翻訳をビヘイビアを使用する方法と翻訳ファイルを使用する方法の2つがあるそうです。(他にもあるのかな?) 今回は、翻訳ファイルを使用して言語の切り替えを行い、その言語設定をCookieに保存して次回訪問時もその言語で開くようにしてみようと思います。 翻訳ファイルの原本を作成する PO/MOファイルというものを使用するようです。 まず、POTファイルつくります。コマンドラインから..../app/Consoleにcd(移動)します。(以下、....はアプリケーションのディレクトリに置き換えて下さい。) /cake/to/path/Console> cake i18n Welcome to CakePHP v2.6.1 Console --------------------------------------------------------------- App : a
カレンダー実装プラグイン「Bootstrap Calendar」 「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト jqPlot - Legend(凡例) オプション jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ レスポンシブに対応したテーブルを実装できる「FooTable」 「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷 Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer
「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加・設定 特定のカテゴリーを除外 カテゴリーの順番を自由に並び替え 各カテゴリーリンクへ「nofollow」を付与 サブカテゴリーをアコーディオン表示 「カテゴリー」ウィジェットの追加・設定 管理画面の「外観」「ウィジェット」とすすみ、表示させたいエリアに対して「カテゴリー」を追加(ドラッグ&ドロップ) タイトル:ウィジェットのタイトルを設定 ドロップダウン表示:リスト形式ではなくドロップダウン形式で表示 投稿数を表示:各カテゴリーの投稿数を表示 階層を表示:親カテゴリーと子カテゴリーを階層で表示 特定のカテゴリーを除外する 子テーマのfunctions.phpに除外するカテゴリーのIDを指定します。
次のページ
このページを最初にブックマークしてみませんか?
『Think deeply, Do less, More effective』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く