ワイヤーフレームやモックアップ・プロトタイプ作成にJustinmind Prototyper

Justinmind Prototyper

Justinmind Prototyper

行きたいライブのチケット争奪戦に敗れ続けて辟易している、JETBABY管理人です。Yeah。

今回はウェブサイトやアプリなんかのプロトタイピングツールのご紹介。

Justinmind Prototyper 6

結構お気に入りなんですが、あまりメジャーじゃないので紹介しとくかなと。

他に似たような普段使っているツールといえばMicrosoftのVisioとかCacooとかでしょうか。
でもワイヤーフレーム作るときも使い慣れたIllustratorやPhotoShopのほうが多かったりもします。

なんですが、このPrototyper 6も最近はよく使ってる次第です。
特にバージョンが6になってからでしょうか、その前のも使ってましたが。

さて、何で気に入っているかというと

  • ・デスクトップアプリ
  • ・ワイヤーを作りながら動くモックも作れる
  • ・サイトマップのイメージも自動で作ってくれる
  • ・無料でも十分使える(有料版もあるけど)
  • ・ウェブだけでなくモバイルアプリなんかでも。

あれ、あんまり特徴ない!?
他のアプリやサービスでもできること多いな。
個人的には・・・
PhotoshopなんかのAdobe系とMicroSoftのVisualStuidoの画面を足して2で割ったようなUI
なんてところも気に入ってはいますがこれはかなりニッチな意見だろうな。
俺は使い慣れている2つなんで。

バッドな点というか敬遠されそうなところとしては、英語だってとこでしょうか。
俺は英語気にしないでいいんですけどね。

あ、ちなみに英語の成績は驚くほど悪かったですよ。
みんなも気にしなければいいだけですYO、英語なんて。

こちらのサイトで日本語化してますね。古いバージョンの話なんで使えるかわかりませんが。
Prototyper Free を日本語化する

さて、簡単に説明。

初期設定では
iOS7、Android、WEB、グーグルグラス
に対応しているけどウィジェットを足せばWin8のストアアプリとかにも対応できるみたい。

基本の画面はこんな感じ。

Prototyper基本画面

要素をドラッグアンドドロップでぺたぺたして、作ったページ(シーン)をリンクしたりするだけ。

必要なだけシーンを作って、紐付けていけばモック&サイトマップが出来上がる次第。

適当な感じで企業サイトワイヤーを作ってみたりした画像がこちら。

企業サイトワイヤー

で、サイトマップを画像で吐き出させたのがこの画像。

サイトマップ生成画像

※仕事のときはもっとちゃんと作るんですよ・・・作ってると思う・・・

出来上がったモックは共有もできるしWordに書き出したりもできる。

共有するにはjustinmindのカウントを作る必要があるけどメアドだけでできます。
怪しいな、いやだなと思う場合はなんか適当にフリーメールとか作って登録してもいいかなと。
有名企業も使ってるよ的な宣伝ページもあったりするけど、どうなのかはなぞ。参考までに。

アカウント持ってる同士で共有するとモックの部分部分にコメント書いたりなんだりもできるわけです。

アカウントない人に見せるように設定することも可能ですが、その場合はコメントやらなんやらの機能は使えない。
ただ見るだけね。でもないよりいいね。

管理サイトで閲覧専用のURLを吐き出せるのでそれを教えればいい感じ。
https://www.justinmind.com/usernote/tests/12592133/12592136/12593286/index.html
上のリンクはサンプルで作ったモックなんでよかったらご覧あれ。直にリンクしていいか悩んだのでURLだけ載せます。
※とりあえずこのブログはそんなにアクセスないのでさらしておきますが、いつかそのうちある日アクセス数が増えましたらこのリンクは使えないようにしちゃうかもです。

アカウントつくるとjustinmindのサイトに専用のページができてアプリと連携していろいろできる。
専用ページはロゴとか色とかカスタムできたりも。
無料だとファイルをあげるのに使えるスペースが300Mまでみたいですね。

