様々なイケてる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のスクリーンショットが集まるサイト
Illustrator の時間短縮！ウェブやチラシで使うアクセスマップの作り方 | バシャログ。
こんにちは Latin です。 「Retina」 ではありません。ラテンの「Latin」です。 もうすぐ夏が終わりそうというのに、ウチのビルの喫煙所はサウナのように蒸し暑いです。 ダイエット中の方はぜひご活用ください！ さて今回ですが、デザイン分野での記事を Postします。 何かと制作機会の多い「アクセスマップの作成」の時短テクニック！（？） みなさんの時間短縮テクニックなどもありましたらぜひご意見頂けると幸いです。 2012.08.27 記事の内容を一部訂正いたしました。 目次 Illustrator の時間短縮！ウェブやチラシで使うアクセスマップの作り方 Point.1 Google Maps を使って時間短縮 Point.2 スクリーンショット画像に沿ってトレース Point.3 お好みでトッピングを追加 Point.4 仕上げにクリッピングマスク そもそも地図の図案を起こすのも、
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
web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
最近 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"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。
今日は2011/11/11、やたら「1」の並ぶ日付です。 11時11分にスクリーンショット撮り損ねてちょっとorzなhakoishiです。 いっそその時間に更新までしてしまいたかった！後の祭り。 さて、今回はソーシャルボタン設置のソースサンプルをいくつかご紹介。 今回取り上げるサービスは、「はてなブックマーク」「twitter」「facebook」「addthis」の4つです。 (2011/11/22)その2、アップしました。「google+」「mixiチェック」「mixiイイネ！」「evernote」編です。 引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 はてなブックマーク <a href="【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイト名】" data-hatena-book
SE・プログラマが知ってると便利な脆弱性チェックツール 5 つ | バシャログ。
東京ラーメンショー2011 いきてーーー！みなさんこんにちは、nakamura です。 今日はプログラマだったりサーバ管理者だったり（もしくはその両方だったり）する方にお勧めしたいサイトとツールをいくつかご紹介します。細かい脆弱性のチェック等どうしても手間が掛かるものが多いですが、今回ご紹介するツールをうまく使うとその辺りだいぶ効率よくできると思いますよ！ WEB アプリケーション関連 XSS Me XSS Me :: Add-ons for Firefox XSS のテストをある程度自動化してくれる Firefox のアドオンです。残念ながら Firefox3.0.* 系の頃に開発が止まってしまっているようですが、僕の環境では install.rdf の書き換えで問題なく動作しています。（Windows7 64bit + Firefox7.0.1） SQL Inject Me SQL I
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
.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のダウンロードもここから。 サイトを英語と日本語で読むことができますが、切り替えると若干情報が異なること
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
【CSS】CSSで簡単にぶら下げインデントをする方法 | バシャログ。
自宅用に新しいパソコンを買った sakai です。 スペック重視とお店で伝えたら「ちょっと値が張りますよ～」と店員に言われたのでドキドキしていたのですが、CPU が Core i7、メモリが 6GB、ハードディスクが 1TB、ディスプレイや OS も付属して 13 万円くらいでした。前回パソコンを買ったときの感覚では 30 万円くらいなのかと思ってました。安くなりましたね… 今回は小ネタで失礼します。 Web ページ中の注意書きなどでよく使用される手法で、「※」マークを使って文字をぶら下げる方法をご紹介します。 このように表示されます。 XHTML ソースは以下です。 <p>※ここに注意書き。<br /> 改行しても見栄えがいいです。</p> CSS のソースは以下です。 p { margin-left: 1em; /* ブロック全体を 1em 右に */ text-indent: -1e
サイトを公開する際に最低限抑えておきたい Apache の設定 | バシャログ。
こんにちは nakamura です。最近トルシエさんテレビ出すぎじゃありません？ウィイレヤロウヨ。オフサイドダヨ！ さてさて今回は意外と知られてないけど、サイトをインターネットに公開する際には知っておいた方が良い Apache の設定をいくつかご紹介します（一部 PHP の設定もありますが）。この設定をしていないからといって即危険にさらされるという訳でもありませんが、リスクの芽は摘んでおくに越した事はありませんよね。 無駄な HTTP ヘッダを返さない ディストリビューションにより異なるかもしれませんが、CentOS デフォルトの設定の場合 Apache が返してくる HTTP ヘッダは以下のようなものです。 HTTP/1.1 200 OK Date: Mon, 05 Jul 2010 01:01:14 GMT Server: Apache/2.2.3 (CentOS) X-Powered
Apple 関連のフォントを手に入れよう | バシャログ。
シーブレインのマニュアル作成サービスチームから「スマートフォンで読めるマニュアル作成」を PR するページを作ってほしいとのご依頼があり、ページをデザインました。 せっかく iPhone を素材に使うのだから、フォントも Apple 風にしたいわあ、といろいろ探した際に知ったいくつかのフォント情報をメモします。 ひと目でフォント判別できる一流デザイナーにあこがれる！ 1. Apple 日本語サイトのフォントは「AXIS」 Apple 公式サイトの日本語や Apple store で手に入るパンフレットには「AXIS」というフォントが使われていることが多いそうです。 その「AXIS」試用版が、無料でダウンロードできます。登録さえすれば商用も OK という太っ腹ぶりです。 なだらかなラインがスマートな、きれいなフォントです。 Type Project｜試用版ダウンロード http://www.
めっちゃ便利やねん find コマンドのオプションまとめ | バシャログ。
こんにちは nakamura です。そういえば 4/1 から 神奈川県公共的施設における受動喫煙防止条例 が施行されましたね。今のところよく行くお店でそれらしい光景は見掛けませんが、先日行った居酒屋はものの見事に禁煙になっていて心なしか客足もまばらな感じでした。神奈川県の飲食はこれから厳しそうですな。 さてさて思わず関西弁になってしまうほど便利な find コマンドを今日はご紹介します。比較的有名なコマンドですが、オプションが相当な数あり正直全てを把握するのは無理かもしれません。ただ、よく使うものだけでも頭に入れておくと何かと便利な優れものなのです。 基本的なオプション まずは基本的な使い方。 -type ファイルタイプの指定に使用するオプションです。スペシャルファイルや名前付きパイプ等様々な引数がありますが、よく使うのはディレクトリを示す d と通常ファイルを示す f でしょうか。 -n
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料で使えるプロジェクト管理ツール「gantter」を使ってみて、これはもう手放せないと思ったポイント3つ | バシャログ。