はてなブックマーク

お久しぶりです。母さんです。 毎日のように新しいサービスがリリースされ、いま何がアツいのかも分かりゃしませんね。 そんな中、最近個人的に一押しのWebアプリがあります。 先日Atlassianに買収されたことでも注目を集めた タスク管理ツール、『Trello（トレロ）』です。 ときどき名前聞くけどTrelloってなによ Trelloは2011年に誕生した「タスク管理Webアプリケーション」です。 タスクリストの整理に特化しています。 リリース時は対応言語が英語のみでしたが、2016年4月からついに日本語にも対応しました。 Wikipediaには、Trelloのツールとしての特徴が以下のように掲載されています。 トヨタが1980年代に供給チェーン管理に活用したカンバン方式を模範とし、各プロジェクトは見た目が付箋で示されるタスクを掲示板に表示する形式である。タスクはドラッグ＆ドロップにより利用

お疲れ様です、大塚です。 2016年1月12日にInternet Explorer 8（以下、Internet ExplorerはIEで表記）のサポートが終了して、約9ヶ月経過しました。 Web制作業界的にも、IE対応が9以上になったプロジェクトも多いのではないでしょうか？ 古いブラウザを切り捨てることにより、デバッグの時間も短縮されたかと思います。 また、今まで使えなかった要素を積極的に使えるようになり、表現の幅も広がりました。 たとえば、video要素。 採用情報 / 株式会社LITALICO 様 こんな感じで、メインビジュアルの背景が動画になっている演出は、静止画だけでは伝わらない情報をユーザーに届けることができます。 じゃあ、実際にコーディングしていこう！。。。。と、いきたいところではありますが、その前に、video要素の基礎をおさらいしましょう。 何事も、基本を疎かにしてはダメな

最近のWeb開発では必須！超簡単にNode.jsのバージョンを管理できるツール「nodebrew」を導入しよう（Mac編） HomebrewNode.jsnodebrewnpm 名古屋オフィスのコクシンです。 gulpなどタスクランナーの登場で需要マシマシなNode.jsですが、みなさんはNode.jsのバージョンを気にかけたことはありますか？ Node.jsのバージョンによってはモジュールが動かなかったりするので、指定されたNode.jsバージョンへ切り替える必要があります。 ただ、毎回アンインストールとインストールを繰り返してバージョンを切り替えるのは面倒ですし時間の無駄ですよね。せっかく新しいプロジェクトが始まる前だっていうのに、このバージョンの切替作業のせいで出鼻をくじかれた感が出てしまいます…。 今回は、そんな時に役に立つ 超簡単にNode.jsのバージョンを管理できるツール「n

あなたを優しく、包みたい。 茂った木の葉の間から漏れてさす日の光のように・・・ チョヌン、茂吉イムニダ。 前回はvelocity.jsのオプション機能についてご紹介しました。 velocity.jsは普段からjQueryに触れている方にとっては理解しやすく、アニメーションの滑らかさや実行速度の軽快さなどのメリットを感じてもらえたのではないでしょうか。 今回はCSSアニメーションのイージングとdurationについて書いていきたいと思います。 「イージングの値はだいたい”ease”です。」「durationは大抵同じ値です。」という方、気軽にご一読ください。 いつもの実装に少し手間を加えるだけで、サイトの印象をグッと良くする方法を紹介したいと思います。 CSSアニメーションを実装するためのtransitionプロパティ transitionプロパティは、transition効果（時間的変化）

お疲れ様です、大塚です。 ワタクシの過去記事をご覧になられた方はお気づきかと思いますが、何を隠そう、ワタクシはデバイス大好きっ子エンジニアなのであります。 それ故、他の人が使用しているキーボードやマウス、ディスプレイはもちろんのこと、マシン性能やOSの種類・バージョン、はたまたテキストエディタや、タスクランナーの設定まで、気になって気になって仕方がない精神状態なわけです。 …まあ、ぼくは行き過ぎだとしても、以前、fumingさんに、 fuming「他の人が、どんな感じで作業してるか気になるよね〜」 と、言われたことがありましたが、確かに、同じフロントエンドに携わるエンジニアとして、他の人がどんな環境で作業しているのかは気になるところですよね。 もしかしたら、自分の知らない超効率的な方法を使っているんじゃないか？とか… そんな、隣の芝生が青く見える方のために、弊社フロントエンドチームの開発環

