MacでSVNを使う場合の方法(Eclipse)

最近はバージョン管理などはGitで行うところがほとんどと思うのですが、コストをあまりかけずにSVNを使いたい場合にEclipseベースで簡単に導入できたのでメモ。

大まかな手順は

  1. Eclipseを動かすためのJAVA SDKをインストール
  2. その後Eclipseをインストール
  3. SVN関連のコンポーネントを追加(参考元
その他、Xcodeを入れておくとターミナルからSVNを操作できます。
OS X El Captainの場合、Eclipseを使う際にJAVAのSDKが別途必要になるのですが、それ以外は特に難しいことはなくNodeなどを入れるよりも簡単にできると思います。
 

 

OS X El Capitanへのアップデート後のNode.jsあれこれ

Office2016がOS X10.9に対応していなかったり、勢いでOS X El Capitan入れてしまったりしたついでにフロントエンドの開発環境とNode.js周りにも手を入れようとnvmではなくnodebrewをインストールして動く状態になったので、その際に起きたトラブルの解決方法などをメモ。

参考にしたサイト
node.jsのversionを管理するためにnodebrewを利用する 
nodebrew で Mac の Node.js 環境をスッキリさせた

クリーンインストールでない場合は一度Node.jsを削除、その後nodebrewをインストールする手順なのですが、Node,jsをどこからインストールしたかでNode.jsやnpmなどがいつまでも居座ってくれたりしてしまいます。

自分の場合はhomebrewで最初にNode.jsを入れてしまい、Node.jsは入れ替えられてもnpmがうまくいかず、node周りを一度unlinkしないといけませんでした。
brew & node関連は上のリンクとこの辺りが参考になりました。
http://apple.stackexchange.com/questions/65714/brew-link-node-creates-removes-different-number-of-symlinks-when-repeated

その他ruby / gem /compassのアップデートでつまづいたりしましたが、このあたりを参考にインストール。

これで終わりかと思ったらgulp / grunt でwatchがエラーで終わらない状態に。
どうやらファイル数?に制限がある設定らしく、それを.bash_profileに

ulimit -n 1024
ulimit -u 1024

を追記して無事動くようになりました。

nodebrewはすごく操作しやすいのですが、バージョンごとに入れると1つあたりの容量が600MBぐらいになったりするので容量に余裕がない場合は注意が必要です。

 

 

 

WordPressのプラグイン、Thumbnail For Excerptsで画像がない場合の処理をjQueryで行う方法

WordPressでサムネイルを出力できる便利なプラグイン「Thumbnail For Excerpts」で画像がない場合にjQueryをつかって画像を指定したものに書き換えるスクリプトを書いたのでそのメモ。

See the Pen memo : WP Thumbnail For Excerpts by Kentaro Kitagawa (@cdbk) on CodePen.

仕組みはeachで画像タグを探し、src属性がない、もしくは値がない場合に指定した画像のアドレスに書き換える処理を行っています。
セレクターを工夫すると処理が早くなったりすると思うのですが、今回は一番楽な方法にしました。

前回のタイポグラフィのjQueryスクリプトを少しオシャレにしてみた。

See the Pen Typography 2 “span” by Kentaro Kitagawa (@cdbk) on CodePen.

前回公開したタイポグラフィのjQueryに少し手を加えて、クラスをつけた要素ないのも時に自動でSPANを追加して、タイポグラフィのモーションをつけられるようにしてみました。

試しにこの記事につけているのですが、他のページでつけてみたりしたところ、全部処理が終わるまでに10秒以上かかってしまったため、実用的ではないと思い、この記事ページだけにとどめることにしました→CodePenで使えそうな感じのサンプル作りました。

jQueryをつかって1文字ずつランダムに表示させるサンプル

このサイトのヘッダーで使っているタイポグラフィーのアニメーションのサンプルをcodepenに載せてみました。

See the Pen Typography by Kentaro Kitagawa (@cdbk) on CodePen.

わかりやすいよう1文字ずつ<span>で囲い、それにクラスをつけて処理を行っているのですが、SEOの面などできになる場合は1文字ずつ<span>をjQueryなどで追記したほうがよいかもしれません。

仕組み

変化させたい文字にクラスをつけ、前から順に配列に格納、配列内をシャッフルしてから1文字ずつ表示させるアニメーションを実行させるようにしています。

IE8対応のためにやっていること・気をつけていること

このサイトはIE8は非対応でアクセスするとヒストリーバックで戻るようにしているのですが、仕事上IE8の割合が10%を切っても対応が必要な場合があったり、すでに組み上がっているサイトをIE8に対応させたりといったことが多々あるので、メモがてら少し記事にしてみることにしました。

HTML5以降で使用されるタグを避ける

<header>や<footer>、<main><section>といったHTML5から使われ始めたタグを使わない。既に組み上がったHTMLでIE8に対応させる際は、HTMLだけでなくCSSも変更が必要になる。

スマホやタブレット専用のサイトであればHTML5のタグを使っていても問題が出ることはないけれど、デスクトップ向けの時はHTML5からのタグは避けたほうが良い場合が多い。

レスポンシブレイアウトでIE8に対応させる方法

media queriesでデバイスやウインドウサイズを元にスタイルを変更している場合は、JavaScriptでその時々によってクラスを出力するといった方法をとる。css3-mediaqueries.jsを使う方法もあるけれど、確実じゃない場合が多いため、私はクラスを出力、そのクラスごとにCSSを指定することが多いです。

避けておきたいCSSのセレクターと対処法

何かと便利な擬似セレクターもIE8で使えないものがあるので、その際はクラスで:first-childにあたるところには.firstchild、last-childは.lastchildといったクラスをつけるようにしています。これもjQueryなどを使えば奇数のブロックにのみクラスをつけるといったことが可能なので、動的に出力する場面でもクラスを割り振ることで再現しやすくなります。

困る前にPIE.jsを使ってみる

透過や角丸といったところは画像にしてしまう前にまずはPIE.jsを使ってみる。

たまに適用されない場合もありますが、ほとんどの場合は適用する要素にCSSのposition:relativeを指定すると反映されます。

 

昔のIE6への対応と比べるとIE8への対応はものすごく楽なのですが、マークアップの表現の幅が広がっている今、求められるCSSやレイアウトの方法がIE8でそのまま使えないことがネックになることが多いので多少なりとも、役に立つことがあれば加筆したいと思います。

jQueryとPreloadJSをつかってページのローディングを実装したときのサンプル

このサイトで使っているPreloadJSを使ったローディング機能のサンプルをCodePenに掲載しました。

PreloadJSは読み込む内容を配列で格納して処理を行う必要があるので普通は静的にJSON形式のリストを用意するのですが、それだとページを更新するたびにJSONも更新しないといけないのでIDを付与した画像をjQueryで配列に格納する処理を行ってからローディングするようにしています。

詳細は下記サンプルを

See the Pen ZYRVOG by Kentaro Kitagawa (@cdbk) on CodePen.

2015年版のデザインにリニューアル

2015 02 20 0 42 33

ようやく2015年版のデザインをリリースできました。

前のブログにも書いたのですが、今回はできる限りWordPressの管理領域から離れて、PHP/JSベースのシンプルな構造に変更しました。

現状、ページ毎に単体でハッシュでロードしたりといったことはしておりませんが、ページ読み込み時にPreloadJSでプレローディングするように一応しています。

今回は完全にレスポンシブレイアウトでスマートフォンにも最適化。Webフォントも幾つか使い、いわゆる画像テキストを減らしました。

まだ少しレイアウト、体裁がおかしいところはありますが、徐々に整えていく予定です。

SEM向けの広告ページなども幾つかあるので、そのあたりも順次更新、仕事の依頼はお問い合わせフォームもしくはfacebookでいただければスムーズに可否や応答ができると思います。

最近、営業メールは控えてくださいと書いていてもほとんど減らない&メールを返事しても回答が来ないところが多かったのでメアドなどは外しました。

年賀サイトに載せたスロット型おみくじの仕組み

2015年の年賀サイトに載せている、スロット型のおみくじ、

Slot sample 01

スロットのようなことを以前JS(jQuery)でやろうとした際、画像をつかい、上下にアニメーションでループするサンプルなどがネットを探しても見つからなかったので諦めていたのですが、いい状態にうまくできたので掲載しました。

今回のスロットは

・ループをどのようにして実現するのか、
・開始、停止をどのようにしてスムーズに導くか、
・リアルな動きの再現方法は?

というところに着目して作っています。

ループをどのようにして実現するのか

Webという特性上、3Dの円柱を横回転させるようなアニメーションを再現するのはとてもコストがかかってしまうので、表示するエリアのパターンを並べ、それを反復させることで無限ループのような錯覚を起こし、再現するようにしています。

開始、停止をどのようにしてスムーズに導くか

スタートした際にすでにストップするまでの時間が決まっている場合は1パターンのアニメーションを用意するだけで解決するのですが、ユーザーがスタートとストップのタイミングを決めるものなので、スタートからループまでのアニメーション、ループ時のアニメーション、ループからストップまでのアニメーションと3パターン用意して実装しています。

リアルな動きの再現方法は?

実際に無限ループ、回転しているように見せるために背景にグラデーションを入れるとともに、ループ中にストロボ現象をアルファの制御で引き起こすことで逆回転のように見える錯覚を再現しています。また、ストップの際に1つ先まで進んでから戻るようなアニメーションにしています。

今回のスロットをjQueryのプラグインのようにできればいいのですが、実装するサイズや内容の数でレイアウトや幅が変わってしまうので今のところはプラグインにはしておりません。

2015年 年賀サイト

フロントエンド周りの制作環境

マークアップ、コーディングやフロントエンド周りをフリーランスでする際の自分の制作環境。2014年9月、あとから見返すといろいろ気づきがあるので書き残してみました。

デザイン周り用のツール・サービス

Creative Cloud

主にPhotoshopとIllustrator、そしてFireWorks。月額支払いで最新のものが使え、他の制作会社などと仕事をする際もバージョン違いなどをあまり気にしなくてもよくなりました。

Jpegmini

AppStoreにあるダイエットコーラのようなアイコンが目印のJpegを圧縮するためのツール。

コーディング・マークアップ周りのサービス

Coda2

定番のコーディング用のエディタ。GithubやFTP、SSH、ターミナルまで対応しているのでコーディングからフロントエンドの開発周りはこれで完結できます。

DreamWeaver

Coda2があればいらない・・・と思うかもしれないですが、ディレクトリ内の高度なファイル検索・置換、ファイルの移動によるパス変換などを行う際はDWが非常に便利。Sublime Textも日本語周りなどが少し弱いので結局のところDWあまだ現役。

サーバー

自分の場合は借りているサーバーにテスト用の領域を作り、サブドメインなどを設定してオンライン上でコーディング&ブラウザーチェックしながら作業をすることが多いです。
回線が遅いと保存〜転送がうまくいかないこともあるので、WiMAX2のモバイルルーターなども持ち歩いています。 

ファイル / バージョン管理周り

DropBox

普段使っているのはDropbox。DropBox上ではデータが消えても有料プランであれば復元することができるのでクライアント / プロジェクト単位でファイルをまとめて管理しています。

Google Drive

Google Appsを使っていることもあり、クライアントとのファイルの共有をする場合はGoogle Driveが多いです。

Universions

まだ使い始めたばかりなのですが、そろそろ本格的にバージョン管理含め管理をした上で仕事をしたくなってきたので試しに使っています。
ついついTrunkし忘れそうですが、その辺はなれたら使いやすくなるのかな・・・
DropBoxの容量が大幅に増えたので、実はDropBox管理上のディレクトリにuniversionsを置いてます。 

Github

これも定番。Subversionも便利なのですが、サーバーたてて・・・となるとフリーランスには少々コストが嵩むのでGithubは便利。だけど有料にしないとプライベート化できないのは少々難点。 

その他

Bose Soundlink mini & UBiO for Speaker

ヘッドホンをするときもあるのですが、最近スピーカー用のアプリを見つけてしまったのでスピーカーで音を出してます。

MacBook Pro 13(Retina) + LG Ultrawide Display(29)

ウルトラワイド液晶で画面最大にして何か作業することは見辛いのでほとんどしないですが、横に並べて作業できるのはすごく便利です。
iTunesの映画などフル画面で丁度収まるのが何とも言い難い満足感あり。そしてUSB3.0のハブがついているので外付けハードディスクは基本ディスプレイにつないでます。