画面遷移がすごいサイトのまとめ | バシャログ。
TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ
【JavaScript】デザインパターンを知ってみる。メディエータ編 | バシャログ。
今回はJavaScriptで書くメディエータパターンについて調べてみました。実践的に使っていけるパターンだと思います。Mediator は「調停者」とか「仲裁人」という意味だそうです。 なぜ使うのか？ メディエータは、いくつかのオブジェクトで情報のやり取りをしなくてはならない場合にとても有効なパターンです。メディエータパターンでは、オブジェクト同士が直接情報をやりとりするのではなく、メディエータオブジェクトを介して情報のやり取りをおこないます。 オブジェクト同士が情報のやり取りをしているイメージ メディエータパターンのイメージ 例えば、タブ型のボタンのUIの実装を考えてみましょう。一つのタブをクリックするとアクティブになり、それまでアクティブだった他のタブがあれば、通常状態に戻る機能が必要になります。 この機能を実装するためにはどうすればよいでしょうか。 単純に考えると、全てのボタンの状態
Pageantと『ファイル名を指定して実行』で快適SSH | バシャログ。
夏の足音がだいぶ近付いて参りました。いやぁナツい、実にナツい。むさ苦しい見た目とは裏腹に夏大好きなnakamuraです。こんにちは。 さてさてWindowsクライアントからリモートサーバにSSH接続する際、皆さん何をお使いでしょうか？teraterm、poderosaなどいくつかの選択肢があるかと思いますが今回は僕の使っているputtyで、頻繁にアクセスするサーバへのSSH接続を簡単に出来る一工夫をご紹介したいと思います。 Pageantを活用する Pageantは、OpenSSHでいう所のssh-agentに相当するアプリケーションで、パスフレーズを一度入力するとそのキーを記憶してくれて2回目以降パスフレーズの入力を省いてくれるとっても便利なやつです。puttyをインストールするとputtyと同じディレクトリに一緒に入っているはずです。 と、そのままでも充分便利なツールですが、キーを記憶
今いるフォルダをカレントにして、コマンドプロンプトやターミナルを立ち上げる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
【Fireworks】の痒い所に手が届く！拡張機能“Transform Panel”を使ってみた | バシャログ。
最近昼間の暖房が少し暑いくらいなので、油断して薄着で出かけてみたら夜寒くて死にそうになった seki です。 今回は、先日Fireworksの拡張機能を色々復習＆整理をしていた時にたまたま見つけた拡張機能「Transform Panel」というのを入れてみたので、機能のご紹介をします。Fireworksで要素のサイズや細かい座標をプロパティで直接入力する人には、痒い所に手が届く良さを感じられるかと。 詳細は以下より。 ダウンロード http://www.senocular.com/fireworks/extensions/?entry=572 こちらからダウンロードしてください。 「Transform Panel」で出来ること まずは基本となる便利な機能を一つ一つ見ていきましょう。 実際のパネルがこちら。 簡単に言うと画像やテキストの変形を補佐してくれる拡張機能です。 1.小数点単位を表示
そろそろ確認！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
Fireworks でワイヤーフレームを作成する際に活用したい機能 | バシャログ。
来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください！ Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの？ ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ
【Fireworks】ワイヤフレーム作成時に覚えておくと便利なアタリ画像＆アタリテキストを簡単に作成する拡張機能 | バシャログ。
3日間、ノロウイルスにやられ寝込んでいました ishida です。 手洗い・うがいはキチンとしておきましょうね。 さてさて今回は、「Fireworks Lover Advent Calendar 2012」 8日目のエントリーとして Fireworksでワイヤフレーム・モック作成時に覚えておくと便利な拡張機能について２つご紹介します。 自分はワイヤーフレーム作成につかうツールは、もっぱらFireworksです。 CS6にバージョンアップされてからワイヤーフレーム用の共有シンボルがめちゃくちゃ増えて、デザインツールとしてだけではなくワイヤフレーム作成ツールとしても便利になりました。 ちなみに共有シンボルの「ワイヤフレーム」内にあるパーツはこんな感じです。 また「jQuery Bootstrap」のパーツもあったりします。 これだけでもかなり便利なのですが、コンテンツ内のアタリ画像とダミーテキ
スマートフォンのデバッグが格段に楽になる!? Adobe Shadow を試してみた | バシャログ。
敬虔なAppleファン(?)としては、The New iPadは手に収めておくべきでしょう。iPadの予約は済ませてあるtanakaです。 今日は少し前に話題になった、スマートフォンやタブレット端末のデバッグが楽になるAdobe Shadowを使ってみたので主にリモートデバッグ機能について紹介します。 インストール インストールについてはすでに詳しく説明されているサイトがありましたのでそちらを参考にしてください 話題のAdobe Shadowを早速試すよー（Mac OS X） ::ハブろぐ リモートデバッグ Adobe Shadowのリモートデバッグを一言で説明するなら、スマートフォンのFirebug機能が、Chromeについていて、情報を見たりできるツールです。Shadowでの全く新しい機能というわけではなく、前からあった、weinreというリモートデバッグツールを組み込んでいるようです
【Fireworks】 様々なサイズのバナーの雛形を作るFireworksのコマンド | バシャログ。
春生まれのせいなのか目は痒いけど調子は上がってきたminamiです。 新しいfacebookページの仕様により、定形のカバー画像やアイコンのの画像を作る機会が増えそうですね・・・ 定形のサイズの画像を作る際にあそこのサイズなんだったっけ・・・といちいち調べなくても済むように、ひな形を作ってくれるFireworksのコマンドを作りました。 タイムラインのサイズはこれで完璧！新Facebookページの写真サイズまとめ 取り急ぎ、新しいFacebookページを作る際には最低下記のサイズの画像が必要になりそうです。 カバー写真 851px×315px プロフィール写真 180px×180px アプリイメージ写真 111px×74px 毎回851px...とかやるのも面倒なのでコマンドを作ってみました。 createBanner.jsf ※右クリックなどで保存してください。 使い方 Firework
【Fireworks】 テキストボックスを改行で分割するコマンド | バシャログ。
髪を切って2日目で失敗したことに気がついたminamiです。 今回もちょっとだけ便利なFireworksのコマンドです。 テキストボックスを改行で分割するコマンド 右クリックなどで保存してください。ご使用は自己責任でお願いいたします。 読んで字のとおりですが、テキストボックスを改行部分で複数のテキストボックスに分割してくれるコマンドです。 画面をデザインをする際に、テキストを原稿からパーツにわけて一つづつコピペ・・・がめんどくさかったので作りました。 使い方 テキストボックスを選択して、「コマンド→スクリプトを実行」でスクリプトのファイルを選択して実行するだけです。改行でテキストボックスに分割されます。複数のテキストボックスを選択して実行するとそれぞれ分割されますが、テキストボックス以外のオブジェクトを含めるとそのオブジェクトが消えてしまうので注意してください。 作ってみてわかったこと v
[Dreamweaver]検索・置換対象ファイル拡張子を増やす。 | バシャログ。
こんにちは、hakoishiです。 最近の横浜は花粉飛んでる気がする…、と思ってたら雪っぽいものがちらつく日もあったり。 空を見上げては「今はいったいいつなんだろう」と思い馳せる日々です。 さて、今回はDreamweaverの検索・置換対象となるファイルの拡張子を増やす方法をご紹介。 サイト内検索したけど、目的のソース箇所が見つからない…と思ったら「.ctp」とか「.cgi」とかDWは検索対象として見ちゃいないのですねorz そんな時、他のソフトに作業の場を移すのも良いですが、Dreamweaverでも検索に引っかかるようカスタマイズできますのでご参考まで。 編集必要なファイルが2つ。 他、必要に応じて設定する項目が1つあります。 ※各ファイル編集前にはバックアップをお取りください。また、極力DW以外のエディタで編集することをおススメします。 【1】Extensions.txt 下記にあり
![[Dreamweaver]検索・置換対象ファイル拡張子を増やす。 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2a2c11b17693e3812ca5043c1de13f337332706/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_dreamweaver.png)
こんなのもあるよ！ Firefox の便利なアドオン達 | バシャログ。
最近ダイエットを始めて、ストイックな生活を送っている kimoto です。腹減った！ さて、そんな絶賛やせ細り中（※本人のイメージです）の kimoto のメインブラウザは、chrome の勢いが凄かろうと相変わらず Firefox ですが、未だに「へえ、こんなのあるのか」というアドオンがあったりします。 数が多いので、当然全てを把握しきれないですよね。 ということで、便利だけどまだ紹介してないアドオンを幾つか紹介しようと思います。 特に新しいものというわけではないので、知ってるものもあると思いますがその辺は広い心でご容赦いただければ。 複数ユーザで同時にログインできる！「Multifox」 Multifox 複数セッションを扱えるアドオン。 これを使えば、同一サービスで、同時に違うユーザでログインしたりすることができます。 会員制のサイトを開発している人などは、これを使えばデバッグがググ
【Fireworks】選択したオブジェクトをガイドで分割するコマンド | バシャログ。
『GRAVITY DAZE』というゲームが気になっているminamiです。VITA買うか・・・！ さて、日頃Fireworksをメインに使っていく上でものすごく重宝している『Guides』という拡張機能があります。 ものすごく重宝しているんですが、一点残念な所があったのでそこを補うコマンドを作ってみました。（FireworksのバージョンはCS5.1です。） Guidesは超便利 もはや度々いろいろなところで紹介されている有名な拡張なので、Fireworks使いは必須な『Guides』ですが、一応ご紹介します。 Guides 配付ページ 『Guides』はその名の通り、ガイドを使いやすくしてくれる機能です。個人的には、「selection」のタブが、選択したオブジェクトに対して上下左右どこにでもガイドを引ける！さらにオフセットまで指定できる！ということで愛用しております。 しかし、この『G
Fireworksの「レイヤーからファイルに書き出し」が目からウロコ | バシャログ。
『哀しき獣』という韓国映画が面白すぎたので、もう一度観たいminamiです。 Fireworksの画像書き出しではもっぱらスライスの使用をプッシュしてきた当ブログですが、「レイヤーからファイルに書き出し」って便利じゃない・・・という衝撃を改めてお届けします。 「レイヤーからファイルに書き出し」使ってる？ Fireworksの書き出しメニューには幾つか項目がありますが、「レイヤーからファイルに書き出し」は今まで使ってきませんでした。 要因としては、 Photoshopと違いオブジェクトを直接編集できるので、パーツ毎のレイヤー分けを意識していなかった 画像書き出しはスライスが強力なので他の方法を気にしたことがなかった というのがあると思います。しかし、場合によってはスライスで管理するよりもこちらのほうが便利！ということで見なおしてみました。 同じレイアウトで大量に画像を作りたい 例えば以下のよ
Dreamweaverで画像サイズをリセットするコマンド＆半分にするコマンド（Retina対応に便利） | バシャログ。
あけましておめでとうございます。hakoishiです。 本年もよろしくお願いいたします。 正月休みはコタツと闘っては連日連敗を喫しておりました。 眠りへの誘惑危険すぎる。 さて、本日はDreamweaverの画像サイズのリセットが一気にできちゃうコマンドと、半分にリサイズするコマンドのご紹介を。 画像サイズをリセットするDreamweaverコマンド Dreamweaver 画像の幅と高さをリセットするコマンド « きんくまデザイン http://www.kuma-de.com/blog/2009-01-27/298 既存のソースを使いまわしてコーディングする時や、修正を重ねるうち微妙にサイズの違った画像が多発した時。 1つずつクリックして修正していくのは手間ですね。 と、そんな時にこのコマンド。 ソースを全選択した状態で、「コマンド」メニュー⇒「画像サイズをリセット」を適用すると、ページ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Fireworks】Fireworksの基本技！[ box-shadow ]のあしらい再現方法まとめ | バシャログ。
PSDファイルからテキストを抽出してtxtファイルにまとめてくれるスクリプト | バシャログ。
[Fireworks] 複数のファイルをページに読み込める「Import Files in multiple pages」 | バシャログ。