こんにちは。名古屋オフィスのコクシンです。 Webサイト制作で欠かせない工程にブラウザごとの動作検証（ブラウザチェック）がありますが、なかなか実機と特定のバージョンのブラウザを揃えるのって難しいですよね。 ChromeやFirefoxならどのOSにもインストールできるので準備も検証も簡単ですが、iOS SafariやAndroid Browser、Internet Explorerなどの固有のデバイス・OSにしかインストールされないものとなると非常に厄介です。 そこで今回は、iOS Safari、Android Browser、Internet Explorerといった主要ブラウザを1台のMacの仮想デバイス上で実行し、簡単にブラウザチェックする方法をご紹介します。 iOS Safari を仮想環境で実行する まずは、iOS Safariを仮想環境で実行してみましょう。 実行するためには、

お疲れ様です、大塚です。 突然ですが、日々、コーディングに勤しんでいるそこのあなた。お疲れではありませんか？肩こり、腰痛、腱鞘炎、目のかすみ等々、ぼくらエンジニアは常に体を消耗させながら仕事をこなしています。 楽になりたいですか？ 残念ながら、仕事の量は減りません。仕事が減ると、ご飯が食べられなくなります。じゃあ、どうすれば良いのでしょうか？ 簡単です。キーボードを変えましょう。 疲れないキーボードの選び方 今お使いのキーボードはどんな形をしていますか？そして、そのキーボードでのタイピングは快適ですか？ 快適ならば、それで結構！そのままそのキーボードをお使いください。 しかし、もし、長時間のタイピングをしていて「手首が痛い」「腕がしんどい」等の症状に見舞われている方は、キーボード変更を視野にいれてもいいかもしれません。 例えば、こんなキーボードはどうでしょうか？ 画像引用：https://

ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer

