Freigeben über


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

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 ライブラリを調べてみた【2015年版】

 

AngularJS つよいなー。

【翻訳】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つの理由

 

ぜひ!

 B7TDRJrCMAAMXmU[5]

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

 OmniSharp - Cross platform .NET development

 

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

 B73DC1mIYAAH2aG[1]

初代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 の開発についてのビデオが公開されてる 。

 

その他


GeekGirls池澤あやか部長と『アプリ開発の基本を学ぼう!』イベント報告

 

昨年お手伝いさせていただきましたGeekGirls ハッカソンの内容が記事になりましたー。

浮世絵や日本画も!博物館所蔵の4万超の画像を無料ダウンロードできるコレクションが素晴らしい!

 

デジタルフォトフレームで表示しておくのも良さげ。家にある初代Surfaceでやってみよう。(スタンドが着いているのでちょうどいい) - 浮世絵や日本画も!博物館所蔵の4万超の画像を無料ダウンロードできるコレクション

企画書の説得力が上がる!統計調査レポートサイトまとめ

 

これは助かる。会社員が会社から求められるのは数字。人格でも性格でも品性でも個性でもましてや愛情などでもあるはずはなくて数字、数字だけですからァっ!(涙

文章の書き方をプロ並みにする話題の文章作成無料ツール10選

 

マジすか? ブログ書くのに詰まったら頼ってみようかしら?w

【登録不要】マジで使える無料のWebサイト分析ツール&サービス8選

 

お、これは。たぶんどれか使う。

マイクロソフトの「Azure」移行ツール、Linuxをサポート

 

物理マシンも仮想魔マシンもイケますよん!

パワポで作られた凄いアニメーション - NAVER まとめ

 

私はまだまだパワポの本当の使い方を知らないのかも知れない。。

B76_DtTIMAc4YpH[1]

カコェェ。。そうか、Surface はキーボードが取り外せるからこういう使い方ができるんだ。

 

B7MZoY8CMAAHNbH[1]

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

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

作業を楽にしてくれる『Word』の知られざる機能10選

 

表やグラフは Excelで作って貼り付けてるけど、どっちが楽なんだろう?

3大動画サービス「YouTube」「ニコ動」「GYAO!」の利用動向の違いは?【ニールセン調査】:MarkeZine(マーケジン)

 

  3大動画サービスともスマホ利用の数がPOCを超えているそうで。

誰でもIoTが自作可能なラズベリーパイ驚きの海外事例7選 

 

これ、小型コンピューターでなにが作れるかをイメージするのにとても参考になると思う。

無料でダウンロードできるIT技術系電子書籍(EPUB/PDF)一覧

 

お、結構読みたいのがある。Gitの日本語解説書があるのはありがたいな。

「アプリストアとマネタイズ」の仕組みと収益化の極意とは? #html5jplat #html5j

 

html5j-Web プラットフォーム部第5回勉強会の記事が CodeIQ Magazine さんで公開されました。テーマはアプリストアとマネタイズ、がっぽり儲け Night!!

アプリストアとマネタイズ ♥ がっちり儲けNight ♥

 

html5j – Web プラットフォーム部第五回勉強会の動画をアップしました。

 

iOS App Store の話

 

html5j – Web プラットフォーム部第五回勉強会でアシアル田中さんが使用されたスライド

iOS App Storeの話 from アシアル株式会社

 

 Application submission, management and manetization in Firefox Marketplace

 

html5j – Web プラットフォーム部第五回勉強会で Mozilla Japan 清水さんが使用されたスライド

Application submission, management and manetization in Firefox Marketplace from Noritada Shimizu

 

Windows ストア アプリとマネタイズ

 

html5j – Web プラットフォーム部第五回勉強会で私のセッションで使用したスライド

Windows ストア アプリとマネタイズ from Osamu Monoe

プログラミングで変数名や関数名のネーミングに迷ったときに便利なカンニングペーパーまとめ

 

これは良い。オサーンになると、考えるべきことが多くて関数名ごときで悩んでいる暇はないのです。(気に入ったクラスや関数には凝った名前を考えるけどね)

 

ウェブデザイナー注目!無料ダウンロードできる厳選eBook16冊まとめ 2015年度

 

先日似たような記事を読んだ気がするのだけれど、これはデザイナー向けっちゅーことで。

 

ソフトウェアアーキテクトが知るべき97のこと

 

ソフトウェアアーキテクトじゃないけど知ってみるか。(97って、もうちょっと粒度を上げてほしかった..。)あ、日本語ドメイン?

ネットワーク管理の基本Tips:あのホストまでの経路や通信ボトルネックを調べるには? tracerouteコマンド

 

Webのパフォーマンスチューニングに必須の知識なので、知らない人はぜひ。

ブルー スクリーンを別の色にする

 

ほー、こんなことできるんだ。そういやしばらく見てないな。(「クリスマス仕様のブルー スクリーン」ってなんだよ)

【保存版】10分でわかるWebマーケティング手法の全施策まとめ
【図解付き】

 

一回じゃよくわからなかったので、あとでもういっぺん読んでみよう。

Announcing Microsoft Azure for Student Developers

 

そういや学生さんが無償でAzureを使用できる制度できましたよ。

まだ知らない人のための最新 Microsoft Azure 入門

 

マイクロソフトのクラウドサービスAzureにどのような機能があるか全体が把握できる良記事。Azureの全体像を把握するのにおすすめ。

Microsoft Azure のインフォグラフィック

 

Azureのインフォグラフィックスなんてあったんだ。スライドを作成する際のデザインの参考になる。

 

まとめ

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

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

ではまた来月。

 

Real Time Analytics

Clicky