Justinmindの管理画面

ブログ用に作ったアカウントなんでぜんぜん容量使ってませんが、普通に使う分には問題ない容量かと。
これ超えるようならお金払えばいいって感じですわ、そんだけ使ってるならね。

Wordへの書き出しは資料作りなんかに役に立つかも・・・。うーん、たつかもってレベルですが。
要編集ですが、まぁ使えないことはないです。

Wordへの書き出し画面

HTMLにもできるみたいだけどChromeに専用エクステンションいれてみないといけないようだ。
有料にしたら普通にできるのかもですが。
とはいえ、個人的にはHTMLにするのは自分でするので特にどうでもいいといえばどうでもいい。

ということで機能が豊富すぎて細かく説明したらきりがないのでこんなもんで。
いや、ほんとここに書いたことなんて機能の一部ですわ。

ちなみにモックだけならinVisonなんかのほうが直感的だったりしますね。POPとかも。
画像貼り付けてリンク作るだけなんで。

ただ、個人的にはこういったデスクトップアプリのほうがしっくり来ちゃいます。
似たようなことはこいつでもできますね。画像をシーンに貼り付ければってかんじで。

では今回はここまで。
ウェブデザイナーさんもディレクターさんもプランナーさんだろうが営業だろうが、結構幅広くつかえると思うので一度いじってみてはいかがでしょう。

アクセス制限できるプラグイン「WordPress Access Control」の日本語化ファイルを作成しました

  WordPress Access Control 本家

人手が欲しいが金はない、JETBABY管理人です。どうも。

さて今回はの更新はWPネタ。
WordPress Access Control」はWordpressの各ページや投稿へのアクセス権限を管理できるプラグインです。
投稿が見れるのはこの権限、ページが見れるのはこの権限の人だけ、というやつですね。

使い方の説明は、日本語化ファイルを入れていただければメニューが日本語になるので不要かと思います。
それほど複雑な操作もないので。

こんな感じが

WordPress Access Control英語画面

こんな感じに

WordPress Access Control日本語画面

日本語化ファイルのダウンロードはこちらからどうぞ
WordPress Access Control日本語言語ファイル

日本語化の方法は何はなくともまず、「WordPress Access Control」をお使いのWordPressに適用してください。

その後、日本語化ファイルのZIPを解凍した中のwpac-ja.moを[wordpress-access-control]フォルダの中にある[languages]フォルダに入れるだけでOKです。

同じフォルダにあるwpac-ja.poは日本語翻訳をするための作業用ファイルなのでアップはしないで大丈夫です。
日本語訳が気に食わないなどのときはpoファイルをいじってmoファイルを作成してください。

他にも日本語訳がおかしいとか何かありましたらご連絡いただけると助かります。

また、プラグイン本体のほうのミスで一部言語ファイルが適応されない箇所などもあるようです。
私が作業したときの最新版、4.0.8で一部例をあげますと。

wordpress-access-control\templatesの中にあるoption.phpの142行目

<?php _e( ‘These options are defaults for posts and pages in case the majority of your posts and pages will have similar settings. You can override any of these settings on a per-post or per-page basis.’ ); ?>

となっていますが、正しくは

<?php _e( ‘These options are defaults for posts and pages in case the majority of your posts and pages will have similar settings. You can override any of these settings on a per-post or per-page basis.’, ‘wpac’ ); ?>

言語ファイル設定の’wpac’の記述が抜けています。
他にも同じような間違いがある部分がたしかありました。

また、281行目では

<textarea id=”page_excerpt_text” name=”page_excerpt_text” class=”large-text” cols=”50″ rows=”5″><?php echo get_option( ‘wpac_page_excerpt_text’, __( ‘To view the contents of this page, you must be authenticated and have the required access level.’, ‘wpac’ ) ); ?></textarea>

となっていますが、以下が正しいです。

