はてなブックマーク

';tag+=getTag(tree,0);var view=document.createElement('div');view.innerHTML=tag;view.setAttribute('style',(function(){var s='z-index:9999;position:fixed;max-width:300px;top:0;right:0;max-height:100%;padding:10px 10px 50px 10px;';s+='overflow-y:scroll;box-sizing:border-box;';s+='background:#333;color:#fff;box-shadow:0px 0px 5px rgba(0,0,0,0.2);line-height:1.4em;font-size:12px;';return s;})());docum

ウェブ制作のページ確認において、非常に便利なブックマークレットをつくったので紹介します。 全体を俯瞰する感じでサイト制作できます ウェブ制作において、きちんとページが表示されているかをチェックする検証作業は、とても大変ですが、このブックマークレットをつかえば、非常に効率的にページ確認 を行うことができます。 サイト構築時は、通常は1ページづつ移動し、1画面づつスクロールして確認していきますが、このブックマークレットをつかえば、ページを縮小してプレビューするので広いエリアを一度に確認 でき、さらに複数ページを1画面でまとめて確認 できるので、ページ全体を俯瞰するように、ページ確認が行えます。 導入方法 ボタンをブックマークバーへドラッグするだけで、すぐに導入できます。 対応ブラウザは、Google ChromeとFirefox になります。(IEとSafariは非対応です)

いまやウェブ制作に欠かせない、Font Awesomeですが、500アイコン以上あるので、なかなか探すのも大変です。 公式サイトで、アイコンを検索できますが、あまり一覧性が高くないので、このページで、オリジナルのアイコン検索を作成しました。アイコン名から検索するほか、サイズを指定したり、回転したりと、アイコンをカスタマイズできます。 以上です。 ここから下は、Font Awesomeの基本的な使い方などについて紹介します。 Font Awesomeとは Font Awesomeは、500以上のアイコンが利用できる、オープンソースのアイコンフォント（ウェブフォント）です。 無料で利用でき、導入も非常に簡単です。ファイルをダウンロードしてサイトに組み込むこともできれば、CDNでも配信しているので、CDNのパスを取得して、ページに貼り付ければ、すぐに利用することもできます。Bootstrapとの

About This Site HTML、CSS、Javascript、デザイン、3D、モバイルアプリ、CMSなど、ウェブ制作関連の話題を扱うブログです。Fireworksのオリジナル拡張機能の配布や、デザインリソースの配布、オリジナルツールの公開も行っています。 About Me 大阪在住フリーのウェブデザイナーの、ピクセルイメージ田中です。長年、ウェブサイト構築のお手伝いを行っており、デザインやプログラムを中心に、Flash全盛期につちかったモーショングラフィクスのセンスを生かした動画作成や、サイト構築に便利なCMSの開発も行っています。

以前、シンプルな矢印アイコンセットを公開・配布しましたが、 今回はローディングのくるくるのアニメーションGIFです。 最近は、Flashばっかりではなく、HTML＆JSの実装なんかもやっていて、まあ苦労してるんですけど、 Flashの場合は、ローディングの進捗状況を％で表示する プログレスバーがスタンダートですよね。細かい部分のロードにはクルクルみたいな。 HTML＆JSの実装の場合は、コンプリートのコールバックが中心で、 ローディングの進捗状況を、とるのが難しい場合がほとんどだと思うので、 エンドレスなくるくるアイコンの出番はおおいと思います。 でも、毎回つくるのは、面倒なので、えいやっとまとめて作成してみました。 書き出したアニメーションGIFファイルと、 ソースファイルになるFireworks用のPNGファイルを用意したので、 自由にデザインワークで使ってください。 特徴 6種類×複

