Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2015年 1 月～3月編)

Article
04/10/2015

Facebook や Twitter(@osamum_MS) でシェアした開発に役立ちそうなリンクなどを毎月紹介する予定だったのですが、業務との兼ね合いなどから前回のまとめから 3 ヵ月も経ってしまいました。

昨今は、数年前とは比較にならないくらいに技術の刷新が早く、接する情報も増えておりますので私自身の忘備録も兼ねております。

皆様のお役に立てれば幸いでございます。

Web 制作全版

ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0

最近、「アクセシビリティ」という言葉をちらほら眼にするようになったので、こういうものがあるということだけでも覚えておくといいかも。

History of the user-agent string

ほうほう、これはまた資料性がありそう。

今どきの Web サイト制作が楽になる！
すごい無料 HTML テンプレート素材 25 個まとめ

JavaScript のフレームワークとか CSS のフレームワークがアツいけど HTML のテンプレートってあんまり聞かないけどどうなんだろう?

いま Web サイトを作るときにおさえておきたい10のこと(2015年版)

いままで internet Explorer 向けに Web を作ってたのに突然 Web 標準とかクロスブラウザとか言われても困る、そんな人たちのために心を込めて書きました。溢れるテキストと愛を君に。

Web制作者はチェックしておきたい、
面白いアイデアを使った最近のWebサイトのまとめ -2015年2月

アイディアだけでも参考になりますね。それにしてもコスリさんって毎度おもしろいネタ見つけてくるよなー。すごいなー。

HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ

すっごく丁寧に説明してある。新人に「ここ読んどけ」ですんじゃうレベル。

ウェブパフォーマンスの基礎とこれから by @kawada_hiroshi

Webサーバーの出口からブラウザの上まで完璧に網羅。こんなに具体的に書かれてるいるものは有償の本だってなかなかない。名著、見るべし!

ウェブパフォーマンスの基礎とこれから from Hiroshi Kawada

HTML5でできたドラムマシーンが楽しすぎてやめられない

ちゃんと動くけど、使い方がイマイチわからない...。-

最新デザインが魅力的！
すごい無料 HTML テンプレート素材24個まとめ

Web 制作の現場で、HTML テンプレートって実際どれくらい使われているのだろう?これを使ったものをお客さん先に納品するケースとかあるのでしょうか??

JavaScript

【JavaScript】200行で作るテトリスのレシピ

おー、200 行でどれくらいまで作れるんだろう? あとでやってみよう。

クリスマスに使えるアプリを作ろう！
- HTML5を使った、はじめての iOS ＆ Android アプリ開発

12 月 18 日に出演させていただきましたschooの授業のビデオが公開されました。テーマは、年末年始、一品あるとうれしい、ご家庭で簡単に手軽につくれるHTML5+Apache Cordova を使ったカジュアルゲーム開発です。

【翻訳】JavaScript ベストプラクティスパート1

意外とふつーの内容だったけど呟いてみる。(パート2はこれから見る)

Javascript BEST PRACTICES PART 2

パート 2 は翻訳されていなかった。そして案の定、ふつーの内容だった。

Unbeatable JavaScript Tools - The Dojo Toolkit

JavaScript ライブラリの Dojo は Dojo Toolkit が正式名称なのだろうか? ドキュメントに書くときは Dojo でいいのかな?
「お好きにどーじょー」、なんてな。

2015年のゲーム・Web 開発動向を技術面で占う - Mobage 座談会【前編】

Jser のみなさーん、僕らの時代到来ですよー!

【翻訳】JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips

これは勉強になる。デバッグ技術は財産よね。

Bringing asm.js to the Chakra JavaScript engine in Windows 10 :

Window 10 の Web ブラウザーに搭載される JavaScript エンジンは ams.js をサポートするのですわ。

What’s new in Babylon.js v2.0

WebGL といえば Three.js な感じだけどこいつもなかなか良さげ。

diafygi/webcrypto-examples

Web Cryptography APIのサンプルコード集だそうです。たすかります! あざます、あざます、あざまーす!

The new OneDrive API | OneDrive Blog

One Drive の新しい API が公開されましたー。これでプラットフォームが異なるアプリを作っても、マイクロソフトアカウントを持っているユーザーに対してはオンラインのストレージを自前で用意する必要がなくなるな。