<textarea id=”page_excerpt_text” name=”page_excerpt_text” class=”large-text” cols=”50″ rows=”5″><?php _e( ‘To view the contents of this page, you must be authenticated and have the required access level.’, ‘wpac’ ); ?></textarea>

行中のecho get_optionの部分が間違っているようです。
ちなみに262行目も同じよう間違いが。

他に何箇所かありそうですが割愛。

一応プラグインの作者様には言語ファイルを作ったよって連絡するついでに、バグも報告しますが、なにぶん英語がつたないので通じるのかは分かりません。

上記の本体ファイルの修正をすればとりあえずは日本語表示になりますが、プラグインがアップデートされたときにまた戻ってしまうんじゃないかな。
ですので、まぁ、そこまで気にしない人は修正することはないとおもいます。そんなに難しいことかいてないし。
(※日本語化ファイルには1項目だけ日本語化していないものがあります。日本語訳にするだけならできるけどどこに使われているのか場所が分からず、訳が正しいか確認できないので訳しませんでした)

最後に簡単に使い方の補足。

カスタム投稿タイプも管理できます。
作成したカスタム投稿が表示されるので、アクセス制限したい場合にはチェックを入れるだけでOK。
ただし、アクセス権限の設定については、ポストで作成したカスタム投稿タイプはポストの初期設定、投稿なら投稿の初期設定が適用されます。

設定画面 カスタム投稿とユーザー権限

なので、それらと別の設定にしたい場合はそれぞれ記事作成時や編集時に設定をしてやってください。

投稿画面のコントロール

User Role Editorなんかで権限作ればそれももちろん反映します。

他にもメニュー作成のときにも、メニューへのアクセス権限も設定でます。

メニュー設定

ということで簡単なアクセス制限ができるWordPressのプラグインの紹介でした。

クライアントワークだとアクセス制限とかの要望は結構あるので覚えておいて損はないはずです。

それではまた次回お会いしましょう。

レスポンシブウェブデザインのサイトを作るときにほぼ使うjQueryプラグイン

JB20140820_01

調子にのって今回もレスポンシブのエントリーを書いた、JETBABY管理人です。
海行きたい。

・・・レスポンシブウェブデザインでサイトを作るときに、なにはなくともこれだけは使うというjQueryのプラグインの紹介です。

と、とりあえずスマホがある場合はjQueryは2系にしたほうが、動作が幾分か軽いのでいいですよ。
IE8はこのさい最低限のコンテンツが見えるだけくらいにしてね。
プログレッシブ・エンハンスメントですね。

さて本題。
jQueryを使えばレスポンシブなさいとでも色々な動きを出せたり、リッチな表現ができたりは当然できる。

ですが、今回はそういったものでなくレスポンシブの根幹部分で作用するプラグイン。
有名なので知ってる方も多いでしょうが、個人的にレスポンシブでjQueryといえばこれなので。

それは何かというと

breakpoints.js

こちらです。

何するものかといえば、ブレイクポイントごとにイベントを設定できるというもの。
設定したブレイクポイントになったら、またはブレイクポイントじゃなくなったら、という動作を設定できます。

使い方はダウンロード先のGitHubのReadMeをみれば英語が分からなくても使えるくらい簡単。

最初にbreakpointsの値に必要なブレイクポイントを設定。
enterBreakpoint~でその値になったとき、exitBreakpoint~でその値ではなくなったときの動作を記述。それだけです。

前回のレスポンシブのサンプルサイトのうちOff Canvasでこのスクリプトを使っています。
別に使わなくてもと思う程度の使い方ですが、640px基点にナビゲーションの表示非表示をしています。

使い方は色々思いつくと思いますが、レスポンシブ時の画像の変更などを紹介しているブログもあります。

実際に俺もPCとスマホで画像を変更するときなどに使用することもあったり。
まぁ、あまり画像変更するならレスポンシブじゃなくて別のHTMLにしなよ、とも思うのでどうしてもというとだけの使用にとどめていますが。

