トラックボール

PC312853

こんにちは。今年最後の記事です。
今回は制作現場の私的なことを。

仕事柄、PCを扱う時間はかなり長いと思います。なので普段使う道具にはこだわりがあります。
私は会社の中で唯一のトラックボールユーザーです。かれこれ十五、六年は使い続けているので、もうやめられません。

もともとは、マウスの使いすぎで腱鞘炎みたいな状態になり、解消すべく導入しました。
現在では、使わないと作業効率がかなり落ちるので、必須アイテムになっています。

誰もが初見で使いにくいというトラックボールですが、慣れると腕の筋肉をほとんど使わないため、腕の疲労が大幅に軽減されます。
さらにマウスのように、動かすスペースを必要としない点もメリットです。
指先のチカラだけで、画面の端から端までカーソルを移動できますので、近年の高解像度化したモニタには最適です。

しかし、その取っつきにくさから、商品としてのトラックボールは減る一方なんです。
運動機能に問題のある障がい者の方に選ばれることも多いと言う一面もありますので、メーカー各社には引き続き頑張って新機種の投入をお願いしたい所です。


最後に、使用中のトラックボールを紹介しておきます。

Logicool M570t
現在使用中です。3年ほど使い続けてます。途中で壊れて買い直したので2台目です。可も無く不可も無いバランスの良い機種です。ボタンの配置もマウスに近く、誰にでもお勧めできます。

logicool_M570t

 

エレコム M-XT1URBK
まさかの新機種で、2014年に突如発売されました。私も自宅用に年末に購入しました。何となく無線ドライバを入れるのが嫌で有線にしてみました。
まだ買ったばかりで慣れてないので、操作については何とも。大きさや握った感じは上々です。デザインもいいですね。M570tのボールと入れ替えると、操作性が向上するとのことで、そのうちやってみたいと思います。

elecom_m_xt1

 

Kensington SlimBlade trackball
最後はコレクションから。サブマシン用であまり使っていませんが、やはりトラックボールと言えばケンジントンです。
ゴロゴロと大玉を転がす感覚はたまりません。これはボールを横方向に回転するとスクロールするという独自ギミックがあります。親指派となって久しいので、メインで使うことはありませんが、使い心地は抜群です。なにより格好いい。

kensington_slimblade

 

と言うわけで道具の紹介でした。
個人的には、マイクロソフトのtrackball explorerが最高だったのですが、残念ながらマイクロソフトはこの分野から撤退してしまいました。

マウス操作で腕がつりそうなひとや、マウスだこが出来てしまいそうな方は検討してみて下さい。3日も我慢すれば自在に使えるようになります。
最近は、同じく省スペースで指先でコントロール可能なトラックパッドに普及の兆しがありますが、Mac以外の製品はまだ過渡期で、常用には厳しい感じがしますね。


来年も仕事の効率を高めるために!いろんな製品を試していきたいと思います。
 


段組み設定を使った、ワイヤーフレームの作成

いよいよ今年も残すところ、あと一週間!
一年あっというまでした。

今回は、Illustratorの「段組み機能」を使用した、ワイヤーフレームの作り方です。

サイトデザインをする前に、ページのレイアウトの目安として作るワイヤーフレーム。
以前の記事でもふれましたが、CSSniteで「段組み設定」を使った、ワイヤーフレームの作り方を紹介されていました。
それを参考に、940グリッドシステムに沿ったワイヤーフレームを実際に作ってみました。

1、長方形ツール

長方形ツールで、幅940pxの長方形を作成します。
(高さは任意ですが、キリよくできる1500pxで作りました)

長方形作成

2、段組み設定でパスを分割

オブジェクトメニュー>パス>段組み設定を選択します。

段落設定

今回は1カラム60pxとしたいので、
下図のように設定しました。

分割

すると、このように60px角のカラムに分割されます。

分割後

あとで変更するときのために、これをまるまる別レイヤーにコピーしておきます。

3、カラムを結合させる

任意のカラムを複数選択し、オブジェクトメニュー>パス>段組み設定を選択します。
列数・行数ともに「1」にすると、カラムが結合されます。

結合

 

あとは、写真や文章のダミーを作り込んで完成です。

完成

有料ですがwireMagicがダミー画像の作成に便利だそうです。
カラムを選択して、ダウンロードしたグラフィックスタイルを適用するだけなので、さらにお手軽にできますね!

 

段組み設定を使うと、マージンやカラムのサイズを計算せずに、感覚的にワイヤーフレームを作ることができます。
別レイヤーに保存していた、分割前のカラムを使えば、あとからの修正もカンタン。
ワイヤーフレーム作りが、ちょっと面倒だなと感じている方はぜひお試しください。


ショッピングサイトのまとめ5

師走の忙しい時期・・・

今年も残り半月を切りました。来年も皆様が良い年でありますように。

 

第5回目は圧倒的な機能数等、高機能が利用できる「MakeShop」です。

 

aaa

特徴

