illustratorでUIデザイン：画面遷移図作成スクリプト - Two hats
illustratorでUIデザインをし始めると便利だなーと思うところが幾つかあります。 その内、個人的に押しなのは「アートボード」です。 1つのファイルで複数の画面を作成・管理することができ、一覧性が高いのでアプリの全体を俯瞰しつつ１つ１つの画面を作成していくことができます。 但し、単に画面が並べてあるだけなので画面遷移図のような並びにできたら便利だろうなと思いついてスクリプトを作成してみました。 画面遷移図.jsx Githubにもアップしてみました。github.com 使い方 例として、画面検討するためにワイヤーフレームの画面構成図をillustratorで作ったとします。 単に作っただけだと下図のように並んでいるだけです。 1.アートボードに画面遷移図用のタグをつける 「パネル>アートボード」でアートボードパネルを開き、名前にタグを埋め込んでください。タグと言っても難しいことはあ
jQuery animateのstep関数を便利に使う | _level0 - KAYAC Front Engineer Blog
こんにちは。HTMLファイ部の岩淵です。 はじめに 皆さん、jQueryのanimateメソッドを使おうとしたときに、「ちょっとこれはanimateできないなぁ...」と困ったことはありませんか？ 例えば、Google Maps APIの setPosition(new google.maps.LatLng(lat, lng)) みたいな、変数をセットする関数を実行しなければいけないとき。 例えば、CSS3の transform: translate(50px, 20px); のように、transformの値を変化させるとき。 そんなときはjQueryのanimateを使わずにsetIntervalを使ったりして代用するところですが、 終了判定をしてclearIntervalを叩くのは面倒ですし、 animateを使うことによりcompleteで終了時の関数を実行したりイージングを付けられ
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
スクロール完了（停止）の検出と、フローティングメニューの実装
案件対応中に、画面のスクロールに伴って画面左（もしくは右）に配置したメニューが追従してくる「フローティングメニュー（エレベーターメニュー）」の実装を検討しました。Google検索でjQueryプラグインを探すと、3年ほど前から更新されていないプラグインや、jQuery公式サイトのPluginsから消えてしまっているプラグインばかりでしたので、サンプルスクリプトを公開します。 本サンプルをたたき台としてご利用頂ければと思いますが、「いいね」が多いようでしたらプラグイン化も検討してみたいと思います。 スクロール完了（停止）の検出...カスタムイベント「scrollFinish」について スクリプトの大枠は「windowオブジェクトのscrollイベントを検出したら、メニューの移動を実行する」という簡単なものですが、画面をスクロールしている間は常にscrollイベントが発生しています。そのため、
Adobe Photoshop CS6自動化作戦
このページはAdobe Systems（アドビシステムズ）社のPhotoshop CS6をJavaScriptによって自動化運用するためのサンプルスクリプトを掲載しています。サンプルはMac OS X (10.6.8)上で動作させたものです、このためWindows上での動作とは異なる可能性があります。また、3月24日時点ではPhotoshop CS6はβ版としてAdobe Systemsが配布しているため正式版では動作が異なる場合があるかもしれません。あらかじめ、ご了承下さい。 Photoshop CS6は基本的には以前のCS1〜5からの延長上にあります。このため、JavaScriptのコアオブジェクト、Adobeファイルオブジェクトに関しては他のAdobeソフトと同じです。つまりInDesign CS〜CS6、AfterEffects 6.5〜CS6、Illustrator CS2〜CS
Adobe CS6 バージョンJavaScript ファレンス
<body> <h1>Adobe CS6 バージョンJavaScript ファレンス</h1> Last update : 2012/3/24 PM 9:52<br> <br> <div class="description"> Adobe Systemsから発売されているアプリケーションはJavaScriptによって制御することができます。旧マクロメディア製品であるDreamweaver、Fireworks、Flashはベースが異なるので、ここで掲載しているサンプルは動作しません。これ以外のPhotoshop CS6, InDesign CS6, Illustrator CS6, Bridge CS6, ExtendScript Toolkit CS6、AfterEffects CS6、Encore CS6、Premiere CS6、MediaEncoder CS6などはアプリケーション
雪待夜: Photoshopのレイヤー表示状態を操作するスクリプトあれこれ
以前の記事のスクリプトを使ってくださって人から 全てのレイヤーを「表示」状態にするスクリプトをリクエスト頂いたので書いてみた Show_all_layers.jsx #target photoshop //レイヤーセットを辿るための関数 function follw_LayerSets(parent){ var ChildLyaers= parent.layers; for (var i = 0; i < ChildLyaers.length; i++){ if (ChildLyaers[i].typename == "LayerSet"){ //レイヤーセットの場合の処理 //再帰処理 follw_LayerSets(ChildLyaers[i]); } ChildLyaers[i].visible= true } } app.bringToFront(); //ドキュメントが開かれてい
【便利ツール】CSScomb for sublime text 2で、CSSプロパティを整理・整頓【16日目】 | DevelopersIO
Sublime text 2で使ってみる 最近、注目されているSublime text 2にお世話になっているので、今回はSublime text 2の手順で作業してみようと思います。 それでは早速CSScombのプラグイン（パッケージ）をインストールしてみましょう。 Sublime text 2の詳しい説明は下記をご参照ください。 【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】 CSScombプラグインのインストール Sublime Text 2を立ち上げたら、プラグインをインストールするべく、お約束のコマンドパレットを開きます ショートカットは「Ctrl+Shift+p」です。 次に、「Pakege Control: Install Pakage」を実行し、インスールしたいプラグインを探します。 CSScombと入力すると該当
jQuery.getScript()を使えば、javascriptの読込みタイミングを指定できそう - end0tknr's kipple - web写経開発
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-lazy-loading-script.html http://www.webrevised.com/169-jquery-lazy-loading-script-on-demand-javascript-plugin/ ↑このエントリで紹介されている「Lazy Loading Script」は、javascriptの読込みタイミングを指定するものですが、内部的には jQuery.getScript() を呼んでいるだけです。 ※Lazy Loading Scriptのsrcは↓これだけ。 (function($){ var my_lazy_loader_loaded_files = new Array(); //Will hold al
Easy Ways to Reduce Noise in Your Images
2013年3月25日 Photoshop 暗い場所や室内で取った写真はノイズが入りやすいですよね。画像を補正する際、意外とやっかいだったりします。Photoshopには「ノイズを軽減」機能もありますが、なんだかあまり変化がなかったり…。そんなノイズを簡単に軽減する方法をいくつか紹介します。ビフォー・アフターの差にびっくりしちゃうと思いますよ！ ↑私が10年以上利用している会計ソフト！ Neat Image Neat Imageは画像のノイズ除去を自動で行なってくれるソフトです。Windows、Mac、Linuxで利用でき、Photoshop用のプラグインも使うことができます。無料版と有料版があり、無料版では大きなサイズと商用利用は不可です。今回は無料版を試してみました！
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
Fireworks のコマンド « きんくまデザイン
こんにちは。きんくまです。 しかし、あれですね。JavaScript恐るべしですね。なんちゅーかあなどれないというかなんというか。 今はPrototypeをさらっと触ったあとに、jQueryを勉強してるところです。 JavaScriptは、オブジェクト指向もできるし、カスタムイベントなんかも登録／解除できるし、イージングも例のやつを一通りできるので、ASやってたひとなら、結構簡単にJSもあやつれるようになるんじゃないかなと思います。 書き方がちょっと慣れない感じもあるんですが、それはAS2→AS3のときみたいな感じを思えばおんなじようなものかと。 たまたまお仕事でJSのスライドショーみたいのをこれから作る機会を得たので、また何かわかったら書いてみようと思います。 で、Fireworksの拡張機能についてです。 私みたいに「ここのところをコマンド化できれば、、、。」なんて思いながらやっている
[JS]jQueryのプラグインを開発するためのテンプレート -jQuery Boilerplate
jQuery Boilerplate [ad#ad-2] jQuery BoilerplateはjQueryのドキュメント「Plugins/Authoring」から、より良いパフォーマンスとメモリ使用を提供することを目標として開発したとのことです。 jQuery Boilerplate (stripped version) jQueryのプラグインのテンプレート(stripped version)です。 ※2011年7月26日現在のものです。 (function($) { $.pluginName = function(element, options) { var defaults = { foo: 'bar', onFoo: function() {} } var plugin = this; plugin.settings = {} var $element = $(element)
jQuery プラグインを書くための資料と便利ツール - わからん
次の3つが役立っている。最近実際にいくつか読んでいるけど、複数ブラウザ対応していたり、完成度の高いものばかりというわけではないんだなと知った。そのことにネガティブな印象はなくて、そのまま使えるものじゃなくても、公開して頂けるだけありがたいといった気分。どうせなら GitHub に置いてくれれば、気軽に修正の報告ができるしいいなとは思った。 http://docs.jquery.com/Plugins/Authoring 公式サイトの Plugins/Authoring というセクションに丁寧な解説がある。 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ テンプレ。コメント付きのほうを一度読み下すだけでも、ためになった。わざわざこのネタのための RSS フィード もあった。 http://jquery.cod
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
iScroll – Matteo Spinelli's Cubiq.org
The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now. This script has been superseded by iScroll 4. This page is kept for historical reasons. Get the Script Screencast Live Demo Publi
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FireworksのレイヤーパレットのWebレイヤーって表示の必要ある？ - dwlog.net