さて他に前回のサンプルでは要素の高さを揃えるのでメジャーなheightLine.jsのレスポンシブ対応版、jquery.heightLine.jsも使用しています。
本来前回のレスポンシブのサンプル程度ではなくてもいいのだけど、こっちもこのエントリーで軽くふれたかったので使った次第。

最初に書いたみたいに見た目を華やかにするようなjQueryでレスポンシブに対応したものもたくさんあるので、それらも必要に応じて使用するといいと思うのです。
スライダーとかメイソンリー系とかなんとか

まとめ記事的なのもあるので参考にしたり。
他にググちゃえばいくらでもあると思います。

しかし、今回紹介したbreakpoints.jsはレスポンシブやるときには8割くらいの確立で使いたいなと思うものなので、紹介しました。

便利ですよ。

一つだけ懸念があるとすればプラグインがぜんぜん更新されていないことくらいでしょうかね。

レスポンシブウェブデザインを再確認してみる

JB20140818

お盆休みなんて特になかった、JETBABY管理人です。
ご無沙汰です。

最近レスポンシブなサイト制作をすることが重なっているので、ちょっと自分の中で再確認したいと思います。
今回から数回に分けて、レスポンシブサイトの制作についてまとめてみる予定。

ということで、レスポンシブ、レスポンシブウェブデザインとはどんなものや?というのを先ずはざっくり。

「HTMLはワンソースでCSSなどで画面幅によってレイアウトを最適化させる手法」

という感じでしょうか。

どんな種類があって、どんなメリットでメリットがあるのでしょうか。
簡単なサンプルを作ってみましたので、そちらをご覧くださいませ。

レスポンシブデザインの種類としては大きく分けて以下の5つがあります。

  • Fluid Grid(Mostly fluid)
  • Column Drop
  • Layout Shifter
  • Off Canvas
  • Tiny Tweaks

サンプルは種類ごとにページを作ってあります。
各種類がどんなものなのかもサンプルに記載しておきましたので、どうぞ。

レスポンシブウェブデザインのサンプルデモ

サンプルの補足として・・・

なによりもあくまでサンプルですという、逃げを先に謳っておきます。

このデモではHTMLの構造はすべて同じでCSSだけ変えています。
本来はレイアウトごとにHTMLの構造も変化させるべきだとおもいます。
3カラムの横並びもCSSでtabll-cellとか使えばもっと簡単にできます。flexboxとかでも同じく簡単にできる場合もありますが、まだまだ環境に依存する部分が多いので面倒なので使っていません。

ブレイクポイントの調整は細かくしていないので、若干レイアウトが狂う幅がすうピクセル単位であると思います。jQueryで左右のカラムの高さをあわせたりしてる部分で特に。

基本的にPC、タブレット、スマホといった形で画面幅にあわせて3段階でレイアウトが変わります。

とはいえ、モバイル実機では確認していません。実機確認は結構大変なので。うちにはAndorid1.6、Andorid2.3、Andorid4.0が2機、Andorid4.2、iPhone4s(iOS6)、iPhone5s(iOS7)、iPad(iOS6)、Win8.1タブとありますが、まぁ、どれもこれもちょっとずつズレたりと・・・。

最後になんかサンプルのメリット・デメリットにネガティブなこと書いてるんですが、レスポンシブデザインが嫌いなわけではない。むしろ好きだ。
でも使う意味は考えないと火傷するぜ!ということが言いたかったということをお伝えします。

ページングをキーボードで操作するJavaScript&jQuery

Keyboard Shortcuts for Pagination

Keyboard Shortcuts for Pagination

めずらしく2日続けて連続投稿のJETBABY管理人です。
といっても今回は手短に言っちゃう感じで。

さてさて、ウェブサービスやらブログやらによくあるページング、ページャー。
それをキーボードで操作できるようにしちゃうスクリプトの紹介です。

