62
dpiの解像度別ピクセルpx計算ツール[dpipx]がiPhone6PLUS対応しました。
http://www.kenjisugimoto.com/dpipx/iPhone6PLUSでは解像度が@3xの新しく登場しましたので、今も急ぎで対応をしている方も多いと思います。その際にReitnaから計算するのに時間がかかってしまいますが、dpipxでRetinaの部分に数値を入力すれば、簡単に@3xが計算できますので、ぜひご使用ください。
Works (制作)の最近のブログ記事
61
スマートフォン対応の坪•畳•平米(㎡)計算/変換ツールを作ってみました
自分も平米で覚えていたけど、○○畳って言われると、「うーん」となってました。
AppStoreで坪•畳•平米(㎡)計算/変換アプリを探したけど、有料だったりしたのでブラウザで作ってみましたので、ぜひご使用ください。
60
iPhone/Androidアプリのレビューを依頼できるサイト5選[個人開発プロモーション]
個人アプリ開発者の悩みとして、リリースしたけど全然ダウンロードがされない。。という事が必ずありますよね。
確率は低いですが、メディアに取り上げてもらえれば、より多くの方にインストールをしてもらえる可能性が一気に高まりますので、ぜひ試してみましょう。
たのしいiPhone！ AppBank
iPhoneアプリ/最新ニュースを探すならmeet i
Touch Lab - タッチ ラボ
アプリ学園 ～おすすめiPhoneアプリを君にっ!!～
産経アプリスタ
アプリのレビューを依頼する時のポイントとしては、「AppBank へのレビュー依頼について」を一読すると非常に参考になります。
それ以外にも、
•書いてほしいライターさん名指しでお願いしてみる
•休前日に送ると週明けにまとめて見るため埋もれてしまうので、月曜〜木曜の午前中くらいにレビュー依頼を送る
というのもいいかもしれませんね。
58
闘技場ライト対戦募集版-ドラクエモンスターズスーパーライト(DQMSL)を用意しました
闘技場ライトが開幕になったけど、いまいち対戦相手がみつからない。。。そんな方はここを参照して、マッチングしてみましょう！
※リアルタイムで更新されます
57
iPhone(Safari)でステータスバー/ツールバーを消す方法[iOS7.1- /viewport minimal-ui]
iOS7にアップデートされた際に、mobaile Safariでステータスバー/ツールバーを消すフルスクリーン対応にすることがほぼ完全に不可能になっていました。しかし、今回のiOS7.1にアップデートのタイミングで viewport に minimal-ui を追加するだけで、mobaile Safariのステータスバー/ツールバーを消す事が可能になりました。
具体的な指定は以下になります。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
sample
※ステータスバー/ツールバーを表示させるには、縮小版ステータスバーをタップすると表示されます。
※戻る/進むなどのツールバーも消えてしまうので、ユーザービリティが低くなる点も考慮して、設定をしてみてください。
56
[iPhoneアプリ]今こそ乗り換えるべきiOS7/フラットデザイン対応のQRコードリーダー
iOS7に対応したシンプルで使いやすいQRコードリーダーをリリースしました。
たくさんのQRアプリがありますが、もしAppleが純正のQRリーダー機能を付けたら、どう実装されるかを意識しています。UIは当たり前ですがiOS7に対応させ、読み込んだQRをSafariでもChromeでも選べるようにしましています。
特徴としては、
■徹底的にシンプル
アプリ起動と共にカメラが起動し、印刷されたQRコードや画面上に表示されたQRコードを瞬時に読み取り、内蔵ブラウザで表示します。
■履歴機能
直感的に分かりやすいスクリーンショットの履歴ページを用意いたしました。
■お気に入りのブラウザの選択
SafariやChrome、みなさんそれぞれの好みでメインブラウザを決めていると思います。QR Readerは内蔵ブラウザからsafariとchromeを起動して確認することもできます。
54
[illustrator CC]複数アートボートでの座標を単体のアートボード内座標に変更する
ほぼ自分用メモですが、illustrator CCで、複数のアートボードで作業をしていると、2個目や3個目のアートボードで座標が大きくなっている現象がおきます。
例えば、
---------------------------
アートボードサイズ：640px
間隔：40px
---------------------------
の場合、
アートボード1の左上に配置したオブジェクトのX座標は0ですが、
アートボード2の左上に配置したオブジェクトのX座標が680pxになってしまう場合です。
↑これは定規の基準がウィンドウ定規になっています。
各アートボード内での座標にしたい場合は、アートボード定規に設定をする必要があります。
設定方法
表示 > 定規 > アートボード定規に変更
で変更することができます。
52
PNGファイルサイズを圧縮/軽量する方法[ImageAlphaとImageOptim編]
ブラウザのPNG対応も進み、透過PNGを使うのも怖くない時代になりました。
スマートフォンサイトでは、jpgよりもPNGを使用しておいた方が画像のレンダリングでのバグは安全です。（Retinaサイズに対応する場合に正確に2倍にしてない画像をiOS5/safari環境で縮小するとjpgではレンダリングバグが発生します）
ファイルサイズを軽量化することはWeb/アプリ製作においては基本中の基本です。
ではPNG時代の軽量化はどうすれば良いのか？
自分は下記の2種類のアプリケーションImageAlphaとImageOptimの2つのアプリを使って軽量化をしています。
http://pngmini.com/
ImageOptim
http://pngmini.com/
使用方法
- まずは、ImageAlphaを使用します。
ImageAplhaはPNG画像の減色を行いますので、色数が多い画像に対しては、かなりの容量を減らせます。また透過PNGにも対応。 - ImageAlphaを使用した画像をImageOptimでさらに圧縮します。
ここで大事なのはImageAlphaが減色ツールだったのに対して、ImageOptimはメタデータを削除し、画質を劣化させずに画像データを軽量化・最適化する事です。
そのため、必ず順序はImageAlpha → ImageOptim の順番で行わないとImageOptimの意味が無いです。
ぜひPhotoshopやIllustratorから、「Web用に保存」したスライスをそのまま使用してる方は、試して、より最適化されたWeb製作に役立ててみてください。
51
[iPhoneアプリ開発者の方向け]iicon | iOS/iPhoneアプリアイコンギャラリーサイトに掲載するiPhoneアプリを募集します。
iiconではiPhoneアプリ開発者の方向けに掲載したいアプリを募集しています。
特に個人開発者の方で無料で宣伝をしたい方はぜひご活用ください。
ご応募詳細は下記URLに掲載をしていますので、よろしくお願いします。
iicon | iOS/iPhoneアプリアイコンギャラリーサイト
[AppRank] itune RSS Feed Generatorを使用して世界中のAppStoreランキングがスマートフォンで見れるサイト作りました
http://apprank.kenjisugimoto.com/以前から欲しいと思っていたAppStoreのランキングを見れるスマホサイトを作ってみました。今日バージョンでは、まだβのβ版という感じですが、とりあえず閲覧だけは出来る様になったので、ひとまず公開です。
アプリデータはiTunes RSSフィードジェネレーターを使用して取得しています。
- iTunes RSSフィードジェネレーター
https://rss.itunes.apple.com/jp/
通常はxmlデータになってしまいますが、URLの末尾をjsonに変更するとjsonデータも使用できます。
EX.https://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json
アクセスはレスポンシブ対応はしていなので、QRからお願いします。
41
ゆーすけべーさんのTwitPic Stream (ja)を勝手にプチバージョンアップしてみた
本家TwitPic Stream (ja)
http://picstream.pulpsite.net/
最近、ゆーすけべーさんのTwitPic Stream (ja)を見つけて
視覚的にTwitterを見るのがおもしろくって、
自分なりに何か出来ないかなって思ったので、
勝手にプチバージョンアップしてみました。
プチバージョンアップ
TwitPic Stream (ja)
http://www.kenjisugimoto.com/twitpicstream/
-------------------変更点-------------------
□デザイン周りを変更しています
□表示件数を追加しました
件数以上の「列」をfadeOut()させて、
Callbackで対象divを.remove()させています。
-----------------------------------------------
当たり前ですが、ここでは広告を削除しています。
ページ下の著作権はゆーすけべーさんのままです。
ゆーすけべーさんの元記事はこちらです。
http://yusukebe.com/archives/10/02/12/021719.html
39
35
グリッド計算ツールGridpxにレイアウト機能を追加しました。
Gridpx betahttp://www.kenjisugimoto.com/gridpx/index.html
作成したグリッドサンプルに、実際のテキストや画像を配置できることで、デザインを行う前段階で、どのような組体裁になるかを確認することができるようになりました。
テキストと画像は変更可能で、画像は読み込みたい画像のURLを記述することで表示されます。
また、[Calculate]ボタンの下に[Grid]と[Preview]ボタンを追加し、描画モードの変更機能も付けています。
現状では配置出来る要素が、
テキスト * 2つ
画像 * 1つ
だけですが、ボタンやフォームなどのパーツを増やしたり、
フォントサイズを変更機能などをつけていく予定です。
ただ、この3つの要素をいかに上手く配置するか、
少ない要素で上手にレイアウトをするのも良い勉強になると思います。
[Web便利ツール]Webデザイナー/web制作者向け：グリッド計算ツールGridpxを作ってみました
Gridpx betahttp://www.kenjisugimoto.com/gridpx/index.html
グリッド分割を計算していると、うまく割り切れなかったりで、時間がかかってしまう時があります。
そもそも、面倒くさいと嘆く人もいたりしますが、そんな方向けに作ってみました。
使い方
[1] 作成したいコンテンツの幅を入力します
[2] 分割したいカラム数を入力します
[3] カラム間のマージンを入力します
（キーボードの↑と↓で数値変更+関数実行します）
計算の苦手な方はぜひ使ってみて下さい。
IEでletter-spacingを設定すると＜br＞が正しく表示されないバグ
めったに使わないCSSのletter-spacingですが、FlashをHtml化する作業の時に悩まされたバグです。。
ブログでは文章を改行（空行）させる時に<br><br>で改行しています。一文をただしくコーディングするなら<p>を使用しますが、<br><br>になっている事が多いです。
その時にletter-spacingを設定していると
----------------------------------
（通常時）
あのさ<br><br>実は...
↓（レンダリングすると
あのさ
実は...
----------------------------------
（letter-spacing設定時）
あのさ<br><br>実は...
↓（レンダリングすると
あのさ
実は...
となる訳です。
（解決策）
<br>で改行（空行）をとっている場合、brタグに対してletter-spacingを、
br{
letter-spacing:0;
}
とbrタグにだけ、letter-spacingを0を設定すると解決します。
こういうバグ対策で時間を取られるのは、かなり損をした気になりますね。。
18
[Web便利ツール]文字数カウント/文字数カウンター:あとnumMojiなんもじ を作ってみました
あとnumMoji(beta版)
http://www.kenjisugimoto.com/atonummoji/
あとnumMojiは、文字の制限数を入力して、逆算でカウントができます。まだbeta版ですが、コアの機能は使えるので、公開しました。
こっそりアップデートしていきます。w
16
JSで5秒ごとにありがたい気持ちになるMiwaqulockを作ってみました
http://www.kenjisugimoto.com/testjs/miwaqulock/miwaqulock.html運がいいと、さらにありがたくなります。
（単純な作りなので30分くらいで出来ました）
15
文字カウント/文字数カウンター:numMojiに選択範囲の文字数カウント機能を追加しました。(FirefoxとSafariのみ)
時々、自分で使うんですが、選択範囲の文字数がカウント出来たらいいなあと思える時がありましたので、機能を追加してみました。
FirefoxとSafariのみですが、是非お使いください。
numMoji
追記)
空白、改行がカウントされていました。。
とりあえず、そこを踏まえてお使いください。そのうち直します。
FirefoxとSafariのみですが、是非お使いください。
numMoji
追記)
空白、改行がカウントされていました。。
とりあえず、そこを踏まえてお使いください。そのうち直します。
14
[Web便利ツール]文字数カウント/文字数カウンター:numMojiなんもじ を作ってみました
http://javascriptの勉強がてらに、文字カウントツールを作ってみました。
他の文字カウンタとの違いは、CGIを使わずjavascriptなので、リアルタイムに文字数が反映されます(onKeyUp)、また半角英数字を2文字(1文字 1バイト)=全角1文字(1文字2バイト)の計算も出来るので、メルマガなどの厳密な文字制限がある場合に便利だと思います。あと改行はカウントしません。（当初は付けてましたが、いるのかなあ？）
あれもこれも機能を付けたくないので、最低限のこれくらいでいいかなと思っています。
11
arti 2008 spring & summer collection：東京かんかん 作りました。
http://www.kankan.co.jp/arti/spring_summer2008/index.html紙からWeb用に作り直したカタログサイトですが、商品サイトの様に作りました。コンセプトは「いたって普通で、見やすい」です。
こういう商品サイトは掲載数が多いから、リサイズとかの機械的な作業が大変だということを知りました。。（仕事では、システムに渡す為のテンプレート作成が多いので。）
時間が無い中で、それなりに良く出来たかなと思います。デザインからマークアップまで計5日くらいで終わりました。（実際は土日しかやらないので、3週間かな）
制作の話ですが、このサイトではheightLine.jsというライブラリを使用しています。
ブロックレベル要素の高さを揃えるjsライブラリです。
要するに、CSSで組むと隣り合うブロックの高さが揃わないのです。それを解消する為に使用しました。（中ページでページが読み込み終わった瞬間に、ガクッと揃います。）
制作の話ですが、このサイトではheightLine.jsというライブラリを使用しています。
ブロックレベル要素の高さを揃えるjsライブラリです。
要するに、CSSで組むと隣り合うブロックの高さが揃わないのです。それを解消する為に使用しました。（中ページでページが読み込み終わった瞬間に、ガクッと揃います。）
3
Mac風の壁紙を作ってみました。
とあるPCメーカーさんのビジネスモデル向けの壁紙を制作したのですが、その時に作ったうちの一つです。
もちろんWindowsのPCなので、社内選考の時点でダメでしたがw その代わりに作った、もう一案の方が実際に採用される事になったので良かった。。リサイクルとして、どっかの壁紙サイトに投稿しようかと思ってます。
9
Photoshop Webデザイン役立ちブラシセット
ダウンロードはこちらから>>brushes_for_web.zip
==使用方法=========================
1. アプリケーション＞Adobe Photoshop CS2＞プリセット＞ブラシ に入れます。
2. ブラシツールの設定（小さい矢印）から、【ブラシファイルの読み込み】で使用します。
==================================
==セット内容説明====================
【角R】
角Rが一発で作れます。角の大きさが4pxから12pxまで、9パターンを用意
【1*1 1*2 1*3 1*4 2*1 2*3 2*5】
1pxのドットラインが簡単に作れます。Shiftを押しながら描画してください。
例えば、 1*1は、1pxラインに空きが1pxのドットライン。 1*2は、1pxラインに空きが2pxのドットライン。
【網点】
網点のテクスチャを12パターン用意。無限ループ対応。
【カラーハーフトーン】
上記の網点に似たものですが、フィルタのカラーハーフトーンで作成した大きな網点バージョンが4パターン出来ます。無限ループ対応。
【1px斜 5px斜 10px斜】
1px 5px 10pxの斜めのドットラインが作れます。
【apple（関連）】
おまけです。
アップルサイトの上部タブ部分が1分以内に作れてます。
==================================
web制作者の方には、とても役立つブラシセットですので、ご自由にお試しください。