小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 ( 2012年03月22日 ) Fireworksの文字のアンチエイリアスは、 「鮮明」「強く」「滑らかに」「カスタム」の4種類がありますが、 正直、どれもあまり綺麗ではありません。 あるフォントでは、「鮮明」が綺麗だけど、別のフォントでは、「滑らかに」が きれいだったり、フォントの種類だけでなく、文字の大きさによっても、 適切なアンチエイリアスの種類は変わってきます。 このエントリーでは、アンチエイリアスのかかった小さいテキストが 少し綺麗になるかもしれない方法を紹介します。 同時に、その方法をコマンド化したので、それの解説と配布を行います。

久々に、Fireworks用のコマンドファイル(JSF)を公開します。 Create_Symbolsの概要 Fireworksのシンボル機能がありますが、結構、昔のバージョンから存在するのは知ってたのですが、 やっと最近使い始めて、便利だなぁと関心しています。 写真オブジェクトをカンバスに配置したあと、ある程度大きなサイズでシンボル化しておけば、 写真をリサイズしても、画像が劣化しないので、思い切って画像のレイアウトが行えます。 だた、オブジェクトをひとつひとつしかシンボル化できないのが、 非常にめんどうに感じていたので、エイヤッっとコマンドを作成してみました。 このコマンドを使用すれば、複数の選択オブジェクトを、まとめてシンボル化できます。 使用方法 MXPファイルになってますので、ダウンロード後、「PI_Create_Symbols.mxp」をクリックすれば、 Adobe Extens

Adobe Shadowとは まだ、プレビューリリースですが、かなり即戦力なソフト「Adobe Shadow」が昨日公開されました。 ウェブサイトのスマホ対応は、なかなか手ごわいテーマですが、このソフトをつかえば、 Win、もしくはMacのChromeで表示しているウェブサイトを、iOSデバイスや、Androidデバイスにて、 同時に表示してくれます。いちいち、スマホにアドレス打ち込んだり、タップしなくてもOK！チラ見でOK！！ 検証作業のストレスが、圧倒的に軽減されます。 あと、ほかのサイトは、スマホ対応、どうしてるんだろうかといったとき、 Chromeでチェックすれば、デバイスでもすぐに表示されるので、他サイトの検証にも役立ちます。 ちょうどリアルタイムで、スマホ対応で泣いている僕に、希望の光をくれたこのソフトのために、 導入方法を紹介したいと思います。 ちなみに、デバッグ機能もあるの

シンプルな矢印アイコンセットを公開・配布します。 もともとは個人的にちょこちょこ作成してきたものを、まとめてみました。 Fireworks用のPNGファイルと、Photoshop用のPSDファイルを用意したので、 自由にデザインワークで使ってください。 特徴 25種類×10サイズ 矢印アイコンのフリー素材は、ネットにたくさんありますが、 このアイコンセットでは、25の基本シェイプをベースに、それぞれ10サイズづつ用意してます。 各サイズごとに、ピクセルを最適化し、どのサイズにおいても、シャープに見えるように調整しています。 背景付き、枠付きなど、別パターンも収録 アイコンを使う場合は、裸でつかうより、四角背景の白ヌキだったり、 枠付きで使う場合も多いので、それぞれ、代表的なデザインで用意しました。

About This Site HTML、CSS、Javascript、デザイン、3D、モバイルアプリ、CMSなど、ウェブ制作関連の話題を扱うブログです。Fireworksのオリジナル拡張機能の配布や、デザインリソースの配布、オリジナルツールの公開も行っています。 About Me 大阪在住フリーのウェブデザイナーの、ピクセルイメージ田中です。長年、ウェブサイト構築のお手伝いを行っており、デザインやプログラムを中心に、Flash全盛期につちかったモーショングラフィクスのセンスを生かした動画作成や、サイト構築に便利なCMSの開発も行っています。