どうもnissyです。 普段CSSコーディングをしていて、borderプロパティを使う機会が多いと思います。 コンテンツの外枠であったり、段落間の境界線であったり。 今回はborderの仕組みを理解して、線や枠でなく、三角形を作りたいと思います。 サンプルコード <p class="triangle"></p> .triangle { width: 0; height: 0; border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #ee4f16; } ポイント ■ポイント1 widthとheightの値を0に指定。 上下左右それぞれのボーダーの太さ（border-width

mosです。 マークアップエンジニアとして2年が経ちました。 コーディングの仕事を始めると JavaScriptを使ったアニメーションを実装する状況が訪れると思います。 しかしJavaScript未経験の方は「プログラミング」に対して苦手意識を持ってしまい、敬遠してしまうなんてこともありますよね。 そんなときに取り組みやすいのがCSS3を使ったアニメーションです！ 実装したい内容によっては多少JavaScriptが必要なときもありますが、 主要部分はCSSで対応できますので、 コーディング経験の浅い方でも取り組みやすいかと思います。 それでは、解説していきます。 今回は、最近スマホサイトだけでなくPCサイトでもよく見かけるハンバーガーメニューのアニメーションについてです。 See the Pen Crazy Goo -webkit- by mos (@un-t_mos) on CodePe

オフィスおかんで、おやつ代わりに玄米ばかり食べています。 あれは腹持ちが良くて素晴らしい。 母さんです。 なぜ「母さん」であるかは、もうちょっと置いておきましょう。 最近社内で 「XAグループ※はSlack使っているらしいね。あれってどうなの？」 と聞かれることが多くなりました。 ※XAグループ ･･･ わたしたちフロントエンドエンジニアが所属しているグループ Slackについて質問されることは主に、 Skypeとの違いをどのようなところに感じているか ツールそのものの使い勝手はどうか チャット以外にどのような使い方をしているか と、だいたいこんな感じです。 今回はこういった身の回りでよくある質問に対してザックリお答えします。 が、それ以上に、その前提にある 『コミュニケーションツールを使うことについての考え』 をまとめていきたいと思っています。 なので、Slackからリリースされている各

はじめまして！ sugiです。 マークアップエンジニアたるもの切っても切っても切れない関係、 それはPhotoshopでのスライス作業ではないでしょうか。 スライス作業の段階で、マークアップの組み立てをイメージし、そしてスライスを入れて画像を書き出していく。 この工程で、1ページのコーディングの6〜7割は決まる！と聞いたことがあります。 つまり、スライス作業の効率化・時間短縮がマークアップの時間短縮につながることになります。 今回は、スライス作業を効率アップする方法を3つご紹介したいと思います。 なお、この記事はMacでの作業を想定しています。 Windowsの方は文中に出てくるキーボードキーをcommand→CTRLに置き換えてください。 A.「レイヤーに基づく新規スライス」機能を利用する 概要 レイヤーに応じたスライスを瞬間的に切ることができる レイヤーを選択し、メニューから　レイヤー

ごきげんよう。フーミンです。 最近のサイトはいたるところにアニメーションする要素が増えてきましたね。 制作ツールや学習環境が充実してきたことによって、実装が簡単になってきたことも要因の一つでしょうか。 実装が簡単になった分、 ｢アニメーション簡単で楽しい！どんどんアニメーションさせてイケてるサイト作るぜ〜！」 と、なにも考えずに何でもかんでもアニメーションさせていたら、 「なんか重いなぁ・・・動きもカクカクしてるなぁ・・・」 なんてことになったことありませんか？ 今回は、もっさり重くなってしまったサイトのパフォーマンスを改善するために、原因の追求と対策について、簡単に説明していこうと思います。 パフォーマンスの改善について まず、ひとことに「パフォーマンスの改善」といっても、 ネットワークパフォーマンスの改善（HTTPリクエストを減らす など） JavaScript & CSSパフォーマン

どうも、茂吉です。 突然ですが、あなたのアニメーション、動きがカクついていませんか？ 「カクつきは感じているが仕方ない。」と思っている方、 滑らかなアニメーションにすることができます。 「いいえ。カクついてなどいません。」と思った方、 実はカクついていることに気づいていないだけかもしれません。 velocity.jsは、jQueryの.animate()よりも実行速度が早く、動きが軽快で多機能な拡張ライブラリです。 実際にjQueryとvelocity.jsを比べてどれだけアニメーションが滑らなのか、 まずはデモをご覧下さい。 デモページはこちら 2つを比較してみてどうでしょうか？ 普段使っているjQueryはvelocity.jsと比べて動きにカクつきがあることがわかります。 本記事ではvelocity.jsを使ったことがない、使い方がわからない方を対象に、 velocity.jsの基本

お疲れ様です、大塚です。 Appleの新製品発表会が間近に迫ってきましたね。新しいiPhoneの発表はもちろんのこと、今年の「One more thing」も楽しみです。 しかしながら、新しいプロダクトにドキドキ・ワクワクしながらも、心のどこか冷静な部分で、 「また新しい解像度が出てきたわ…」 と、新しい苦悩を抱えてしまうエンジニアやディベロッパーの方も多いのではないでしょうか？高解像度ディスプレイを搭載したマルチデバイスへの対応は、なかなか骨が折れる作業ですからね。 …え、仕組みがよくわからないままコーディングしていたって？？ そいつぁーまずい。 なぜ、多くのスマートフォンやタブレット向けのWebサイトでは、画像が2倍で作られているのか？ その理由と、ディスプレイや解像度の仕組み、今日ここで覚えていって頂戴。 ディスプレイの仕組み ぼくたちが普段使用している、PCやスマートフォンのディス