【Fireworks】ワイヤフレーム作成時に覚えておくと便利なアタリ画像＆アタリテキストを簡単に作成する拡張機能 | バシャログ。
3日間、ノロウイルスにやられ寝込んでいました ishida です。 手洗い・うがいはキチンとしておきましょうね。 さてさて今回は、「Fireworks Lover Advent Calendar 2012」 8日目のエントリーとして Fireworksでワイヤフレーム・モック作成時に覚えておくと便利な拡張機能について２つご紹介します。 自分はワイヤーフレーム作成につかうツールは、もっぱらFireworksです。 CS6にバージョンアップされてからワイヤーフレーム用の共有シンボルがめちゃくちゃ増えて、デザインツールとしてだけではなくワイヤフレーム作成ツールとしても便利になりました。 ちなみに共有シンボルの「ワイヤフレーム」内にあるパーツはこんな感じです。 また「jQuery Bootstrap」のパーツもあったりします。 これだけでもかなり便利なのですが、コンテンツ内のアタリ画像とダミーテキ
セキュリティ対策まとめ（2013年秋）
JOJOのアニメ第三部が正式に決まったそうですね！ 楽しみ～な、にわかファン Latin です。 最近のWordPress界隈ではAmazon Web Serviceが俄然盛り上がっておりますが、大好きなWordPressを守るため、セキュリティ対策をまとめてみました。 初期セットアップ・設定系の対策 データベースのプレフィクス（接頭辞）を変更する wp-config.php 内の「wp_」の接頭辞を任意のものへ変更します。 その場合、追加で以下の作業が発生します。 phpMyAdmin などを使い、データベースのテーブルネームを変更したカスタムプレフィクスに変更する。 options や usermeta テーブルなどの他のフィールドでも「wp_」プレフィクスが使われている可能性がある為、以下のクエリーを走らせてプレフィックスを変更する。 SELECT * FROM `myprefix_
【スマートフォン制作向け】checkboxをCSSのみでカスタマイズ | バシャログ。
こんにちは、ishida です。 先週金曜日、横浜スタジアムでノーヒットノーランをこの目で見ました。 やっぱり野球はスタジアム観戦がいいですな。 さてさて、以前こちらのブログで 【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ という記事を書きましたが、今回はこちらの続編でcheckboxカスタマイズをご紹介します。 ソースコード コードはこちらです。 あっ、それと バシャログ。で js.do.it アカウントを作成しましたので、 よろしければフォローしていただると幸いです。 ポイント checkbox本体を、appearanceプロパティをbuttonにしています。 checkboxがチェックされた場合に、:checked疑似クラスをつかいます。 :checked疑似クラス ＋ before疑似要素 ＋ after疑似要素を組み合わせて、チェックされた時のデザインを作
printデバッグ離れできるようになるために試してほしいPhpStorm+Xdebug用例集(2) | バシャログ。
前回はPhpStormのXdebug連携機能のうち、ステップ実行と変数監視機能について解説しました。今回はブレークポイントを中心に機能を試してみます。 ブレークポイントの概要 前回の記事でも使いましたが、PhpStormでPHPファイルを開き、エディタの左端をクリックするとブレークポイントを設定できます。設定すると、プログラムを実行してその行に到達すると実行が中断され、その時点での変数の値を調べたり(Variables/Watchesペイン)、任意の式を実行することができます。(Evaluate Expression機能)。 ブレークポイントを一覧する デバッグ作業が複雑になってくるとブレークポイントの数も増えてきます。デバッグが一通り終わったときに全部解除したい、というときに開いているファイルを1つ1つ見ていくのは面倒です。幸いブレークポイントだけを一覧できる機能があるのでそこからまとめ
擬似クラスと間接セレクタを使って汎用性のある角丸テーブル | バシャログ。
洗濯すると雨の降るhakoishiです。 今回は汎用的に使える角丸テーブルのソースをご紹介。 border-radiusに合わせて、IE9以上の対応です。 サンプル まずはサンプル。 この5種類です。 theadなし、tbody左行がth。 theadあり。tbodyはthなし。 theadあり。tbody左行がth。 thead複数行、セル結合あり。tbody左行がth。 theadあり。tbody左行がth。tfootあり。 サンプルページ 擬似クラスと間接セレクタを使って汎用性のある角丸テーブル お約束 tbodyを必ず入れる tfootを入れる場合、tbodyの上部へ 上記の点だけ注意すれば、テーブルや内部のセルへのクラスの付与は不要です。 CSS table { /* 上、左にborder */ width: 100%; border-collapse: separate; /*
【Sass】カラージェネレーターっぽく使ってみる。 | バシャログ。
家から5分の立ち飲み屋が21時閉店でつらいhakoishiです。 さて、今回はSassをカラージェネレーターっぽく使ってみるサンプルなど。 色の属性を変更する方法と、色相差を指定して配色を作るmixinのご紹介です。 属性を変更 まずは下準備として。 基準色（$sampleColor として定義）から色相、明度、彩度の3属性に分解します。 色相（0.0-360.0degの範囲で取得） hue($sampleColor) 彩度（0-100%の範囲で取得） saturation($sampleColor) 明度（0-100%の範囲で取得） lightness($sampleColor) 色相の対応は下記の図を参照のこと。赤を0degとして右回りです。 その後、必要な属性を変更してカラーコードに戻します。 変更後の属性はそれぞれ下記の変数に格納されているものとします。 色相→$newHue、彩度
FirefoxのJavaScriptプロファイラを試してみる | バシャログ。
地元横浜で行われたGREEN ROOM FESTIVALというフェスに行ってきたminamiです。一番良かったアクトは松崎しげるでした。 先日Firefox 21.0がリリースされましたが、20.0の時点でデベロッパーツールにJavaScriptプロファイラーが追加されていたみたいなので使ってみました。 ツール→Web開発→プロファイラで表示できます。 プロファイリングしたいページで「新規プロファイルを作成」し、「開始」ボタンをクリックします。「終了」ボタンをクリックするまでのページでのJavaScriptの処理を解析します。 Chromeにも同様の機能がありますが、グラフで視覚的に処理の重たい部分がわかるのが良いですね。実行時間と処理の行われたスクリプトの箇所を特定出来ます。 実行結果はツリーで表示され、処理の行われた記述を参照することができます。 グラフ部分をドラッグすると、その範囲だ
【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ | バシャログ。
こんにちは、GWは神奈川県から一歩も出ませんでした ishida です。 さてさて、今回は最近スマートフォン案件が増えてきましたので実務で使えそうなコーディングTipsをば。 スマートフォンでは、radioボタンがデフォルトのままだとかなり押しにくいですよね。 対象がスマートフォンであれば（IEちゃんを除けばOKかも）CSSだけで、意外とカスタマイズができます。 HTML HTMLのコードは以下になります。 <ul class="list"> <li><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男性</label></li> <li><input type="radio" name="gender" id="gender2" value="2"><label for="gende
【CSS】clip使ってみた & アニメーションサンプル作ってみた | バシャログ。
GWはこもります。さがさないでくださいhakoishiです。 さて、本日はCSSのclipプロパティで実験してみたまとめ。画像をトリミングするやつですね。 どこまでできるか、アニメーションバナーっぽいものも作ってみました。 使い方 切り抜きたい画像に対し、position:absolute;を指定した上、各辺までの距離を指定します。 marginなどとは右辺、下辺までの距離の取り方が違うので、注意したいところです。 また、IE7以下にも対応させる場合は、各値の区切りはカンマではなくスペースで。（各ブラウザもこの記述に対応しています。） アニメーションなし サンプル html <div class="sample-clip"> <a href="#"> <img src="img/img01.jpg" alt="" width="500" height="330"> <dl> <dt>タイト
Fireworks でワイヤーフレームを作成する際に活用したい機能 | バシャログ。
来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください！ Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの？ ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ
[書籍紹介] よくわかるFireworksの教科書 | バシャログ。
自宅にキョウリュウジャーのオモチャが溢れ返っている sakai です。 弊社ではもう 10 年以上、Fireworks を Web デザイン作業の社内標準ツールにしています。 新入社したデザイナは、たいていの場合は「メインで使うのは Photoshop で、Fireworks はたまに画像をスライスして書き出すために立ち上げる」という人ばかりなので、入社をしたらまず最初の 1 週間くらいは徹底的に Fireworks を試用してもらっています。 その時に、この本があればすごく捗りそうだ！ というわけで 今回は先日発売された「よくわかる Fireworks の教科書」をご紹介します。 内容 タイトルに偽りなし！ 内容的には、Fireworks を初めて使う人にも非常にわかりやすい、実に教科書的なものとなっています。 Fireworks の初歩的な操作から、ひととおりの機能を丁寧に解説されてい
背景パターン簡単作成「Generate Pattern」使ってみた | バシャログ。
だいぶ暖かくなってきました。もうすぐ連休ですね！ seki です。 さてさて今回は連続する背景画像やドットアイコンなどを、実際に使用したプレビュー画面を見ながら、簡単に作る事が出来るWebサービス「GeneratePattern」のご紹介です。 詳細は以下より。 はじめに 【GeneratePattern】 こちらが実際の画面です。継ぎ目の無い単純な背景画像を作ったり、Fireworksのテクスチャの作成などで大活躍！中々使い勝手が良くて面白いツールです。 ※保存にはユーザー登録が必要 基本機能 使い方は単純に、ペンと色を選択したら、描画していくだけ！ スポイト、消しゴム、塗りつぶしや全消し、保存方法など、最低限の機能は上部に。 右サイドには、キャンパスサイズの変更や、拡大・縮小、ユーザー情報の変更などが出来るようになっています。至ってシンプルなUIですね。 作ってみる 実際に、ものすごく
今いるフォルダをカレントにして、コマンドプロンプトやターミナルを立ち上げるTips | バシャログ。
アームバンド型のジェスチャーコントローラMYOが気になる。hakoishiです。 筋肉の動きを感知するんですってよ？すっごい。 さて、黒い画面もそろそろ愛おしくなってきたデザイナー、コーダーのみなさん。 今いるフォルダをカレントにしてコマンドプロンプトやターミナルを立ち上げるTipsなどいかがでしょう。 Windows Windows 7、8で使えます。 カレントにしたいフォルダで 「Shift + 右クリック」→「コマンドウィンドウをここで開く」 を選びましょう。 ※フォルダにカーソルを乗せるか、あるいはフォルダの中の余白で実行します。 すると、このとおり。 実行した「C:¥Program Files¥iTunes」フォルダをカレントに、コマンドプロンプトが開きます。 「まずはcd」から開放されましたね。 さあ、早速 compass watch など。 Mac Mac OS X 10.7
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
どれ使う？使い勝手の良いカラースキームツール8選！ | バシャログ。
今更ながら最近PSPの「勇者のくせになまいきだor2」が楽しくて仕方ない seki です。世界に平和はおとずれなぁい!!! さてさて今回は、もう何番煎じになるか分りませんが･･･！私がよく使うカラースキームツールのご紹介です。こういうツールは、突然URLが消えてなくなってしまう事もあるので、定期的におさらいも兼ねて一覧を作っておくのはいいことなんだ･･･！と自分に言い聞かせつつ、最近のものから定番のものまで、これだけ抑えておけば大丈夫！という、多機能で使いやすいものを選んでみました。 詳細は以下より。 カラースキームツールを使いこなそう！ 色選びを感覚でやると怒られる･･･！という現実を知ってからというもの、こういうツールを自然とブックマークし、集めるようになりました。説得力ある色選びをするには欠かせないツールのご紹介。 「kuler」 これはもう定番中の定番ですね！Photoshopにも
RequireJSでGoogle Maps APIを使う | バシャログ。
今日はマーヴィン・ゲイの命日だそうですね。素晴らしい名曲の数々をありがとう！minamiです。 JavaScriptをモジュール化して読み込みの制御をできるRequireJS、便利ですが、Google Maps APIを使うときちょっとつまづいたので解決法を調べてみました。 今回のファイル構成は以下です。 ├── index.html └── js ├── main.js ├── jquery-1.9.1.min.js ├── google.js ├── async.js └── require.js index.html <script type="text/javascript" data-main="js/main" src="js/require.js" /></script> div#map 内にGoogle Mapsを表示させたい、Google Mapsを表示させる処理はファイ
別ドメインのjsonデータをXMLHttpRequestでやりとりする | バシャログ。
いつのまにやら家から5分の距離に新しくコンビニができたことに気づいたtanakaです。 今日は、別ドメインのjsonデータをXMLHttpRequestで普通に取得するにはどうすればいいか調査したので方法をまとめます。実装としてはもう4年くらい前から使えるようになっていますが、私はまだ使ったことがなかったので。 XMLHttpRequest とクロスドメイン XMLHttpRequest が Internet Explorerに実装され、それ以外のブラウザに実装された当初は JavaScriptが実行されたページのドメイン以外にリクエストを送りデータを受け取ることはできませんでした。別ドメインに非同期でリクエストするためにいくつかの方法が考えられましたが詳しい説明は省略します。(一旦サーバを経由する・Flashを経由する・JSONPを使うなど) 2009年になりXMLHttpRequest
【Fireworks】の痒い所に手が届く！拡張機能“Transform Panel”を使ってみた | バシャログ。
最近昼間の暖房が少し暑いくらいなので、油断して薄着で出かけてみたら夜寒くて死にそうになった seki です。 今回は、先日Fireworksの拡張機能を色々復習＆整理をしていた時にたまたま見つけた拡張機能「Transform Panel」というのを入れてみたので、機能のご紹介をします。Fireworksで要素のサイズや細かい座標をプロパティで直接入力する人には、痒い所に手が届く良さを感じられるかと。 詳細は以下より。 ダウンロード http://www.senocular.com/fireworks/extensions/?entry=572 こちらからダウンロードしてください。 「Transform Panel」で出来ること まずは基本となる便利な機能を一つ一つ見ていきましょう。 実際のパネルがこちら。 簡単に言うと画像やテキストの変形を補佐してくれる拡張機能です。 1.小数点単位を表示
【当たり前を疑ってみる】新着情報をdlでマークアップするのは妥当なのでしょうか？ | バシャログ。
Windows8、シャットダウンまでの道のりの険しさに空を仰いだhakoishiです。 終了させないで、スリープ状態をデフォルトにして使う想定なのかなー。タブレットみたいに。 さて、今回はちょっと当たり前を疑ってみたお話。 新着情報をdlでマークアップする定番テクニック、果たして妥当なのでしょうか？ この話題、ブログやtwitterなんかでちょいちょい見かけますね まずはよくある形を確認。こういうのですね。 『dlで問題ないかも。』という意見 新着情報としての意味合いが強いなら、日付がキーになるのは自然。 形に与えられた意味を考えるに、日付がキーになっているという判断もできる。 『dlで、ってのはどうなんだろう。』という意見 dl要素の意味を考えると、ニュース見出しは日付について説明していることになってしまう。 なら、新着情報はどんな情報を持っていて、どんな意味と構造を与えるべきなのでしょ
Fireworksで複数画像を一気にリサイズして書き出す方法（非バッチ処理） | バシャログ。
Fireworks で複数の画像を一気にリサイズする場合は［ファイル］→［バッチ処理］が最速だと思われますが、今回は別の方法での作業手順をご紹介します。 画像をリサイズした後に、ちょっと編集したい（個別にフィルタをかけたいなどの）場合は、こちらの方法のほうが結果的にスムーズかも。 今回使用するのは Fireworks CS5 です。 STEP1 画像のリサイズ 1. Fireworks を起動し、新規ドキュメントを作成する。 2. 作成した新規ドキュメントのステージ上に、リサイズしたい画像をドラッグ＆ドロップ。 3. カンバスをフィットする。（［変更］→［カンバス］→［カンバスを合わせる］） 4. 画像サイズを変更する。（これでカンバス上の画像が全てリサイズされます） 現時点では、レイヤー 1 の直下に全ての画像が配置されています。 STEP2 画像を個別のレイヤーに分配して加工 5. ［
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
