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


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

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

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

 

Web 制作全般

今すぐ Web 技術のスゴさを体験できる「神サイト7選」があまりにも楽し過ぎ!

「神サイト」って、大げさだなと思っていたのですが、実際にすごいのでぜひ見てみることをお勧めします。

Announcing Azure Media Player

Azure Media Player。HTML5 のMSE/EME使ってて、それらが使用できないデバイスでは Flash or Sileverlight にフォールバックしてくれるらしいです。使い方も載っているので、配信な方はぜひお試しを。

Web パフォーマンス改善企画(解析編)

実際に動作しているサイトをパフォーマンス分析していていろいろ勉強になりますね。オススメ

2015年、Web 制作者が押さえておきたい CSS の各種リセット、
アニメーション、フレームワーク、アイコンのまとめ

こういうのって日々革新されていきますからね。がんばって追いかけていきたいと思います。

知らなかったでは済まされない!Web に関連する法律まとめ

Twitterも含めWebにテキストを出す人は見ておいたほうが良いと思う。たまに、そんなこと書いてだいじょうぶかよ?、ってのあるものね

HTML5 を使ったシンプルな 2D ゲームの作り方(序)

ゲームを作りながらHTML5の機能を紹介するハンズオンを、ブログを書くついでに作成しようかと。作成するゲームを実際に試せますよ。GW前にはこそこその量を完成させたいなー。

Build 2015 | Channel9 Tag: Web Platform

Build2015で行われたWeb関連のセッションストリーミングはここで一覧が見れますよん。新しいブラウザからJavaScriptのチューニング、Cordovaを使ったクロスプラットフォーム開発まで幅広く網羅されてますね。

Web のパフォーマンスモデル「RAIL」とは何か?

うふふ、なんだと思う? (勉強になった!)

Web 制作時に備えておきたい便利なチートシートのまとめ
-Bootstrap, WordPress, CSS3, Git, SublimeTextなど

便利、こういうの印刷して壁に貼っておきたい、真面目に。

HTTP/2 Frequently Asked Questions (日本語訳)

HTTP/2 のFAQ。知りたいことが具体的かつコンパクトにまとめられています。

もう逃げない。HTML の viewport をちゃんと理解する

すみません、今まで壮絶に逃げまくってました。

Web スクレイピングで始める業務システムのモバイル化

へぇ~、この発想はなかった。スクレイピング云々はそうですが、Web のモバイル化について知っておくべき部分が丁寧に説明されていますね。

「HTTP/2」がついに登場!
開発者が知っておきたい通信の仕組み・新機能・導入方法

Web にかかわる技術者して理解しておくべき内容ですね。

モバイル時代を生き抜くためのWebパフォーマンスモデル「RAIL」
~Response,Animation,Idle,Loadから来る「速さの目安」を知って改善しよう!~

これは興味深い。川田さんの記事は解説がとても分かり易いのでお薦め。

 

JavaScript

【翻訳】JavaScript のフレームワークについて検討してみよう

雨後の竹の子のように乱立するJSフレームワークを検討するのに役立てたい

ECMAScript 6 compatibility table

ECMAScriptの互換テーブル。 IE Technical Preview(現Spartan)、がんばってるやん!

JavaScript を読んでて「なにこれ!?」と思うけれど調べられない記法 8 選。

すばらしい。慣れるまで絶対につまずく。でもって、Web 探してもほとんど出てこない。