MakeShopは、GMOメイクショップ株式会社が運営するショッピングカートシステムです。
他社のショッピングカートのシステムに比べて圧倒的な機能数等、高機能をアピールしています。
初期費用 (税抜価格10,000円 )は発生しますが、月額0円のフリーショップがあります。
公式サイトの中に、無料モールの落とし穴 – 正しく理解したい4つのポイントという
特集ページがあり、無料で出店できるショッピングサイトのデメリットを解説していて興味深いです。

 

メリット

●機能が豊富に揃っており高機能です!
●長期契約割引という月額料金が最大30%オフになるサービスがあります。
●他社ASPからの移行ツールやサービスが準備されています。

 

 

デメリット

●月額0円のフリーショッププランを使う場合も初期費用が必要になります。

 

<こんな店舗におすすめ>
●月々の運営予算を抑えたい場合
●デザインにこだわりたい場合
●MakeShopに利用したい機能が多数ある場合
●他社ASPサービスからの乗り換え/モール型ショップとの併用をスムーズに行いたい場合

 

 

 


Fullcalendar動いてないから修正してみる

寒いです。皆さんは風邪ひいてませんか? 先週末は大雪でした。今週末も大雪見たいです。 これは私に冬眠しろってことですね??えぇ雪国生まれなもので、雪かきとか無駄に頑張っちゃいますけどね。 ちなみに「雪かき」っていいます?「雪のけ」っていいます?   さて、営業日カレンダーをGoogleカレンダーを使って表示しているところがあったのですが、どうもうまく動いていない模様。Firebugでエラーを見ると、Googleカレンダーのイベントを取得するところでエラーが起こっている模様。 さてさて、困ったぞ、ということで調べました。 どうも原因は2点。

  • Calendar APIがv2→v3になったこと。
  • FullCalendarのバージョンがあがったこと。

ということで修正します。  

Calendar APIを使えるようにする

まずCalendar APIを使えるようにします。v2→v3になって、API Keyが必要になったようです。 API Keyの取得はGoogle Developers Consoleから行います。 アカウントの登録が終わったら、新しくプロジェクトを作り、 141212_01

 メニューのAPIからCalendar APIを選択し、カレンダーをOnにします。

141212_02

141212_03

次に認証情報から新しくKeyを作成します。選択するのはブラウザキーです。

141212_04

141212_05

そうすると下のような画面になるので、ここは何も入力せずに作成を押しちゃってよいみたいです。 これでAPI Keyが取得できました!

141212_06 

141212_07

Fullcalendarをバージョンアップする

サイトに行ってfullcalendar.min.jsをダウンロードしてきます。 ※2014年12月12日現在、最新版は2.2.3のようです。 ダウンロードしてきたら、必要なファイルを読み込みます。

  このような感じになります。   次にカレンダーの設定をします。 「googleCalendarApiKey」に取得したAPI Keyを、 「events」に表示したいカレンダーのIDを設定します。

ちなみに、 カレンダーのIDはGoolgeカレンダーのここです。

141212_08

その他のオプションの設定は本家サイトをご覧ください。   これで無事に営業カレンダーが復活しました。 カレンダーがうまく動かなくて、毎日が営業日のようになっていた悲劇もこれで無事解決です。   今回参考にさせていただいた記事(ありがとうございました!) fullcalendar.js + gcal.jsでGoogle API v3を使ってGoogleカレンダーを表示する


海外サイト制作でのfont-family

今回、仕事で海外対応サイトの制作をする事になり

いざ制作しようとした時に一番悩んで試行錯誤したのがゴシック系の『font-family』の設定でした。
しかも、英語はともかく『ベトナム語』『韓国語』『中国語』なのです。

どこか詳しく描いているサイトはないものかと漁ってはみたものの
以外と少ない。
そして
英数字と現地の文字が混ざった時に太さや形状がハッキリと違って見えるので
まったくもって読みづらいだろうなと思う物が多かったのです。

かといって、まったくもってダメダメかと言う訳ではなく
今できる範囲で良いトコ取りをして、試行錯誤して何とかしっくりくる物ができましたので
現在、海外サイトで悩んでいる方は試してみて下さい。

ベトナム語は対応できる標準フォントが限られていますので
font-family: Arial,sans-serif;
基本的にはArialは賛否ありますが万能なようです。

中国語の場合は
font-family: Simhei,MS UI Gothic,Hei,sans-serif;
SimheiHei辺りが効いて差異が少なく統一感がでます。

韓国語が一番悩んだのですが
font-family: "돋움","중고딕","중명조",dotum,AppleGothic,Arial,Helvetica,Clean,sans-serif;
のセットで落ち着きました。
どうしても英文字と韓国語の文字でガチャガチャしてしまって、なかなかシックりしなかったのですが
いくつかのサイトと生粋の韓国のHPを調べて
落ち着きました。
若干盛り盛りな感じではありますが…

もし、海外サイトを制作されている方で同じような事に悩んでいましたら
一度試してみて下さい。