操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト

これは確かに気持ちいい。そしてなぜかリッチな気持ちにさせてくれる。

今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference

さて、そろそろ勉強しなくては。

Ajaxを劇的に簡単にするReact.js

もしかして、今、React キてる?、やっぱキてる??

GoogleのAngular 2はマイクロソフトのTypeScriptで開発されると発表。
TypeScript 1.5以降でECMAScript 6とアノテーションなどを取り込んでいくと

いやー、会社の垣根を越えてくっていいですね。

[JS]手をかざし、そのモーションでページをスクロールさせたりコンテンツをスライドさせるスクリプト -dropper

理力(フォース)を身につけろ。(こんなおもしろいそうなもの、すぐに試したいけど今新幹線の中。)

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js

水平スクロールっていやぁ、メト...、げふっ、げふふっ！

最近のJavaScriptフレームワークの評価とか - albatrosary's blog

情報の収集と評価は時間と手間がかかるのでこういう記事はありがたいですね。

たかがsetter、されどgetter。
JavaSciprtでsetterとgetterを実装する4通りの方法

JSでクラス代わりに使用している関数に Getter と Setter を設ける必要が生じて、はて?、と思ったら良くまとまっている記事を発見。プロパティの追加なんて普段は this.hoge で済ましちゃうからすぐに出てこないのよね。たすかる。

React Native | A framework for building native apps using React

むむ、React でネイティブアプリ開発ですか。これは wktk ぜずにはおれない。

A Preview of WinJS 4.0

WinJS4.0 の Preview 版が公開されましたよ、っと。

CSS とデザイン

もう配色デザインには迷わない！すごい無料カラーツール13個まとめ

カラーパレットって、なかなか良いのが見つからない。あのグラデーションを見せられても欲しい色が見つけられないのよね。いいのあるかな?

Pure

JavaScript のテンプレートエンジンに PURE、CSS フレームワークに Pure。なにゆえそれほど純粋さにあこがれるのか?

Web デザインや HTML や CSS を基礎からしっかりと学べる動画コンテンツ、日本語解説だから分かりやすい！

オンラインだから居眠りしても平気たゼ! アーカイブ動画で復習もできる。

インフォグラフィックの作り方。
NewsPicksモバイルインフォグラフィック（マンU）

おお、これは。勉強になる。しかし、私には、絵心がない。致命的に。

[CSS]これから増えてきそうなMaterial Designにぴったり！
気持ちいいアニメーションで表示させるモーダルコンテンツ

まだそんなに見かけないからこそ使ってみて反応を見てみるのがいいかも?

Googleマテリアル・デザインをはじめよう！
参考にしたい無料素材やアイデアまとめ

Material Design については、ここがわかりやすいっす。

Bootstrap 3 日本語リファレンス

日本語、うれしいっす。

保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた

いろいろ使い道がありそうな気がします。

進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ

高校生くらいのときにこういうのがあったら、サクっと作って「どうだすごいだろ!」って、ドヤ顔できたのになぁ。(インターネットなかったけど)

背景のデザインに迷った時に！これから使ってみたい背景素材のまとめ

これは助かる。デモとかモックで「それらしい」適当なサイトを大急ぎで作らなければならないときにこういう素材がストックしてあると作業のはかどり感が違うのよね

これからのCSSレイアウトはFlexboxで決まり！

Flexboxの使い方についてはWindowsストアアプリの技術ドキュメントにもあるのだけど、いかんせんこっちのがすごくわかりやすい(^^;)

フォント作成に詳しくなくても大丈夫、
自分好みのフォントが簡単に作成できてしまうオンラインサービス -metaflop

自分好みのフォントを自由に作れるそうですよ。ええ、ふぉんとーですってば。

CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ

今日は仕事でテンパっているのであとで見よう。(チラ見したけど魅力的なのがたくさんあるっぽい)

かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技

良いね。コード量の削減とパフォーマンスに寄与しそうだけど、古いブラウザーの対応は考えなきゃだわね。

Web 制作者はおさえておきたい！CSS の基本テクニックから実務に役立つ便利ツールまでのまとめ

時間を見つけてCSSを基礎からみっちり勉強したいと思ってますねん。JSにばっか頼ってたらいかん。

Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ

なぬ?私ゃBootstrapのツルシのデザインでさえ「むひょー、シャレオツぅー」と喜んでたのにもっとイケてるのがあるってか。

「ドキュメントデザイン」で最も重要な50のルールをまとめた
「Color CRAYON-TIP Method」

重要な点も50個もあるのか。デザインてのは深いすね。

フォーム周りで覚えておくと便利な CSS Snippets

おお、JS なしでいろいろできるのね。わざわざ jQuery UI とか使わんでもよくなるのけっこうあるんじゃない?

デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ

色そのものよりも配色がむつかしいのよね。たすかるわー。-

レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ

できればCSSですべてまかないたいけど、それだけではどうにもならんときのために見ておこう。

フリー素材/フォントなど

【登録不要・商用利用可】提案資料に使えるイラスト素材サイトを全てのビジネスマンに知ってほしい

これも助かる! 文字ばっかのスライドとか見ると「喋んないで、それくばれば?」って思っちゃうもんね。

【完全無料】デザインセンス抜群な写真素材をダウンロードできるSnapwire Snaps

これもたすかるなぁ。

商用利用無料！女子高生が書くような文字をイメージしたかわいい日本語のフリーフォント -JKゴシック

これいいなァ、これいい。しかし、こんな可愛い文字でグゥ可愛い文章書いてんのがわたしみたいなｵｻｰﾝだったりしてね。

もうデザインに悩まない！すごいフリーフォント素材50個まとめ 2015年2月度

悩みは少ないに越したことはないのであとでみてみます。

マンガや同人誌に無料で使える、吹き出しの素材300種類

素敵だ。これで言えないことをスライド中のキャラクターに代弁してもらおう。

ダウンロードしておきたい！新着満載フリーのデザインフォントのまとめ -2015年3月

デザインセンスのない私のような人間でもこういうのがあればなんとかなりそうな気がする。(気がするだけだけど)-

Internet Explorer

Internet Explorer クロニクル～愛と憎しみの Internet Explorer 6～

春ごろ書いて、そのままになっていたIEの歴史についての記事をブログにアップしました。

IE test VMs on modern.IE get a refresh

modern.IEの仮想マシンがアップデートされました。OSに2014年11月までのWindowsUpdateが適用され、IEのバージョンが自動的にアップデートされないようにIE blocker toolkitがインストールなど。

Webページ・スマホアプリのユーザインターフェイスに楽しさを加える効果音や環境音などのサウンド素材のまとめ

これはうれしい。サウンドの素材は画像よりつくるのがぜんぜん難しい、つか、おれ無理(*_*)

About conditional comments

旧バージョンの Internet Explorer でサポートされていた IE のバージョンを判断する「条件付きコメント」、英語ドキュメントしか残ってないっぽい。

うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter

ううーん、まだもう少し、こういうのは必要なのかナ...??

テストツールで効率化
Internet Explorerバージョンアップに伴う Webコンテンツの移行作業

JaSSTで登壇した際のスライドをシェアしましたー。

テストツールで効率化 Internet Explorerバージョンアップに伴う Webコンテンツの移行作業 from Osamu Monoe

動画 (Windoiws)

プラグインの動作しないWebブラウザーでメディアにDRMをかけるにはどうすればいいの?、という人。IE11からEncrypted Media Extensions (EME)がサポートされていますよ。

A break from the past: the birth of Microsoft's new web rendering engine

過去からの脱却:マイクロソフトの新しい Web レンダリングエンジンの誕生。

Making it easier for Enterprise customers to upgrade to Internet Explorer 11 — and Windows 10

Internet Explorer の移行記事がアップされてますよ。

The Total Economic Impact Of Microsoft Internet Explorer 11

Internet Explorer 11に移行にかかるコストを評価すめためのレポートだそうな。

InternetExplorer for Windows10 Developer Guide (Technical Preview)

日本語訳が出てこないけれど、本家サイトにはWindows10に載るIEの開発者ガイドが出てますねん。

See what’s new in IE for Windows 10

同じく日本語訳が出てこないけれど、本家サイトにはWindows 10に載るInternetExplorerの互換ガイドも出てますねん。

準備は OK? サポート終了までに知っておきたい古い Internet Explorer 向けに作成された Web コンテンツの最新 Internet Explorer への
マイグレーション方法