Fireworks用のスライス関連の機能をまとめた拡張パネルです。 以前、スライス関連のコマンドはアップしましたが、 UIかぶせて、スライスコード出力の機能も追加しています。 スライスの作成・名前付け、コード出力など「PI_Slice」 複数スライスの一括作成 複数スライスの一括画像フォーマットの設定 連番ベースでの名前づけ 独自の値配列による名前づけ 複数スライスの一括リサイズ 複数スライス名の一括設定 複数スライス名の一括変更 複数スライスコードの一括出力(クリップボードにコピー) スライスコードの出力について 今回のパネルは、選択しているスライスの情報をもとに、HTMLやCSS用のコードを 生成・コピーする機能を実装してて、画像まわりのコード作成を楽にしてくれると思います。 初期設定では、HTMLやCSS用のテンプレートがありますが、 5件まで編集・保存可能なので、自分好みにカスタマ

Fireworks用のテクスチャコレクションを作成しましたので、公開します。 地味すぎて、数も半端ですが、地味に使えるかもしれません。フリーです。 テクスチャプレビュー ダウンロード MXPファイルになってますので、ダウンロード後、「PI_TextureCollection.mxp」をクリックすれば、 EXTENSION MANAGERが起動し、すべてのテクスチャを一括でインストールできます。 使用制限はとくにありません。 商用利用もOKです。じゃんじゃんつかってください。 テクスチャ管理パネルも同時につくりました テクスチャいっぱいインストールしても、こんまいセレクトボックスで選択せんといかんので、 普通にインストールするだけでは、劇的に使いづらくなるだけです。 そんなときのために、テクスチャ選択のストレスを劇的に改善する、拡張パネルを作成しましたので、 こちらも合わせてインストールして

Fireworksのスライスで書き出した画像を、Flashにインポートする拡張パネルで、 Fireworksパートと、Flashパートとの、2つのパネルからなります。 Flash用の画像切り出しに、Fireworksを使ってるかたには、かなり便利だと思います。 面倒な画像のインポート・ステージ配置・名前付けを自動でバーとやってくれるので、 より、クリエイティブな作業に集中できます。 私は、これがないと、Flash作る気がしません。 ちなみに過去にも同様のパネルを公開してますが、 それのバージョンアップ版になります。 FireworksスライスをFlashへ「PI_FW2FL」の機能 複数の画像を、一括でインポートします インポートした画像は、自動的に、MC化されます MC化された画像は、自動でステージに配置。XY位置も反映れます ライブラリには、インポートごとに、日付ベースのフォルダ名に配

Fireworks用のテキストオブジェクト生成パネルを作成しましたので、公開します。 たまに、いてますよね。なんでもイラレで作る人。デザインをはじめ、ちょっとした資料・指示書まで。 私の場合は、あらゆるものを、Fireworksで作成してるのですが、 そんなヘビーユースを支えてるパネルくんを、紹介・公開したいと思います。 4～5年前から使ってるんですけど、これがないと、仕事する気がしません。 テキスト生成パネル「PI_TextGenerator」の機能 テキストデータから、改行やタブをもとに、複数のテキストオブジェクを生成します。 複数行や、タブ区切りによる行列データにも対応しており、一発でテキストオブジェクトを生成できます。 用途 デザイン作業の下準備として Fireworksでデザインを行うときは、通常は、ワードなり、エクセルなりの 原稿データから、テキストをひとつひとつコピペしていく

本日、3つ目のエントリーなので、ちょっとぐったりです。 最後は、Fireworks用こまごまパネル「PI_Utility」の紹介・公開です。 Fireworksをもっと便利に、使いやすくするパネルです。 これまで公開してきたパネルと、結構かぶってますが、見せ方が違います。 機能 Fireworksの機能を拡張するようなものはありません。 よく使う機能を、ひとつのパネルにまとめてみました。 こまごました機能がたくさんあるので、ページ下部のビデオチュートリアルのほうで、 ざっと、ご確認ください。 ScreenShot&パネル解説 ビデオチュートリアル 実際の使用方については、こちらにて確認できます。 ※音無し、キャプション説明なしで、しかもせわしないです。すいません。 ダウンロード MXPファイルになってますので、ダウンロード後、「PI_Utility.mxp」をクリックすれば、 EXTENS