Keyboard Shortcuts for Pagination

デモ

スマホ全盛のいまどき?とか思うかもしれませんが、場合によっては使えるかもと思うので紹介。
一般の人向けのサイトやサービスというより、PCがなくてはならない技術者なんか向けのサイトとかではキーボードで色々操作できるのはありがたいのではないでしょうか。

正直俺はありがたい。
なんだかんだで1日にPCに向かって作業している時間が多いので。

ページングをカーソルキーの左右で移動させたり2回早押しで一番前や後ろに移動できる感じ。
JavaScript版とjQuery版(1系も2系もOK)が用意されているのも親切。

使い方は書くほど難しくもなくサイトに詳しく出ているので割愛。

今回は、まだまだPCだって捨てたもんじゃないんだぜ、という思いの投稿でもありました。
そんなわけでKeyboard Shortcuts for Paginationの紹介でした。

それではまた。

JETBABYオリジナル無料素材(美容・理容向け)

素材アレンジ例

はい、どうも。
出かけるときの電車の中で読む本と同時に聴く音楽のチョイスが最近しっくりこない、JETBABY管理人です。

今回は新たな試みで、自作の素材を無料で公開してみようかなと。 好評だったら今後も素材公開していこうかなと考え中。 欲しいと思う人がいたら勝手にどうぞ。

美容院・理容室向けのベクターイラストでこんな感じのもの。

美容理容無料素材サンプル

ファイル形式はai、eps、svgの三種類 作成はIllustratorCCで、aiは保存時にCS3でしています。

ライセンスや利用条件は・・・
面倒くさいので特にもうけない。
無料素材だし売るつもりで作ってないものでもないし。
自分のクライアントさんところで使ったりはしますが、クライアントからもこの分でお金もらったりはしてないし。

個人・商用・改変、お好きにどうぞ。 一応、著作権は放棄はしないけども。 あとは使用して何かあっても自己責任でお願いします。

ただし、再販は禁止とさせていただきます。 メディア掲載などの場合は御一報いただければと思います。

細かいことは一緒に入ってるreadme.txtに記載しています。

クオリティがとかファイルが使いにくいとかの苦情も特に必要ないですよ。

実際に使うときはちょっと手を加えてこんな風にしてもいいかなとか。

素材アレンジ例

※このアレンジはファイルに入っていません。念のため。

ダウンロードはこちらから。

と、上のボタン見て「おや?」と思った方にむけて、最後にダウンロードについて。

せっかくなんでこのできたてのブログを宣伝するのにこの企画を使わせてもらおうかと思います。
自分のTwitterやFaceBook、G+にコメントするとダウンロードできるという仕組みを使わせてもらうことにします。

お金は一切からないので安心してください。

Pay with a Tweet」というサービスを利用してみます。
今回の無料素材企画もこのサービスを前からちょっと試してみたかったってのもあります。 英語のサービスですが使い方はそんなに難しくないと思います。
※たまに文字化けとかしてるけど・・・。

素材をダウンロードするには今回のこの記事の中にある「Pay with a Tweet」というボタンをクリックします。

するとこんな感じの画面が出てくるので、自分が使っているサービスを適当に選んでクリックしてください。

 

Pay with a Tweet 01
※このサンプル画面ではTwitterを使っていますが他のサービスでも同じようなものです。

使用するサービスに既にログインしてサービスの認証承諾していると下のような画面が出てきます。
それ以外の場合は認証画面が出ると思うので認証してください。

Pay with a Tweet 02

Step1の「Click here to post on Twitter 」をクリックして、投稿します。

この段階でStep2に進んでダウンロードしようとクリックしてもダウンロードができなくなっています。
こんな感じで注意書きが出ます。

Pay with a Tweet 03

Step1で無事投稿を済ませると先ほどのStep2の「DONE!GAIN ACCESS NOW」をクリックして無事素材がダウンロードできるという仕組みです。