[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js

なるほど「ビジュアルの連続性」か。うまいこと言うなぁ。

Facebook がオープンソースにした React Native でモバイルアプリの開発が大きく変わる

興味深い。今現在はどれくらい動くんかなぁ。

まじで斬新!!、どっかで使いたい。
- JSを使わずウェブ上でCSSを書き換える斬新な方法w

おー、これはたしかに斬新!、まじで斬新!!、どっかで使いたい。

[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト –underlineJS

これ、イイ。この効果と合わせて無駄に ぼよぉ~ん♪ って鳴るページ作りたい。ぼよぉ~ん♪

AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう

AngulerJS は人気ですね。ちなみに WinJS とも連携して使うこともできますよ。

RESTfulとは

こういう基本的な情報を簡潔にきちんとまとめたのってなかなかないので良いですね。RESTfulという用語をなんとなく使っている人はこの機会にぜひ見ておくことをおすすめ

[JS]ちょっとしたアイデアの積み重ねが素晴らしい!
画像を拡大表示するシンプルなスクリプト -Zoom.js

たしかに。シンプルだけどあるとちょっとうれしいかも。

Enable Node.js to use Chakra as its JavaScript engine.

Windows 10 上で動作する Node.js に Chakra を使用するツール(?) だそうで。

winjs/winjs/wiki

マイクロフトが作ったHTML5アプリ開発用フレームワークWinJSのWikiはここ。 ひさびさに見たら充実してた。

JavaScriptが20周年。
開発者のBrendan Eich氏が過去と未来についてのスライドを公開

もう20年経つんですね。

About WinJS

html5j - Web プラットフォーム部 第6回勉強会 フレームワークの世界まる見え!JS特捜部 ~ React,Angular,WinJSだらけの2時間SP!~ の登壇で使用したスライドをシェアしましたー。

データを可視化する為のグラフ描画 JavaScript ライブラリをまとめた・「JSGraphs」

数値の可視化にはグラフが必要。で、見た目がいいと内容も違って見えるから不思議ですね。

[JS]変形アニメーションがかっこいい!アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js

すごい、このアニメーションは、使ったらなんかすごくモテそうだ!!!

JavaScript で画面キャプチャーを防止する方法

たしかにこういうニーズってありますね。

[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト-ScrollMenu

これはいい。このサンプルの各スクロールエリア内にコンテンツを埋めていけばイケてる風なページに勝手になってくれる気がする

TypeScript の基本のキ。
JavaScript をベースに「TypeScript をつまみ食い」しよう!

はじめての人でもとっても分かり易く説明されています。

JavaScript でオセロを実装する(原始モンテカルロAI編)

コードを書きながら勉強すれば理解が深まりそう。

Symbol - JavaScript | MDN

ECMAScript6 から導入される Symbol、第三者から勝手に使われたくないプロパティ名に指定するといいらしいけど、他の使い道は考えられてないのだろうか?

JavaScript 言語リファレンス

MSDNのJavaScript言語リファレンス、あまり知られていないけれどサンプルも豊富で意外と理解しやすいのでおすすめですよ。

JavaScript の新機能

Edge でサポートされる JavaScript の新機能。サンプルコードが豊富でとっても分かり易い

MicrosoftEdge/Gamepad-Sample

HTML5Game Pad API、ちゃんと動くサンプルコードがない、とお嘆きのあなた、ここにありますよ。Windows10のIE11、Edge、Firefox、Chomeで動作しました。ただしコントローラーは xInput 準拠品が必要です。

WinJS 4.0 Released

プレビュー版のリリースノートの年末にリリース予定と書いてあったのに 6 月にリリースされてびっくりしました。

Microsoft Developer Network | Template Strings (JavaScript)

ES6 のTemplate Stingで使用するのはシングルクォートでもダブルクォートでもなくて、バッククォート(`)です。気づかずに2~3時間ハマってた...Orz

[Shift]+[@]キーで出せますよ。

Cortana の操作 (HTML)

Windowsストア アプリでのCortana統合のドキュメントが日本語化されてますね。

簡単な MPEG-DASH ストリーミング プレーヤーの構築

Media Source Extensions (MSE)を使ったストリーミングプレイヤーの書き方が詳細に説明されています。MPEG-DASH を JavaScript 受けて表示したい人は必見

Vue.js

MVVMのJavaScriptライブラリ、vue.jsの公式サイトの日本語訳らしいです。

JavaScriptネーミングベストプラクティス

こういう慣用的な名前つけとくと誰が見ても分かり易いソースになるので良いすね。

コーディング中のクラス名で迷いたくない!
よく見るコンポーネントの名前17選

よく使われる関数名というのはありますが、CSSのクラス名もそうなのね。他人の書いたソースを読むときや命名規則を考える際の参考にするのにも良さそうです。

ECMAScript 6 が正式に承認される

ES6 が普通に動くようになってもニーズの違いによって AltJS は残るんでしょうね。そうするとブラウザ内の動作を単一言語でしか書けない不便さがより浮き彫りになって WebAssembly が...、なんてことを想像します。

Exploring ES6 by Axel Rauschmayer

ECMAScript6 の機能を詳しく紹介した書籍「Exploring ES6」のWeb版が無料で公開されています。(DL 版は $27 )

AngularJS でマテリアルデザイン風のページ遷移アニメーションを作ろう

すごい、説明が懇切丁寧!、これはもうハンズオン資料ですよ。

Vorlon.js 0.0.15 is out !

Web ページをリモートデバッグするための Vorlon.js ちゃくちゃくと機能追加がされています。

[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js

ブロック崩しとかピンボールとか、カジュアルなゲームを作成する際にもぜひ使ってみたいですね。

 

CSS/デザイン

「春っぽいデザインにして!」と言われた時に参考にしたい華やかデザインと桜の無料素材まとめ

おお~、たしかに春っぽい。sss

最近の Web ページで使用されている『さまざまな魅せ方』を実装するCSS や JavaScript の最新チュートリアルのまとめ

前のいくつか、いまいちデモの動きが変わかりづらいけど、確かに「魅せ」られるかも??

UI に使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアル

これは本当に勉強になる。これを極めればユーザーに「UIのディズ〇ーアニメやぁぁ!」と言わしめることも可能!(なんじゃないかな?)

ディズニー社に学ぶ!
HTML/CSS で 12 個のアニメーション基本原則を完全再現!

おお、たしかにこれは。「ワイのブラウザーん中が、カートゥーン劇場やぁぁ!」そんな感じにできそう。動きを見るだけでもためになるね、これ。

2015年、これから積極的に取り入れていきたい Web デザインの流れをWebydo の UX マネージャーが解説

後学のために拝見させていただきますー。

CSSの content プロパティーを使いこなそう!

これはわかりやすい。いろいろ使えそう!

人物・動物のイラストを描く時の参考になる!
骨格や筋肉の仕組み、動きや表情などのイラストの描き方のまとめ

これはすごい。ちょっとでも絵心のある人なら効果絶大と思う。

CSS3 を使ったアニメーションを 70 種類以上ダウンロードできるサイト「AniCollection」

これは楽しい!ぜひ、デモページを見てほしい。

reset.css と normalize.css に続く新しいリセット用 CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css

新しいリセット用 CSS キター!

昨今のCSS設計事情からみるCSS設計のあり方とは

やっぱり現場で活躍している専門家の記事は勉強になりますね。

[CSS]ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ

こういう、細かい「あるある」ネタは地味に助かりますね、マジで。

最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

PC、タブレット、スマホと画面サイズが異なるデバイスにコンテンツを提供する際にはおさえておきたい知識ですね。

レスポンシブのうまいアイデア満載!
RWD 対応のナビゲーションを実装するスクリプトのまとめ

こういうのってデモを見て、アイディアを吸収するだけでも価値があると思うんすよ。え、パク..?、いえ、インスパイアです。

単なる CSS リセットではなく、レスポンシブ対応の Web 制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート –Marx

ほうほう、これも勉強させていただきやす。(こういうので勉強して他人にドヤ顔で教えるの超楽しい)

世界が注目している!クリエイティブがすごい日本の Web 制作会社・クリエイター集団のまとめ

アイディアをいただきましょう。お金があるならいっそ発注してまいましょう(^^)

フォームはラベルの配置場所で使いやすさが全然変わる!
ユーザーが利用しやすいフォームを徹底考察

これはページだけでなく、アプリ入力画面全般に通じるものですね。慣れてる人も知識を確認するうえで読んでおきたい記事です。

分かりやすいイラストで、Web デザインに大切な 10 の要素をまとめたインフォグラフィック

チェック項目としても使えそう。

無料でしかも高品質!レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ

こりゃあいい!とりあえずデモを動かして、その動きをみるだけでも勉強になる。

Webデザインの引き出しを増そう!細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ

多くの人がお世話になっている(と思う)Dribbbleの最近公開されたアートワークの紹介だそうです。

CSS3の「フレキシブルレイアウト」使い方まとめ

非常に丁寧に説明されてますね。これはおすすめ。

実装は超簡単!デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー

スピナーっていうのか。アニメーションgifばっか使ってたけど、これ使ってみよう。-

ゴーストボタンにマウスを乗せたときの動きいろいろ16個

ゴーストボタンっていうのか。デモ触ってみると思ってた以上にイイ。(タッチデバイスでは使えないけど)

Webアニメーションを極める、5つのデザインテクニックまとめ

Webアニメーションの種類と使いどころについてよくまとまっておりますな。

Webページをブラウザから印刷する際に、最適化するためのCSSのフレームワーク -Hartija

おー、Webページを印刷するという感覚はすっかりなくなってた。でも、いまだに印刷して見たい、というニーズはあるのよねこれが。

シンプルな美しいフォントからコーディング用・ラーメンまで、フォント選びに迷った時にチェックしたい新作フリーフォント -2015年5月

え、ラーメン?  ソーメンじゃなくて?(違

人気デザイナーが明かす!
カラー配色の秘密テクニック10個まとめ

あとで勉強しよう。(と思いつつ、ストックした大量のブックマークが埋もれいてる。どうしたものか。。)

ブックマークしておけば後で助かること間違いなし!
ほしい画像が見つかる「無料・高画質」のサイトを46つまとめてみた

こういうの、de:code前にほしかった。。

CSSの実用的なテクニックから素晴らしいアイデアまで!
スタイルシートの最新テクニックのまとめ

個人的に、わかわからんJSのコードがどっさり入ってるより、コードが少なければ少ないほどクールって思うので、CSSは使いこなしたいですね。

【CSS】決定版!リセットCSS総まとめ

なんかブラウザーごとに表示が微妙にズレる、って人はぜひ。

Infographic: The history of Photoshop

インフォグラフィックでまとめたPhotoshopの歴史ですってー。(フォトショ、もってませんねん)

あなたは今も犯している!?モバイルUXの7つの失敗 - ふろしき.js

良記事。体験から学んだ知見は教科書にはない価値がありますね。

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説

こういう基本的な内容って、最初にしっかり理解しておきたいですね。

ここが最前線!2015年WEBデザイントレンド13選

これは読みごたえがありました。おすすめです。

Bootstrapではじめる!
スマホ対応の無料HTMLテンプレート素材39個まとめ 2015年6月度

とりあえず、見栄えがよくて動くものを手早く、というのには良いかも。ただ学習コストがかかりすぎると自分で作ったほうが早かったってなるので判断が必要ですね。

デザインの引き出しに入れておきたいテクニック!
Webならではのミニマルの効果的な使い方

「ミニマル」ってなんだろう? 漢字で書いたらこうか。「魅丹丸」。...勉強します

Material Interaction

マテリアルデザインのインタラクションデモページ。ひたらすら、へーっ、てなること請け合い。

ノンデザイナーのための厳選デザインテクニックガイド25個

すばらしい。紙に書いて壁に貼っておきたい。でもって毎朝復唱したい。

≡ ←ハンバーガーメニューのデザインでクリック率は違う
(2014年のA/Bテストの結果から)

たしかに。ハンバーガーメニューって、知らない人がみたら「三ってなんだろう? 一と二はどこだ?」って思うよね。(思わないか)

[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト

ホバーエフェクトはタッチデバイスだときかないことが多いのでそこらへんは注意が必要だよね。

デザイナーはなぜMS Pゴシックを使わないのか?
- エディトリアルデザイナーに聞いてみた

特定のフォントに感じていた違和感の理由が理解できました。なるほど感満載。

Webデザインのすごいアイデアや細かいこだわりがいっぱい!
素晴らしいUXを堪能できるサイトのまとめ

つつしんで参考にさせていただきます!

WAI-ARIA導入(日本語訳) - TRANS

WAI(Web Accessibility Initiative)-ARIA(Accessible Rich Internet Applications)についての詳細で分かりやすい解説

デザインは基本が大切!
ひとつ一つをしっかり見直しておきたい20のデザインテクニック

勉強させていただきます。

自分のデザインのスキルがチェックでき、勉強にもなるクリエイティブなゲームのまとめ

私はいまいちゲームの進め方が ? だったのですが、知り合いのデザイナーさんは楽しい!、と言っていたのである程度の知識のある人向けかも?

現役デザイナーが実践している、フォント組み合わせ10個の黄金ルール

フォントの組み合わせにもルールがあるのですね。こいつは興味深い

こんな発想なかった!世界のクリエイティブな広告デザインまとめ

おもしろい!こういうの見ると、むかし「3S(Simple, Surprise, Smile) を忘れるな」と言われたことをあらためて思い出しますよ。

配色完全ガイド!
カテゴリー別見本100個とカラーパレットの使い方まとめ

配色を考える際にこういったよりどころとなるものがあると助かりますね。

CSSで実装するハンバーガーメニュークリック時のエフェクト 10+

すごい、すぐに使えそう!

シンプルの心理学 ― 心地良いデザインのために

さまざまなヒントが隠れていそうで、何度か読み返してみたい記事。

ロゴデザインには参考になるアイデアがいっぱい!
2015年のロゴデザインのトレンドのまとめ -2015 Logo Trends

過去のデザイントレンドへのリンクもあるので資料としても良いですね。

デザインに効果的なフォントの選び方を身につけよう!
レジュメに適したフォントと避けたいフォント

最近、無料のフォントがたくさん公開されているけれど、じゃあその大量のフォントの中からなにを基準にに選んだら良いの?ってことがあるので助かりますね。

多目的に使えるシンプルなデザインがいい!
約 800 種類のアイテムが揃った SVG のアイコン素材 -Glyph

SVG アイコンを Web ページに配置する方法も書いてある親切記事。SVG だと高 DPI にも耐えられるしスクリプトも仕込めるし便利ですね。

テキスト文字編集でよくある、20 の間違いと解決テクニックまとめ

非常によくまとまっていて勉強になります。

現役デザイナーが明かす!
デザインを良くする 12 個の鉄板ルールと具体例

「鉄板」というだけあって納得感が違いますね。勉強になりました。

分かりやすいWeb入力フォームのための十戒

このへんの考え方は Win フォームも一緒ですね。参考にさせていただきます。-

トップデザイナーが教える、フォントの超実践デザインテクニック10個まとめ

最近フリーのフォントが山ほどあるけれど、ちゃんと効果的に使えているかというと微妙なので助かります。

“建築史に隠されたウェブデザインの未来” by Erika Ito

たんなるこじつけなのかどうか、ぜひ読んで確かめましょう。

デザインの勉強にいい!有名ブランドのガイドラインのまとめ

外食産業から自動車メーカーのまで網羅されているので資料としても素晴らしいし勉強になのます。

デザインの階層ルールをつくる、5つの効果的なテクニックまとめ

デザインについてはいろいろなルールが語られているけれど、それらの共通項を見つけてみるのも良いかも。

 

フォント/画像/素材

もらって嬉しい素敵なデザインの名刺が無料で作成できる!
そのまますぐに使える名刺素材のまとめ

個人の活動とかで人に会ったときに会社の名刺出すのもなぁ、ってこともあるので、こういうので作っておくと良いかもね。

おぉこれすごい!
明治時代の美しい図案コレクションが無料ダウンロードできるよ

たしかにすごい。和柄の図案の参考にまんま使えますね。

2015年版!漢字が使えて無料日本語フォント50種

漢字が使えて無料ってすごくないすか?

ちょっと面白い太っ腹ライセンス、商用無料クレジット表記無しで利用できるフラットな色使いがかわいいアイコン素材

画像やアイコンはイメージにあったものを探すのがなかなか面倒なので、普段からこういったものをストックしておきたいすね。

厳選!最近公開された日本語のフリーフォント15種類のまとめ

まとまっているのでほしいのを見つけるのに便利かも。

カメラ・写真・ビデオをモチーフにしたアイコンセット 10+α

見てるだけでカメラ専門の(写真ではなくよ)ガチなアプリを作りたくなりますな。

浮世絵著作権フリー作品「東海道五十三次」

サイズがちっちゃいけどアイコンとかサムネ代わりの使うのであれば、まあイケる感じかな?

全て無料!現役デザイナーが選ぶ高品質で無料のベクター素材80選

おおお、なかなか美麗なのがある! これはスライドで使いたい。(でもライセンスは要確認ね)

マイクロソフトが提供しているアイコンセットまとめ

知らないのも結構ある! いやー、すごい、よくまとめたなぁ。

いろいろな種類のフリーデザインリソースを集めた「Exclusive FREE Digital Design Resources」

んー、たすかる。考えるより選んだ方が早いってのはありますからね。

無料とは思えないほど緻密で美しい!215種類の飾りやイラストが揃ったヴィンテージデザインのベクター素材

これイイ! アール・ヌーヴォーやアール・デコなデザインのコッテコテに素敵なページやらアプリやら作りたくなる。

webサイトの公式ロゴ素材まとめ

こんな時間に社内にて絶賛パワポ職人中。そんな私にこの記事は、ありがとうございまっち!、としか言えない。

プレゼン資料作りの味方!
無料クリップアート&テンプレ

セッションもプレゼンもスライドショーじゃないんだから過剰なスライドは必要ないと思うのだけど、文字ばっかりのスライド見せられるとげんなりするのも事実。スライド作成苦手な人はぜひ。

無料アイコンを探す時に必ずチェックしたいダウンロードサイトのまとめ

こういうのストックしておくとあとあと役に立ちますよね。

あの昭和の名作ドットフォント15書体が完全復活!
JIS第2水準の漢字も揃ったフリーフォント

X68000用のフォントがTrueTypeフォントとして大復活! おとーさんら胸アツ、若人ちんぷんかんぷん。だが、それがいい...。

デザインが見違える!大胆なタイポグラフィに映える手描き風がかっこいいフリーフォントのまとめ

写真の上にこういう良さげなフォントで字を書くだけで、なんかイイカンジのものになってしまうのはずるいね。

200 種類の汎用性に優れた SVG アイコンとその使い方が勉強になる!新しいデザインに役立つ UI コンポーネント素材 -WPF UI

WPFと聞いて Windows Presentation Foundationと思ったそこのあなた、愛してる!

新しい写真素材サイトがどんどん増えてる!高品質な写真画像がクレジット表記無しで無料利用できるサイトのまとめ

Officeクリップアートが終了してしまってからパワポに入れる写真に苦労してたので助かりますよ。でもライセンスは要確認ですね。

自由に使いたい放題!
ロゴ作成に使える完全フリーフォント101個まとめ

フリーフォントっていっぱいありますよね。

商用OK!合計240 枚の無料写真をカテゴリ別に配布しているサイトDealjumbo

スライドを山ほど作る身としては無料写真はあればあるほど助かる。(要件にあうものっとなかなかないので母数か大きいほどいい)

ロイヤリティフリー!
無料で使える高品質なライン系アイコン素材まとめ

素敵★

4,000種類が揃った最強のアイコン素材!
徹底的に美しくデザインされたアイコン -Streamline Icons v.2

なにをもってして「最強」なのか不明ですが、数は豊富です。有償と無償があるのでご注意ください。

背景からモンスターまで!?
アプリ開発で使えるフリー素材サイト15選

これはかなりうれしい。

Webデザイナーのワークスペースにある数多くのガジェットをイラストにしたベクター素材 -Elegant Vector Kit

ええっと、ウチの製品は...(^^;)-

日本語表示も考慮されたコーディング向けのフォント「Source Han Code JP」が公開

入れて使ってみましょうかね。

CSSやJavaScript などコードを書くのに最適!
コーディング用フリーフォント –Monoid

Source Han Code JP よりも、こっちのほうががオサレな感じがしますね。日本語は使えるのでしょうか?

デザインの幅が広がる!
ストックしたおきたい新作フリーフォントのまとめ

これだけフリーフォントが手軽に手に入るようになると、ストックしたフォントの管理も考えないとですね。

幾何学的にデザインされたフリーフォント「20 Gorgeous Free Geometric Fonts to Download」

デザイン性の高い無料フォント゛か公開されています。

あらゆるデザインアプリで編集可能!
すごい新作フリーアイコン素材 24 個まとめ 2015 年 6 月度

けっこう好みのフォントがありました。

無料で使える!すごいフリーフォント素材50個まとめ 2015年6月度

「すごい」と感じるかどうかは人それぞれですが、フォントがいっぱいです。

 

ツール

スキャナーアプリ「Office Lens for iPhone」紹介

スキャナーアプリ「Office Lens for iPhone」でたよー。Android版もあるよ。

開発・テストでこそ使いたい Microsoft Azure

クラウド環境、試してみたいわ~、という人はAzureの無料特典を使ってみると幸せになれ.るこでしょう。とくにMSDNサブスクリプションもっている人は使わないと損ですわな

 Webサイトの作成を爆速化するWebアプリ約70種をまとめた「HelpMeBuild.io」がまさに救世主!

あらー、いいわー。自分が学生とかだったら、こういうの使って小さい店舗のサイト立てまくって小銭稼ぐんだけどなぁ。

超簡単にウェブページが作れる『Adobe Slate』使ってみたら便利すぎた!

アプリ無料なんだ。確かによさそう。こういうの普及すると...どうなるんだ?

ロゴをデザインする時に役立つ!
便利なオンラインサービス・無料素材のまとめ23選

ロゴって、会社とかだったらデザイナーさんに頼んでちゃんとしたものを作ってもらうほうが良いと思うわけですが、無償の活動についてはこいういうの使うといいかもね。

スマホ・タブレットのさまざまなデバイスの表示チェックに対応!レスポンシブの確認ができる無料オンラインツール –.resizr

画面サイズの確認はブラウザの開発者ツールにも搭載されているけど、さまざまな機種の情報があるのは便利

マーケ担当だけでイケてるバナーを無料で簡単に作れるCanvaを使ってみた

そういやバナーって、たしかにテンプレあったほうが楽かも。

Developer Channel の WebDriver API

WebDriverを使うと、開発者はIE11向けに、ユーザーによるWeb ページの操作をシミュレートする自動化されたテストを作成できるらしい。

Visual Studio Code

Mac、Linux ユーザーの皆様、VSCode がダウンロードして使えますよ。

ManifoldJS

HTML5やJavaScriptで作られたアプリケーションを、W3Cで策定中のManifestファイルを基にCordvaを用いてiOSやAndroid、Windows対応の Hosted アプリに一括変換する、それがManifoldJS!!

Vorlon.JS

Build 2015 のキーノートで発表になったWebアプリケーション用のリモートデバッガVorlonはこれ。

Building vorlon.JS with the help of the developer community and what’s next

Webアプリ用のリモートデバッガであるvorlon.JSの記事かEdge Dev Blogで公開されてた。

便利なCSS3ジェネレーターのまとめ

軟弱者と呼ばれようがCSSは視覚的に作れたほうが便利だし早いと思うの。

レスポンシブの確認が快適に!ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス

このテの機能は最近のWebブラウザの開発者ツールについているからね。便利な点としては機種ごとの解像度情報かな?

Visual Studio Tools for Apache Cordova

Visual Studio Tools for Apache Cordovaのページが新しくなってる。

Getting Started with Apache Cordova Mobile App Development

Visual Studio Tools for Apache Cordova を学習するための動画コンテンツ一覧

簡単に写真加工や画像編集ができるツール 6 選!
資料作成などにおすすめ

ふだん ペイント とパワポでがんばってるからなー。こういうの試してみっかな。

Building Mobile Apps with Ionic and Monaca

アシアルさん謹製、OnsenUI拡張が本家MSDNブログで紹介ですよ。Visual Studio2015RCをお使いの方はぜひお試しを。(Monaca for Visual StudioはVisual Studio 2013で既に使用できます)

Web コンテンツを開発するための Node.js 簡易 Web サーバー

Visual Studio CodeにはWebサーバーがついていないので、簡易なものをNode.jsで書きました。MacでもLinuxでも動きますよ。

背景色を指定すると WCAGの ガイドラインに基づいたテキストカラーをピックアップしくれるカラーツール・「COLOR SAFE」

これはいい。アクセシビリティの完全サポートはむつかしくてもこれくらいはやっておきたい。

これから Git を始めてみようという人のための使い方と入門フロー

テメェ、Git、Git にしてやんよ! (←笑うとこデス)

Emmet Cheat Sheet

Emmet のチートシート。(私ゃいまだに Zen-Coding って言っちゃうけどね)

HTML/CSS を爆速コーディング Emmet入門 第1回 Emmetを薦める理由

Emmet は便利ですよ。Visual Studio はもちろん、Visual Studio Code でも使用することができます。

鳥獣戯画のモチーフをぺたぺた配置するだけで簡単に絵巻物っぽい画像を作成できる「鳥獣戯画制作キット」

これは、絵心のない私がとんちの効いたデザインのスライドを作る際には必要なツールな気がする。

プロ御用達!WEBデザインに役立つデザインツール13選

無料のもけっこうある。ただExpression Web4は2012年で更新が止まってるからねぇ。最新のWeb制作にはキビシイんじゃないかな。

登大遊氏が開発した新しいパケットキャプチャーライブラリ「Win10Pcap」が公開

ぜひ試してみたい。

Visual Studio Tools for Unity

Unity アプリを Visual Studio で開発&デバッグできるようにするためのエクステンション Visual Studio Tools for Unity の入手はこちらから。

ALPS VR - Mobile VR Unity framework

Unity で VR のコンテンツを作るためのフレームワーク ALPS VR はここから入手できます。

初心者でも簡単!無料のインフォグラフィック作成ツール厳選10選

絵心が無くても大丈夫な感じでしょうか? (それはダメか)

編集機能を備えた動画のGIFアニメ変換ソフト「動画 GIF 変換」

よさそう。使ってみたいけれど自分がどうこうできる動画って持っていないのが問題。

 

サービス

最近話題になったイケてるWebサービス・アプリ10選(2015年3月編)

特色のあるサービスにはアイディアとノウハウが詰まってるね。技術じゃどうにもならない部分がそこなのだと思うわけですよ。

プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!

よさげ。モダンなブラウザであれば全部使えるのかな?-

 

Web ブラウザー

新しい Internet Explorer への移行セミナー」説明資料

毎月ひっそりと行っている Internet Explorer 移行セミナーで使用しているスライドをダウンロード公開しましたー。

Project Spartan Bug Bounty Program Terms

Project Spartanの深刻なバグを見つけてくれた方への報奨金プログラムが始まっています。賞金稼ぎの皆様、どうぞ奮ってご参加くださいませ。

Flight Arcade

ここに Web ブラウザーてプレイできるフライトシミュレーターがあるぜ、Spartan、おっと、今は "Edge" って言うんだっけな、そいつで試してくれよ、...だそうです。

Bringing Asm.js to Chakra and Microsoft Edge

Edge に搭載される Chakra で Asm.js  がサポートされましたよという記事。

第2章 - A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent…

マイクロソフトの Web ブラウザーの過去からの決別。Edge でサポートされない Internet Explorer の機能についても紹介されています。

Announcing Dolby Audio for high performance audio in Microsoft Edge

Windows10の新しいWebブラウザーEdgeがDolbyAudioに対応しますよ!

Developer Resources : MSEdge Dev

マイクロソフトの新しいWeb開発者むけページ

How to deliver great-sounding content with Dolby Audio, Windows 10, and Microsoft Edge

EdgeがDolby Audioをサポートした件についての記事

Microsoft Edge Dev Platform status

IEのHTML5の機能実装状況については https://status.modern.ie/ がありましたが、Edge用に http://dev.modern.ie/platform/status/ … がありますね。

Frequently Asked Questions : MSEdge Dev

Microsoft Edge の方向性やなんやかにユーザーから寄せられた疑問と答え(FAQ)

Microsoft Developer Network | JavaScript の新機能

Edge からサポートされる JavaScript の機能、日本語ドキュメントとしてすでにけっこうまとまってた。

Microsoft Edge Web Summit 2015

Microsoft Edge Web Summit 2015 のセッション動画が公開されています。ぜひご覧ください。

Windows10版 Project Spartan 開発者向けガイド(Technical Preview)

名前が Project Spartan のままだけど日本語で読めるのはうれしい

SPDY/3 から HTTP/2 への置き換え

そうか、Edgeでは SPDY/3 のサポートはやめて正式勧告となった HTTP2 でいくことにしたのか

Internet Explorer 11 (IE11) - IT 担当者向け展開ガイド

毎月開催しているIE移行セミナーで、世間的に移行作業が本格的に進み始めているのか、IT 担当者からの具体的な質問が増えています。

 

イベント

15周年のC#とVisual Studioの現在:プログラマーは本当に料理が得意なのか――クックパッドで「C丼」作って検証してみた (1/3)

先日、Cookpad さんで作った C丼 の記事が公開されましたー。

Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう

先日、中学生プログラマーシュンくんと一緒に作業した内容が記事になりましたー。

mBaaSの「今」がわかる!
ぶっちゃけ仮想パネルディスカッション!

いやー、これは楽しかったし勉強になりました(^^) また参加したいです!

React、Angular、WinJS、Onsen UI…JavaScriptフレームワーク最新事情を一挙解説

先日行われましたhtml5j-Webプラットフォーム部勉強会の記事が公開されましたー。

for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI

<htmlday> の Build Insider のイベントで登壇した際のスライドを公開しました。

Edge だけじゃない!
build 2015 で発表されたそれ以外の Web 関連技術まとめ

<htmlday> の HTML5 ALLSTART のイベントで登壇した際のスライドを公開しました。

 

Buid2015 で発表された edge 以外の Web 技術について (1/2)

Buid2015で発表された新しい技術からWebブラウザー以外のWeb関連技術を紹介するつもりで書いたら逆に特徴的な技術を紹介する内容になってしまいました。

de:code 2015基調講演:Windows 10、クラウド、モバイル、IoT、
そしてHoloLens──全方位で逆襲するマイクロソフト (1/3)

de:code2015 のイベントレポート記事が公開されてますね。

 

Windows /マイクロソフト関連

[ファイル名を指定して実行]を使いこなすコマンド25選

こういうまとめって地味に有用。知らないコマンド、けっこうあるなー。

Microsoft Azure 概要 (2015 年 4 月版)

土曜日の JAZUG 福島のセッションで使用したスライドをシェアしましたー。

Machine Learning | 予測分析

Azure のマシンラーニング(機械学習)は驚きの低価格で 使えるので、これからマシンラーニングを学ぶ教材としても良いと思う。R 言語も使えるよ。

Azure デベッロパーセンター

クラウドコンピューティングの基礎から Microsoft Azure のサービス、費用体系まで自習書シリーズなら幅広くわかります。

セカンダリのインストーラーのアンインストールの手順

VisualStudio2015をアンインストールすると、Android SDK等のサードパーティー製ツールを削除するための手順ページが出てくる。これは便利~。

2分でわかる! Microsoft アカウントの作成方法

Microsoft アカウントの作成方法が動画で公開されましたよ。

Microsoft アカウントの作成方法が動画で公開されましたよ。

Tech TIPS:Windows OSでよく見かける重いプロセス、ベスト10

こういう資料は良いね。たとえ軽くできなくでもなにが動いているかわかると、しょーがーねーなー、って思えることもあるしね。

Windows 10 の各種エディションの紹介

Windows 10 の各エディションの詳しい説明が出てますね。

Windows 10と連係:Microsoft、パーソナルアシスタント「Cortana」のiOS/Androidアプリを発表

Windows プラットフォーム以外でも、へい、こーたーなっ!

Windowsコマンドプロンプトの入門から使いこなしまでの記事総まとめ

DOS育ちの我々世代にはあたり前でも「あの黒い画面が怖い」という若人はけっこういるそうな。(というか、20代くらいの子ってDOSって知ってる?)

新 Office を活用して業務の効率化を図ろう!

公共機関向むけOfficeのトレーニング資料が充実してる件。これ会社の研修にふつーに使えるんじゃなかろうか?

Windows の正規品と非正規品の違いと Windows 10 での対応

非正規品でも Windows 10 にアップグレードできますが、だからといって正規品になるわけではなく引き続きさまざまなリスクを負うことになります。

公共・医療・教育機関向け総合ポータル

公共・医療・教育機関向けにマイクロソフトのさまざまなソリューションを紹介する総合ポータルがオープンしましたよ。

ある程度パソコンが使える人が「Excelが使いこなせるようになりたいぞー」と思ったときに独学できるサイト4個

最近、急にMS Officeの勉強会を開催してほしい、とよくリクエストを受けるようになったのだけど、もしかしてキテる??

これは使える!覚えておきたい EXCEL のちょっとした技20選

Excel、長年使ってますが知らない機能がまだまだありますね。

Free ebook: Microsoft Azure Essentials: Azure Web Apps for Developers

電子書籍 Azure エッセンシャルが無料で入手できます。英語ですけどね。

A Developer's Guide to Windows 10

Windows 10 開発者ガイドの MVA が公開されてますよ。英語ですけどね。

Windows 互換ハードウェア開発ボード

Windows 10 IOT Coreが走るWindows 互換ハードウェア開発ボードの紹介ページが日本語化されていますね。

HoloLens brings high-definition holograms to life in your world.

Hololens のオフィシャルサイトなんてあったんですね。

Youtube channel - Microsoft HoloLens

HoloLensって、Youtobeにチャンネル持ってるんですね。ポストされてる動画の未来感、ハンバない。

PowerShell and the Active Directory Schema: Part 1

2000年ごろADSIとかWMIとかさんざん使って開発してて、ADのあまりの便利さに思わず奇声を発した思い出がよみがえりますよ。

Windows の歴史

これはアツい。

実機がなくても大丈夫!
今から始めるWindows Phoneアプリ作り入門

実機も発売されたし、とりあえず作ってみようか?

1 分でわかる Microsoft Partner Network のポイント

御社もマイクロソフトのパートナーになってみませんか?

 

Microsoft Azure: Azure Machine Learning 編
~Azure Machine Learning を使ってみよう~

Azure マシンラーニングのハンズオンが用意されています。

 

その他

超高速で重力を無視して飛ぶドローンは自作可能で作り方やパーツはネットから入手可能

最近の技術の進むスピードの加速はインターネットでの伝播が大きいよなー。

企画書・提案書の書き方を学べる他社事例やテンプレートがあるWebサイトまとめ

会社でなにかをやるにも他所になにかを頼むにも企画書は必要。苦手なので助かるわー。あとは「数字の作り方」を教えていただけたら最高。

コンテンツマーケティングの基本①:「記憶に残るアイデア」の6原則

「記録」より「記憶」、ですね。

海外の技術系掲示板に英語で質問する際の文例・定型文

これは助かる。毎回本質じゃないところの英文を考えるのはしんどい。。-

JAXAが無償公開している 30m 版全世界標高データに対応した「カシミール3D」

土地の形状や標高なんかが一目で分かりますね。

ALOS 全球数値地表モデル (DSM) "ALOS World 3D - 30m" (AW3D30)

それにしても JAXA って、全世界標高データなんて無償で公開していたのね。なにかに使えそう。

content-type 一覧

簡易なWebサーバーをプログラムで書いたときに、Webクライアントから「データを吐けば良いってもんじゃねンだぞ、クラァっ!」と叱らないためにcontent-typeの設定は必要。

TCP や UDPにおけるポート番号の一覧

どうやらまだ4126(ヨイフロ)は使われていないようだ。

 

【2015年最新版】Web 担当者なら知っておくべき Web マーケティングに関する調査データ 15 選

こういう「数字」って、自分のほしい「数字」を作るのにすごく役立つ気がする。

初心者でもほぼ無料で R 言語を勉強できるコンテンツ 10 選

R言語、Azure ML でも使えるし、ちょっと勉強してみようかな。

ライティングのプロに学ぶ!
文章力UPに役立つ良記事良書30選

がっつり、まとめ記事だった。

【リンク集】グッとくる資料をタダで作ろう?! 統計資料集

説得力のある資料に数字は必要。ほんと、助かります。

IT業界で横行する恥ずかしい英語発音

ありますね。私は知らない用語については間違えるとはづかしいので識者の方々に確認するようにしています。

技術評論社ソフトウェアデザイン編集長による「技術書原稿執筆の心得」 - Togetterまとめ

Twitter のまとめか~、と思ったら勉強になりました。

Google、Microsoft、Mozillaが協力して、ウェブ用新バイナリーフォーマットWebAssemblyを公開

なるほど、確かにブラウザにバイナリをデプロイして動かせるようになれば言語にも縛られないしパフォーマンスも上がる

ティアック、ハイレゾ音源波形編集ソフト TASCAM Hi-Res Editor 無償配布。DSD/PCM相互変換機能搭載

分割された音源を結合編集などできるようなので使ってみますかね。それにしても最近ハイレゾの話題をよく耳にしますね。

サイバー犯罪者を次々と送り出した伝説のハッカーの街「Hackerville」のドキュメンタリー映像日本語字幕付がYouTubeで全編公開中

これは興味深い。

フォードが「フォーカスRS」や「シェルビー GT350R」などの3Dプリント用データを販売開始!

これは提供元はもともとあるデータを販売できるし、ユーザーはほしい車の 3D モデルを手にできるし、とってもいいアイディアですね。

すごい人達呼んで「Webは死ぬか?」をマジメに語り合ってもらった
-前編

90年後半のころの日本語版の WIRED の記事みたいですごく面白かった。後編も楽しみです。

 

―・―・―・―・―・―・―・―・―・―・―・―・―・―・―・―・―・―・―・―

今回は途中、decode や <htmlday> があり、およそ 3 カ月ぶんのまとめとなりました。

正直、量が多くて非常に大変でした。

次回は短いスパンでまとめていきたいと思います。

Real Time Analytics

Clicky

Comments (0)

Skip to main content