Fireworks用のテクスチャ管理パネルを作成しましたので、公開します。 以前公開した、フォント一覧管理パネル 「PI_FontList」と使用法はまったく同じです。 フォント一覧管理パネル「PI_FontList」完成(FW,FL,PS,AI) 使用されてない方は、こちらも合わせてご使用ください。 テクスチャ管理の機能 Fireworks上で、テクスチャを管理し選択オブジェクトに適用するほか、 ついでにこまごましたものも、管理できます。 テクスチャ グラデーション ブレンドモード カラー パターン あと、検索したり、マークしたり、無駄に高機能です。 ScreenShot 対応バージョン FireworksCS4以上です。 ダウンロード MXPファイルになってますので、ダウンロード後、「PI_TextureList.mxp」をクリックすれば、 EXTENSION MANAGERが起動し、

マシンにインストールされているフォントから、フォントカタログ画像を作成するFlashです。 カタログ画像は、保存したり、メール送信することができます。 結局、どんなフォントが入ってるんやっけ? なんとなくしか把握できなですよね。マシンにインストールされてるって。 海外のフリーフォントとかいれだしたら、カオスです。 で、半年ほど前に、Adobe系ソフト用のフォント管理ソフト作ったわけですが、 フォント一覧管理パネル「PI_FontList」(FW,FL,PS,AI) これは、フォント選択するさいに便利ですが、もっとビジュアルに確認できる、 自分専用のフォント見本帳があれば、ええんちゃうかと思い作成しました。 フォント見本画像作成Flash "PI_FontCatalog" 以下のリンクより、使用できます。

ipadを入手していらい、一番さわってるアプリはサファリです。 サファリは、ようできたブラウザだと思います。うっとりです。 ブックマークレットを作ってみました しかし、少しさわってて、気になる箇所があるのも事実。 サファリでもブックマークレットが使えるので、勉強がてら、ブックマークレットパネルをつくってみました。 機能 以下の機能を実装してます。 機能1:ページ横幅を広くする サファリは、ページの拡大はできますけど、縮小表示はあまりできないですよね。 ページの横幅よりも、縮小することはできません。 しかし、長いページだと、ページをもっと縮小して、全体を眺めたいですよね。 ブックマークレットでは、ページの横幅を強引に広げることにより、縮小表示を実現しました。 機能2:ページ内の明るさを変更 長文読むときは、ちょっと暗くしたほうが読みやすいですよね。 ブックマークレットでは、明るさを暗い方へ変

※Light版を追加したので、エントリーを全体的にアップデートしてます(2010/04/14 )。 以下のエントリーのつづきです。 オリジナルツール / フォント一覧管理パネル 「PI_FontList(AI用)」を作りました。 前回はAI用だけリリースしましたが、今回は、以下のバージョンをリリースします。 機能限定、軽快動作のLight版も追加してます。 Fireworks CS4用 Flash CS4用 Photoshop CS4用 Illustrator CS4用 CS3の場合は、アプリごとに動いたり、動かなかったりして、検証が大変なので、CS4以上としています。 もうすぐ登場するであろうCS5については、当然、未検証です(たぶん、いけると思うけど)。 ■ScreenShot 通常版「PI_FontList」 Light版「PI_FontList_Light」 ■「PI_FontLi

先日、仕事で、FLASHの細かいマイナーバージョンの検証を行うため、 ADOBEのサイトを、いろいろ調べたのですが、 なにせ膨大かつ劇重なADOBEサイトから情報を探すのは大変です。 というわけで、ADOBEサイト内のFlashPlayer関連の情報をばまとめてみました。 FlashPlayer インストーラ＆アンインストーラ FlashPlayer ダウンロードページトップ いちおう、トップのページなので掲載。 最新のプレイヤーを、単品（WinのIE用とか）でダウンロードできます。 Adobe Flash Player - Downloads 最新のFlashPlayer ダウンロードページ いわずとしれた、getFlashのページ。最新のFlashPlayerがダウンロードできます。 Adobe - Adobe Flash Player 過去のバージョンのFlashPlayer ダウン