AngularJSをこれからはじめてみようかな？という人のための記事まとめ | バシャログ。
暖房器具のチョイスを迷いまくっているminamiです。 Google製のJavaScript MVC（MVVM）フレームワーク、AngularJS 1.2 がリリースされました。最近にわかに盛り上がってきている（気がする）ので、ここ最近自分で読んで参考になった導入記事やチュートリアル関係をまとめてみました。 導入記事 JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも AngularJS 1.2の機能、主なアップデート内容について 新・三大JavaScriptフレームワークの実践(Backbone.js Knockout.js Angular.js) Backbone.js、Knockout.jsとも比較。この3つのフレームワークはどの局面でどれを使うか迷っている人も多いと思うので参考にな
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
そろそろ確認！Google Map API V3 への移行は済んでますか？ | バシャログ。
寒い！最近の状況を説明するにはひと言で十分。 寒い！！kimoto です。 Google Map を自分のサイトに埋め込めることができる Google Maps API。 現在の最新バージョンは v3 なのですが、一つ前の v2 のサポートが今年の5月に切れます。 （v2 のマニュアルにも注意書きがあります） ※ 2/26追記：正確にはサポートが切れたのは2010年の5月で、2013年の5月までは動作を保証する、という事だそうです。つまり、それ以降は動作の保証が無くなるということですね。 もし API を利用している方はバージョンが幾つか確認し、v2 であれば早急に v3 に移行することをおすすめします。 てことで、v3 の設置の仕方を簡単に説明しようとおもいます。 読み込み 読み込むコードはこちら。 <script type="text/javascript" src="http://m
フォームを改めて考えなおしてみるエントリーフォーム最適化のまとめ（EFO） | バシャログ。
世間が彼を見捨てても、私はキムタクの月9を見続けます。 どうもこんばんは Latin です。 今回はエントリーフォームの最適化についてです。 フォームって、ウェブサイトをローンチした後は、メンテナンスが全然されていない･･･って事は結構多いのではないしょうか？ 仕様が思いの外複雑であったり、分析・改善に費やす時間がなかったりと、理由は様々だと思うのですが、今回は最低限把握しておくべき項目をまとめてみました。 フォームの初期実装時やリニューアルなどに少しでもご参考になればと思います。 【入力サポート】 選択項目は、デフォルト値に配慮する 例えばですが、都道府県のプルダウン選択なら、メインターゲット層の多い都道府県にするというヤツです。「東京都」をデフォルトにしているところを良く見かけますよね。 必須アイコン「必須」の表記で目立つ色で配置する 「※」や「*」は不親切だし、伝わりづらいようです。
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
最近 PHP のセットアップ時にいつもやってる設定 | バシャログ。
レーザー治療までしたのにくしゃみ出まくってるんですけど、いったい何なんですか。どうもこんにちは nakamura です。 PHP-5.3.x 系もだいぶ浸透してきた今日この頃ですが、今日はここ最近新規にウェブサーバを立てる際にいつもデフォルトでやっている PHP 周りの設定をまとめてみました（よくよく考えたら PHP-5.3.x 系とかあんまり関係ないけど）。環境は CentOS 5 or 6 の PHP-5.3.x です。remi リポジトリを使って最新版の PHP を入れてます。 /etc/php/php.ini 毎回さわっているのは大体この辺ですね。他はサイトの仕様にあわせて適宜。 [PHP] expose_php = Off [Date] date.timezone = Asia/Tokyo セッションの保存先を memcached に セッションの保存先はデフォルトで memca
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
地味に便利なコーダーさん向けのジェネレーターまとめサイト「Web制作小物ツール」 | バシャログ。
ボジョレー・ヌーボー解禁日、今日は買って帰るけどワインはあまり飲めないishidaです。 Web制作に関連するジェネレーターサイトはいろいろありますが、個人的によく使っているサイトをご紹介します。特にコーダーさん向け。 http://webtools.dounokouno.com/ サイト名からあまり想像できないですが、地味に便利なジェネレーターが６個あります。 ダミーテキストジェネレータ システムなどで文字数制限する際のサンプルやデザインやワイヤーフレームなどに使えます。文章のパターンも、坊ちゃん・徒然草・英語など７種類から選択できます。 パスワードジェネレータ 4〜20桁のパスワードをランダムに生成。一度に20個まとめて作れます。 Basic認証コードジェネレータ 名前の通り。.htaccessと.htpasswdが作成できます。 HTMLエンティティ化 HTML内に掲載するメールアド
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いフォーム パート 2 | バシャログ。
第 5 回「CSS を使った見栄えの良いフォーム パート2」です。 各ブラウザ毎の差異でなかなか扱いにくいフォームまわりですが、今回は CSS だけで工夫する例をいくつかご紹介します。 ■背景画像を使った例 まずは背景に画像を使用した例です。 CSS の指定は単純に input タグのワクを消して背景に乗っけただけ。画像を入れ替えれば簡単にガラリと印象の違うフォームを作れます。 XHTML <form> <ul> <li><input type="text"/></li> <li><input type="text" /></li> <li><input type="text" /></li> </ul> <p><button><img src="ex01_btn.gif" alt="" width="63" height="17" /></button></p> </form> CSS
CakePHP1.2 Authコンポーネントを使った認証機能 | バシャログ。
春はまだこないのでしょうか？ichikawaです。 本日はCakePHPで簡単に認証機能を実現する、「Authコンポーネント」について軽くご紹介いたします。 Authコンポーネントを使用するための準備 とりあえずAuthコンポーネントを使う準備をしましょう。 class HogeController extends AppController { var $components = array('Auth'); 全てのコントローラで認証コンポーネントを利用するのなら、 AppController に追加でもいいですね。 そして、認証に使うテーブルを用意します。 デフォルトの認証に使われるテーブルとカラム、そしてその変更方法 デフォルトでは、認証のために「username」と「password」というフィールドを持つ「users」テーブルを使おうとします。 それを変更したい時は以下のようにし
.htaccess だけで簡単キャリア判定してみる | バシャログ。
まだ 6 月だってのに早くも今年初あせもができちゃったよ！かいーの nakamura です。 サイトのモバイル、スマホ対応もすっかり一般的になってきた今日この頃、みなさんいつもどんな方法でキャリア判定を実装しているでしょうか。がっつりフレームワークなどを使っていればさほど難しくはありませんが、ほとんどプログラムが動いていないような静的なサイトの場合はちょっと面倒ですね。今日はそんな時に有用な .htaccess を使ったキャリア判定の方法をご紹介します。 仕様 今回、ルートディレクトリ / は PC 用サイト、/m/ 以下がモバイルサイト、/sp/ 以下がスマホサイトとして以下の仕様を元に記述方法を考えていきます。 PC で /m/, /sp/ 以下にアクセスしたら / にリダイレクト。 モバイル、スマホで PC サイトにアクセスしたらそれぞれ /m/, /sp/ にリダイレクト。 モバイ
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
Androidアプリ開発に役立つサイト7つ | バシャログ。
こんにちは、今週はモテキDVD-BOXの到着が待ち遠しいinoueです。 さて、携帯の冬モデル発表でちょっと活気づいているAndroid周辺ですが、 Xperiaもやっとバージョン2.1へのアップデートが可能となりアプリ開発 をそろそろ本腰入れないと、という状況になっています。 そこで、Androidアプリ開発に役立つサイトを簡単にまとめてみました。 私も夜なべプログラミングしようっと。こたつ欲しいなあ… まずはここ！本家サイト Android 総合情報はこちらから。 Androidマーケットの情報にもアクセスできて便利です。 （ただしchrome、Firefoxでは表示が崩れて見づらかったです。） Android Developers 開発者向け情報はこちらにまとまっています。 SDKのダウンロードもここから。 サイトを英語と日本語で読むことができますが、切り替えると若干情報が異なること
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