2016年1月16日以降、Internet Explorer はその Windows で動作する最新のバージョンしかサポートされなくなります。よって古い Internet Explorer をお使いの企業では新IEへの移行作業が発生することでしょう。その移行作業に必要なナレッジを網羅してみました。

Rendering engine updates in March for the Windows 10 Technical Preview :

3 月のプレビューから Internet Explorer で Web Audio API が使えるようになったのね。

Partnering with Adobe on new contributions to our web platform

Windows 10 の Web ブラウザーには Adobe さんのエッセンスが入るそうな。

Updates from the “Project Spartan” Developer Workshop

このワークショップ、出てみたかったなぁ。 Windows10に搭載される新しいIEとSpartanについての大きな方針変更が書いてあった(*_*)資料作り直しだな。

Visual Studio

無料のCommunity版でC#コーディングを超高速に：
Unityゲーム開発でVisual Studioを使わないと損する3つの理由

ぜひ!

ワイヤーフレームを描くのに Powerpoint のストーリーボードを使ったらむっちゃ便利! Visual Studio 2013 の Premium 以上のイントールされた環境のパワポで使えるゾ!

OmniSharp - Cross platform .NET development

C#コード入力補完機能を Vim、Sublime Text、Atom、Emacs、Bracketsな人に。

初代Surface(RT機)で、Azure上に作ったデスクトップ環境にRDP接続してVisualStudioで作業。思ってた以上に快適。これでもう重いPCを持ち歩かなくて良い。でもって、このコはAzure専用端末に決定(^^)

開発用 Web サーバー IIS Express をコマンドラインから使用する方法

意外と知られていないようなので、ブログに書きました。

Visual Studio 2013 に同梱されている Windows シミュレーターを
直接起動する方法

毎回メールで説明するのもアレなのでブログに書きました。次からは「詳しくは以下の URL を～」で済んじゃう。

初心者歓迎!
Visual Studio 2013 によるフロントエンド Web 開発チュートリアル

これからVisualStudioを使用してWebを書いてみたい、そんな未来ある若人のために書きました。(もちろん中高年の方でもOKです)

Visual Studio Tools for Apache Cordova を使ったクロスプラットフォームアプリをビルドする

Visual Studio から Cordova を使った開発を行うためのプラグインのドキュメントが更新されてた。以前は内容が US のものより若干古かったんだけど、これで同じになった。

Visual Studio を使用した Cordova 開発

Visual Studio を使用した Cordova 開発 from Osamu Monoe

Cordova 勉強会第六回のセッションで使用したスライドをアップしました。

Visual Studio“だけ”でiOSとAndroidアプリが作れる
「Monaca for Visual Studio」

MonacaのプラグインがVisual Studioにやってきた!

Web App Terminology Explained – This Here Web

マイクロソフトでWeb技術を使ったアプリケーションを説明する際の用語解説がされています。よく読むと今後なにが出てくるかわかるかも。

Windows 10 のユニバーサルアプリプラットフォームのご紹介

現状、なかなか出てこない貴重な Windows 10 の開発関連の情報。

コンパイラの最適化についてすべてのプログラマが知っておくべきこと

明示的にコンパイラを使う必要のある言語はしばらく使ってないけれど、似たようなことはきっと Webブラウザー内でもきっと行われている。

HTML のアクセシビリティを高める新しい Visual Studio 拡張機能をリリース

ルールや仕様を理解することは大事だけれど、やっはツールを使うのは工数の圧縮とミスの回避に必要。

MSBuild Engine is now Open Source on GitHub

MS のビルドエンジンがGitHubで公開されましたよ。

I’m getting free expert-led training from @MSVirtAcademy

Windows10 のデベロッパーガイドのビデオが公開されておりますね。

A First Look at Building Windows 10 Universal Apps (Channel 9)

Windows10 からの新しい UniversalApps の開発についてのビデオが公開されてる。

Flickr のページのソースをみたらこんなのが書いてあった。こういう遊び心って大好き。

{{mustache}} のトップページのソースみたらこんなん描いてあったww こういうノリ大好き♡

まとめ

業務や、それに関係する記事の投稿を優先したので、Twitter のまとめは三か月間ぶんで骨がおれました。

来月はちゃんとしようと思います。

ではまた来月。

Clicky