個人のアプリ開発は楽しいです。けど時々寂しいです。 例えば深夜にアイコン作ってる時とか。 「いつもはデザイナーさんに助けられてるけど自分でやらないとなぁ…」とか考えて、無性に寂しくなったりします。ちょっと前からこの寂しさを何とかしたいなぁと思っていました。 で、今は Slackにhubotを住ませて1人じゃない感を演出することである程度解決しているので、どんな雰囲気で開発しているかまとめておこうと思います。 先に言っておくと、あくまで自分はこうやってるよという話なので 趣味がかなり入っています。以後その点だけ注意をお願いします。 統一された世界観を作る プロジェクトごとにSlackのチャネルを作ってそこに全て集約しています。GitHubのアクティビティ通知、CI結果通知、メール問い合わせ通知などですね。 ここで自分が大事にしてるのは、 統一された世界観を作るというところです。 例えば この

スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド

textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。 textareaでオートコンプリート機能を実装する、というもの。使いどころは限られそうですが、コンテンツ次第では便利なスクリプトですね。 こういうの。上記例では絵文字を打つのにコロンで括るので、コロンを打つとオートコンプリートで候補を出してくれるようになっています。 jQueryは1.7以降を使うように、との事。 $('textarea').textcomplete(strategies);セレクタを指定して呼びだすテキストを作っていきます。 デモではコロンを正規表現で判別して事前に作ってあったテキストをオートコンプリートとして実装、アイコン付きに置換してるみたいですね。詳細はGithubに書かれています。 ラ

コンテナのサイズに合わせて自動的に画像をフィットさせる、というスクリプトのご紹介です。jQueryに依存しています。RWDなんかと相性良さそうですね。 コンテナに合わせてフィットさせる、というもの。似たスクリプトは既存しますので選択肢の一つとして。 サイズに応じて自動でフィットさせます。 ↑ こんな感じ。 $('.foo').imageFill();基本的にはコンテナをセレクタとして指定するだけ。 <div class="foo"> <img src="bar.png"> </div>そのコンテナの中に画像を含めます。楽でいいですね。 ライセンスはMITとGPLのデュアルライセンスとなっています。詳細は以下にて。 imagefill.js

ユニークなスクリプトだったのでなんとなくメモ。一文字ずつエフェクトを加えてランダムに動かす、というもの。やりすぎるとアレですけどこれはこれで面白いですね。 以前カーニング向けの似たようなスクリプトがありましたが、こちらはアニメーションさせる目的で作ったみたいですね。 こんな感じで動きます。一歩間違えると鬱陶しいだけですが、アイデア次第では面白いコンテンツに出来るかもしれませんね。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.funnyText.js"></script>本体とスクリプトを読み込みます。 $('.foo').funnyText({ speed: 700, bor

Loaders.cssはCSSのみで作られたローディングアイコンのセットです。CSSで作られているのでスタイルの変更やスピード調整もしやすく、軽量で済む反面、対応ブラウザも限られるので現状ではスマフォ向けになりそうです。今のところ28種のアイコンのソースコードが公開されています。ライセンスはMITとの事。 Loaders.css