タグ

ブックマーク / www.bloguchi.info (15)

  • Apache CordovaでSocket.IOを使う方法 | ぶろぐち

    簡単に言うと「リアルタイムWebアプリケーションを構築できる優れもの」です。リアルタイムWebを構築する手段としてはSocket.IO以外にもポーリングやComet、Web Socketなどがありますが様々な実装方法があり状況によって使い分ける必要があります。 Socket.IOはそれらの複雑さを排除し全てのブラウザ・デバイスでリアルタイム通信を可能とすることを目的として開発されているnode.js用サーバ側のライブラリとクライアント用Javascriptのライブラリのセットだそうです。 様々な手段の実装をラッピングしたSocket.IO APIが提供されており全てSocket.IO APIを通して実現することが可能です。 socket.ioのページでデモが見れます。 Apache Cordvaで使う サーバサイド まずはサーバサイドのコードです。一番シンプルな形で下記のようになります。

    Apache CordovaでSocket.IOを使う方法 | ぶろぐち
  • CSS3で良く使う疑似クラスについてのサンプルをご紹介します | ぶろぐち

    CSS3で良く使う疑似クラスについてのサンプルをご紹介します こんにちは!ぐちです。 ScalaJavaの例のシリーズが続いていますが、今回は最近訳あって勉強しているCSS3(HTML5)の疑似クラスについてサンプル付きでご紹介したいと思います! 疑似クラスとは CSSの疑似クラスはセレクタに付加するキーワードです。要素に対して特定の状態を指定でき、例えば:hover疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用します。 要するに特定の状態であったり、特定の条件の場合にスタイルを指定することができるということです。 で、そういった擬似クラスの中でも良く使うであろう:nth-childをご紹介したいと思います。 :nth-child この擬似クラスを始めいくつかの擬似クラスはパラメータに式を取るのですが、その式の動きがよくわからなかったというか、理解するのにすこーー

    CSS3で良く使う疑似クラスについてのサンプルをご紹介します | ぶろぐち
  • CSS3でDIVを横並びに配置する方法 | ぶろぐち

    CSS3でDIVを横並びに配置する方法 こんにちは!ぐちです。 CSSで横並びって難しい? 従来はfloatやdisplay:table-cell等を使う必要がありましたがdisplay:boxを使うと簡単に横並びの配置を実現することができます。 難しいことは考えずに(笑)下記のCSSHTMLを書いてみましょう! <style type="text/css"> .box { /* レイアウトを指定 */ display: box; display: -webkit-box; display: -moz-box; /* アイテムを左右中央寄せにする */ box-pack: center; -webkit-box-pack: center; -moz-box-pack: center; background-color:#c0c0c0; } .item { width: 50px; hei

    CSS3でDIVを横並びに配置する方法 | ぶろぐち
  • AngularJSでバリデーションを行う方法 | ぶろぐち

    AngularJSでバリデーションを行う方法 こんにちは!ぐちです。 バリデーションとは バリデーションとはプログラミングにおいてフォームなどに入力された文字列が入力規則に対して妥当に記述されているかどうかを検証する仕組みを指します。他にも様々な使われ方をしますが、ここでは前述の意味を指しています。 AngularJSでは 非常に多くのバリデーションを仕組みを簡単にかつシンプルに実装できる仕組みが用意されています。順番にご紹介します。 下準備 まずはバリデーションを使うためにform要素で囲みname属性を記述します。またHTML5のバリデーションを動作させないためにnovalidate属性も合わせて書いておきます。 <form name="myForm" novalidate> </form> バリデーションをする対象のinput要素も追加しておきます。name属性とng-model属性

    AngularJSでバリデーションを行う方法 | ぶろぐち
  • CakePHPでCSSやJavascriptを読み込む方法 | ぶろぐち

    CakePHPCSSJavascriptを読み込む方法 こんにちは!ぐちです。 うちの若手がなぜか(?)苦戦していたことがある表題の件についてさくっと簡単にご紹介します。笑 default.ctp 全ページ共通のCSSJavascriptの読み込みはレイアウトファイル(app/View/Layouts/default.ctp)に記述すると思いますが特定の画面のみで読み込ませたい場合もあると思います。そんな時は下記のように記述することで解決できます。 個別View 特定の個別ViewファイルにてHtmlHelperを使って下記のように記述します。 $this->Html->css('hoge', null, array('inline' => false)); $this->Html->script('hoge', array('inline' => false)); 以上です!!笑

    CakePHPでCSSやJavascriptを読み込む方法 | ぶろぐち
  • PHPのforeachで配列チェックを省略する方法 | ぶろぐち

    PHPにおいてforeach文でループすることはよくあると思いますがパラメータに渡したのが配列でなかった場合にはWarningが出力されてしまいます。 $obj_list = null; foreach ($obj_list as $obj) { } 上記の例ではWarningが出力されてしまいます。ここまであからさまな処理はないと思いますが意図しない値がくるときを想定すると配列かどうかのチェックを入れますよね? $obj_list = null; if(is_array($obj_list)) { foreach ($obj_list as $obj) { } } いたって一般的なコードですが無駄に行数が増えてしまうのも考えものかなと。そこで配列かどうかのチェックを省く方法が下記になります。 キャスト 配列としてキャストすることで要素がゼロの配列となりWarningが出力されることなくル

    PHPのforeachで配列チェックを省略する方法 | ぶろぐち
  • CakePHPのbeforeFilter()以降の処理を実行させないようにする | ぶろぐち

    CakePHPのbeforeFilter()以降の処理を実行させないようにする こんにちは!ぐちです。 共通処理 CakePHPAPIを作った際に全API共通でパラメータチェックを行う際に親クラスのbeforeFilter()でチェックを行いますよね。その際にパラメータエラーになったりすると来実行されるはずの後続のアクションの実行を止めて、その場でレスポンスを返したい場合があると思います。そういった場合に活用できるのがinvokeAction()アクションです。 invokeAction() falseを返却するとbeforeFilter()以降の処理を止めることができます。ここの返却値をbeforeFilter()で行うパラメータチェックによって変えることによって共通のパラメータチェックなどの処理を実装することができます。 <?php App::uses('Controller',

    CakePHPのbeforeFilter()以降の処理を実行させないようにする | ぶろぐち
  • PHPのヒアドキュメント内で連想配列を展開する方法 | ぶろぐち

    PHPでは文字列を出力する場合にechoやprintを使うことが多いと思います。シンプルな文字列であれば事足りると思いますがHTMLを出力するような場合、下記のような記述をよく見かけます。 echo '<div class="hoge">'; echo '<span class="label">'.$labelName.'</span>'; echo '</div>'; ちょっと極端な例ですがよく見かけますよね。可読性なんてあったもんではありません。泣 そこで登場するのがヒアドキュメントという仕組みです。<<<という記号の識別子(任意の文字列)を書いて、出力したい文字列を記述したあと最後に始まりと同じ識別子をセミコロン(;)と合わせて記述します。そうすることで識別子から識別子までの文字列を改行も含めてそのまま文字列として扱うことが可能です。 下記の例ではechoを使って文字列として表示して

    PHPのヒアドキュメント内で連想配列を展開する方法 | ぶろぐち
  • CakePHPのバッチ(定期起動)処理を作る方法 | ぶろぐち

    CakePHPのバッチ(定期起動)処理を作る方法 こんにちは!ぐちです。 Webシステムを作っているときに定期処理といいますかバッチ処理って必須ですよね。そんな時にCakePHPを使ったバッチといいますかシェルといいますか定期処理を行うための方法をご紹介します。 AppShell 下記は通常のControllerクラスです。 <?php App::uses('AppController', 'Controller'); class HogeController extends AppController { public function hoge() { // 〜中略〜 } } 上記に加えてAppShellクラスを継承した下記のクラスも用意します。 <?php App::uses('HogeController', 'Controller'); class HogeShell exten

    CakePHPのバッチ(定期起動)処理を作る方法 | ぶろぐち
  • ブラウザからRESTリクエストを送信するGoogle Chromeの拡張機能 | ぶろぐち

    ブラウザからRESTリクエストを送信するGoogle Chrome拡張機能 こんにちは!ぐちです。 REST API スマホアプリなどのバックエンドとしてサーバ側に配置するWeb APIがありますがこれらを自作する際の動作確認として様々な方法があります。 テスト用のクライアントアプリを作るなりGET、POSTどちらでも動作するようにパラメータの取得を工夫してブラウザから確認するなど挙げられます。ただAPIに手を入れたりクライアントアプリを作ったりしなければなりません。 めんどくさいですよね?!笑 そんな方に超便利なツールをご紹介します! Advanced REST client Google Chrome拡張機能として公開されているリクエストを投げることができるフォームを提供しているツールです。Firefoxでも似たようなものがありますがこちらのほうが若干使いやすい気がします。笑 非常

    ブラウザからRESTリクエストを送信するGoogle Chromeの拡張機能 | ぶろぐち
  • WordPressで味気ない青色のリンク文字をおしゃれなブログカードにする方法 | ぶろぐち

    WordPressで味気ない青色のリンク文字をおしゃれなブログカードにする方法 こんにちは!ぐちです。 これまでも記事内に自サイトの別記事へのリンクや外部サイトのリンクを貼り付けたものはありましたが、どれも標準のリンクでただの青文字でした。ダサいといいますか普通すぎて味気ない感じだなーと思っていました。 他の方のブログを見ているとリンクをおしゃれに装飾されている方が多数いらっしゃってサムネイル等と一緒に表示されているのを見ていいなーと思っていたのですが、ようやく当ブログにも導入することができましたのでご紹介します。 枠で囲まれてサムネイルとかタイトルとかをおしゃれに表示するリンクのことを「ブログカード」というようです。元々は海外のブロガーの間で流行っていたものをはてなブログが採用し国内で一気に流行になったそうです。今まで呼び方すらわからなくて調べようがなかったのですが、ひょんなことから呼び

    WordPressで味気ない青色のリンク文字をおしゃれなブログカードにする方法 | ぶろぐち
  • PHPでJSONを扱う簡単な方法 | ぶろぐち

    JSONってご存知ですか??Javascript Object Notationの略語でwikipediaには以下のようにあります。 軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。 上記にあるようにサーバとクライアント間でのデータのやり取りによく使われています。 下記のような形式ですね。 {"name":"hoge","age":"30"} PHPでJSONを扱うには PHPでJSON形式のデータを扱うには下記の関数を使うことでPHPのオブジェクトと相互変換することができます。 json_decode JSON形式の文字列からPHPのオブジェクトに変換します。 json_en

    PHPでJSONを扱う簡単な方法 | ぶろぐち
  • PHPでWarningを出さずに連想配列のキーの存在チェックを行う方法 | ぶろぐち

    PHPでWarningを出さずに連想配列のキーの存在チェックを行う方法 こんにちは!ぐちです。 isset() PHPで連想配列にキーがあるかどうかを調べる処理ってよく使うと思うのですがコードの書き方によってはWarningが出ることがあるので注意が必要です。よく見かけるコートが以下のようにisset()を使ったものです。 $list = array('a' => 1, 'b' => 2, 'c' => 3); if(isset($list['a'])) { echo $list['a']; } このコードだと問題なく動作しますが、以下のコードではどうでしょうか? $list = array('a' => 1, 'b' => 2, 'c' => 3); if(isset($list['d'])) { echo $list['d']; } isset()の判定にかける連想配列のキーを存在しな

    PHPでWarningを出さずに連想配列のキーの存在チェックを行う方法 | ぶろぐち
  • CakePHPで繰り返し使うレイアウトはElementsを使いましょう | ぶろぐち

    CakePHPで繰り返し使うレイアウトはElementsを使いましょう こんにちは!ぐちです。 またまたCakePHPの小技のご紹介です。 部品化 プログラミングに共通することですがコードはできるだけ部品化して使いまわせるようにしたほうがメンテナンス性も上がりますし流用もしやすくなりますよね。もちろん結合度は低くなうようにパラメータを渡すなど工夫する必要はありますが。 ビジネスロジック部分は意識してクラス化したりメソッド化したりされているとは思いますがビュー部分も同じく部品化できる部分はしたほうがいいですよね。 CakePHPには上記のようにビュー部分の固定のレイアウトを部品化して使いまわせるような仕組みがあります。もちろんパラメータとして値も渡せるので汎用性の高い部品を作ることが可能です。 以前CakePHPSQLやXMLなどを外だしにする方法で書いたようなイメージに使いですね。 ap

    CakePHPで繰り返し使うレイアウトはElementsを使いましょう | ぶろぐち
  • CakePHPのビューをSmartyに置き換える方法 | ぶろぐち

    標準のCakePHPのビューだとファイル内に<?php ?>というPHPの制御文を記述する構文が頻発して非常に見づらくなります。PHPの構文をそのまま書けるので柔軟性は高いのですがロジックとコンテンツを切り分ける線引きが曖昧になりますよね。ビュー内で何でも処理が書けちゃいますので。そこでPHPにはロジックとコンテンツを切り分けるためにテンプレートエンジンと呼ばれるフレームワークが公開されています。 PHPの有名なテンプレートエンジンにSmartyというものがあります。{}を用いてSmartyの構文をビュー(Smartyではテンプレートといいます)ファイルに記述していきます。非推奨ではありますがCakePHPの標準のようにPHP構文を書いていくことも可能ですがSmartyの構文で事足りるのでおそらく不要です。 そこで便利なフレームワークであるCakePHPと便利なテンプレートエンジンを組み合

    CakePHPのビューをSmartyに置き換える方法 | ぶろぐち
  • 1