Pay with a Tweet 05

ということで今回はここまで。

さぁ、みんなでレッツダウンロード!!

スマホサイトに使いやすい軽量なシンプルなJavaScriptライブラリ

QuoJS

QuoJS

やたらお腹すいて困っている、JETBABY管理人です。いや、どうも。

今回はJavaScriptのライブラリのご紹介。

軽量かつシンプルかつスマホを考慮して作られている、QUOjs

フルサイズで30kbと軽く、タッチイベントが簡単に使えます。
Mobile Loverとサイトに書かれているくらいなので、スマートホンに最適化されているんだと思います。
うちにあるAndroidでもiPhoneでもうごいておりました。

使い方も簡単。
jQueryライクでもありつつ、jQueryとの共存も可能になっています。いいねぇ!

簡単なサンプルをさくっと作ったので、スマホでアクセスしてみてください。
タッチイベントが簡単に使えるのはいいです、ほんと。

http://www.jetbaby.net/quojs/

QRコードもつけときます。個人的にダイレクトにURL入力するの面倒なんで、みなさんにそんな手間をかけさせはしないよ。

QuoJS Demo QRcode

上記サンプルはPCでもタッチはクリック、スワイプはドラッグしながらマウス動かすで反応するようですが、他はうまく動きませんしスマホ向けなのでマウス操作は向いていません。

サンプルでは実行開始に

[javascript]window.onload = function(){
}[/javascript]

としていますがjQueryライクに

[javascript]$$(function() {
});[/javascript]

でも問題なし。$$と$がふたつなんですね、QUOjsの場合。

もちろんサンプルに載せた機能以外にもいろいろな機能がありますが、詳細は本家サイトをご覧ください。

このQUOjs、タッチイベントなどスマホ向けの部分を除けばPCサイトでも活用できますが、まぁそれならjQuery使うよね、慣れてるし。

しかしながらスマホサイトの構築には今後、選択肢として加えたいと思っています。

ではまた。

レスポンシブなソーシャルボタン - Ridiculously Responsive Social Sharing Buttons

JB2014041902

ブログの文体に悩んでいます。どうもJETBABY管理人です。

今回はレスポンシブで使えるソーシャル関連のボタンを設置するjQuery+CSS、「Ridiculously Responsive Social Sharing Buttons」のご紹介。SASSのファイルも同封されているのは個人的にはうれしいところ。

ダウンロードはGitHubのこちらから。

デモはこちらです。

WordPressのプラグインもあるようです。

推奨されてる画面サイズは140pxから15,465px。確認されてるブラウザはChrome 33、Safari 7.0.2、Firefox 27、Opera 20、IE9+となってます。

ちなみに表示のサンプルはこんな感じ

JB2014041901_01

使い方はGitHubからダウンロードしたファイルのうち、CSSフォルダをJSフォルダを任意の場所に。中身だけを好きな場所においてももちろんOK。

 使い方は
(ファイルのパスは適宜書き換えて)

まずCSSを呼び出して

[html]<link rel="stylesheet" href="css/rrssb.css" />[/html]

HTMLはこんな感じで

[html]
<ul class="rrssb-buttons clearfix">
<li class="email"> … </li>
<li class="facebook"> … </li>

<li class="googleplus"> …</li>
</ul>
[/html]

基本はラップする要素にクラスrrssb-buttonsをつけて、ここの要素にfadebookなどのクラスをつけてあげる感じ。
各ボタンの動作などは基本的にはそれぞれのサービスが推奨している方法なんかで、あとはデモファイルの中身に書いてあるのでそちらを。

最後にbodyの閉じる直前などでJSファイルをよんであげて終わり。

[html]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="js/vendor/jquery.1.10.2.min.js"><\/script>’)</script>
<script src="js/rrssb.min.js"></script>
[/html]

GitHubのボタンなんかがあるので技術系ブログとかとも相性がいいのではないでしょうか。