実はスゴイ「CodePen」の隠れた必殺機能の使い方をまとめてみた！ : うえぶはっく
ブラウザ上で、手軽にWebプログラミングを書いて実行できるコードエディタ「CodePen」をご存知の方は多いと思います。 使えば使うほど、このサービスが多機能であることに気付くわけですが、特に便利だと感じるちょっとマニアックな使い方だけをピックアップしてみました。 一応、公式のドキュメントには書いてあるのですが、「翻訳が面倒な人」や「そもそも知らない」…という人に向けて紹介しておきます。 「ソースコード」のホスティング機能！ 「CodePen」では、簡単に「HTML/CSS/JavaScript」を書いて「実行＆保存」できますが、書いたコードはどこからでも参照することができます。 例えば、何かコードを書いて保存すると専用の「プロジェクトURL」が自動的に発行されます。 このURLの末尾に、「.js」「.css」「.html」と追記するだけで参照できるようになります。 JavaScriptフ
Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた！ : うえぶはっく
「Web Audio API」を使うと音声の「再生」だけでなく、音の「生成」や「加工」などもJavaScriptだけで手軽にプログラミングすることが出来るようになります。 ただ、ちょっとクセがあるので「扱いにくい…」と感じる人も少なくないでしょう。 そこで、誰でも簡単に「Web Audio API」を活用できるJavaScriptライブラリ「Tone.js」について、今回は簡単なサンプルと共にご紹介しようと思います！ ファイルを準備しよう！ まずは、「Tone.js」を使ったサンプルを作るのに必要な「index.html」と「app.js」を用意しましょう。 「Tone.js」自体は、GitHubからダウンロードするか、以下のURLから利用可能です。 https://tonejs.github.io/build/Tone.min.js ひとまず、「index.html」はこんな感じでOKで
Web上に表示された画像をそのまま編集できるJSライブラリ「DarkroomJS」を使ってみた！ : うえぶはっく
画像編集系のJavaScriptライブラリはいくつか存在しますが、その中でも非常にシンプルで扱いやすく、直感的な操作が人気の「DarkroomJS」をご紹介しようと思います！ 任意の「imgタグ」を指定することで、専用の「画像編集ツールバー」が表示されるので、そのままWeb上で加工をすることが出来るようになります。 必要なファイルを揃えよう！ 「DarkroomJS」は、Canvas APIを効率よく扱える「fabric.js」をベースに開発されていることを踏まえて、事前に必要なファイルは以下の3つになります。 darkroom.css darkroom.js fabric.js これらのファイルは、GitHubからダウンロードして使うか、公式サイトのリンクを利用すると簡単です。 【darkroom.css】 http://mattketmo.github.io/darkroomjs/bu
2000種超えのWebデザインを横断検索できる「Collect UI」を使ってみた！ : うえぶはっく
Webやアプリを開発する際に必要となる「Webデザイン」の勉強&参考に最適なサービス「Collect UI」のご紹介です！ 圧倒的なコンテンツ数を誇っているのが魅力的ですが、細かくカテゴライズされているので「ログイン画面」や「フォーム」など、自分が必要としているシーン別に探しやすいのも特徴でしょう。 使い方！ サイトにアクセスすると、およそ2000種類を超えるオシャレなWebデザインの一覧を見ることができます。 これらのデザインは、「Dribbble」などから抽出されているのですが、ランダムに選ばれているのではなく、人の手によって「最もイケてる」と思われるデザインだけをキュレーションしているのが特徴です。 さらに、ユニークなのは画面左側にズラッと並んでいるカテゴリ！ 2016年2月29日現在で、なんと117カテゴリに分けられているので、かなり細かい絞り込み検索ができるでしょう。 ほんの一部
わずか1行のコードで「リアルタイムWeb通知」が実装可能になったMilkcocoaを試してみた！ : うえぶはっく
国産のバックエンドサービスとして人気の「Milkcocoa」ですが、いつの間にか「リアルタイムWeb通知」を実現できるようになっていたのでご紹介しておきます！ これが出来るようになると、自分のWebサイトやサービスなどを利用しているユーザーに向けて、スマホの「プッシュ通知」のような感覚で、リアルタイムに任意のメッセージを送信し、ユーザーのブラウザ上に表示させるようなことが出来るので便利です。 今回は、チュートリアル形式でサンプルを作っていく過程をご紹介しようと思います！ まずは初期設定をしよう！ まず最初に「Milkcocoa」にログインし、管理画面から新しいアプリを作成します。(無料プランで問題ありません…)
人気Webサービスの「UX改善履歴」を時系列で閲覧できる「UX Timeline」が面白い！ : うえぶはっく
Dropbox、Spotify、Uber、Airbnb…など、国内でも人気となっているWebサービスのサイトデザインやUXなどを、時系列でどのように改善されていったのかをチェックできるサービス「UX Timeline」のご紹介！ 公開されているサービスはまだ少ないですが、タイムライン上で変化をチェックできるのは面白く、UXやデザインの勉強にもなるのでオススメです。 この中から、好きなサービスを選択してみましょう！ すると、過去から現在まで時系列にWebサイトがどのように変化していったのかを閲覧することが出来るようになっています。 例えば、空き部屋を貸し出せるサービス「Airbnb」の場合を見てみましょう。 2008年当時は、まだ名称が「AirBed&Breakfast」になっているのが分かります。
JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
プログラミング不要で、マウスオーバー時にポップアップ表示ができる超軽量CSSライブラリ「Hint.css」を使ってみた！ : うえぶはっく
今すぐ、自分のWebサイトやブログなどにポップアップ表示を導入できる超軽量なCSSライブラリ「Hint.css」のご紹介！ HTMLの好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。 そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！ 使い方！ 利用方法はシンプルで、GitHubからファイルをダウンロードするか、以下のCDN経由でCSSライブラリを取得します。 https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.0.0/hint.min.css HTMLの骨組みはこんな感じになるでしょう。 // index.html <!doctype html> <html> <head> <meta charset="utf-
わずか6.9KBの超ミニマルなCSSフレームワーク「Milligram」を使ってみた！ : うえぶはっく
手っ取り早くWebページを作る時に、素人っぽく見えないデザインで、なおかつ学習コストの低い軽量なCSSフレームワーク「Milligram」のご紹介！ 名前の通り…最小限の構成で作られており、わずか数キロバイトという容量ながら、レスポンシブ対応はもちろんのこと、テーブル、ボタン、フォームなどの見た目も非常にクールなデザインが提供されています。 新しく覚えることも非常に少ないので、プロトタイプ作りにも最適です！ 使い方！ まずは、公式サイトからファイルをダウンロードしてみましょう。 圧縮版の「milligram.min.css」がわずか6.9KBという超軽量であることが確認できるでしょう。 ちなみに、gzip圧縮すると「2KB」ほどになるようです…。 ダウンロードが面倒な方は、こちらのCDN経由からでも利用できます！ https://cdnjs.cloudflare.com/ajax/libs
実在するWebサービスを作りながらプログラミング学習できる「CodeUpStart」が面白い！ : うえぶはっく
プログラムの基本的な文法や例題を解くのではなく、実際に動くWebサービスを完成させることに重点を置いたプログラミング学習サービス「CodeUpStart」のご紹介！ 海外のサービスなので英語ではあるものの、すべて動画による学習構成になっているので、見ているだけでどのように制作していけば良いのか分かりやすくなっています。 また、プログラミングを最小限に抑えるために、便利なWebサービスをいろいろと連携させるテクニックも紹介されていて勉強になりますよ。 使い方！ サイトのトップページから無料の「ユーザー登録」を済ませて、学習したいコースを選択すればOKです。 例えば、オリジナルの「ポートフォリオ」を制作するコースを選んでみましょう！
JavaScriptで「OS」を開発した猛者が現れ、ブラウザ内にデスクトップ環境を構築できる「OS.js」が話題に！ : うえぶはっく
その名もズバリ「OS.js」というJavaScriptライブラリです。 誰かのイタズラかと思いきや、使ってみるとブラウザの中にもう1つ別のパソコンが起動しているような感覚になり、その完成度の高さに驚かされます。 APIも提供されており、「OS.js」で起動したデスクトップ環境用のアプリケーションを自分で開発することも可能になっているのは面白い点でしょう。
人気Webサービスのリニューアル情報を収集する「ReDsgn.Co」は、使いにくいSNSのUIも提案する！ : うえぶはっく
Google、Yahoo、facebookなど、有名なWebサービスがリニューアルデザインを実施したタイミングで、どのように変更されたのかをまとめて閲覧できるWebサービス「ReDsgn.Co」のご紹介です！ また、なかなかUIを変更してくれない人気Webサービスに対して「こんなデザインにして欲しい！」というコンセプトデザインも世界中から集めて公開しているので、Webデザインを学習されている人にもピッタリなサービスと言えるでしょう。 「ReDsgn.Co」サービスの概要 トップページでは、すでに多くのリニューアルデザインがタイル形式で閲覧できるようになっています。 例えば、最近リニューアルしたWordPressやGoogle+のリニューアルデザインであったり…、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最新のIT・Web技術を動画で学べるマイクロソフトの「Channel９」が、やたら勉強になる件！ : うえぶはっく