Web Accessibility | What is Web Accessibility? | Udacity
In this course you’ll get hands-on experience making web applications accessible. You’ll understand when and why users need accessibility. Then you’ll dive into the “how” In this course you’ll get hands-on experience making web applications accessible. You’ll understand when and why users need accessibility. Then you’ll dive into the “how”
トレンドは優れたUXとSPA・BFF！ 急成長企業の最新フロントエンド開発を体験しよう
FacebookやNetflixなど、著名なサービスを提供し成功を収めている企業は、最新のフロントエンド開発技術をいち早く取り入れ、優れたUX（User Experience）を実現しています。加えて昨今では、ビジネスニーズにすばやく対応できるクラウドネイティブな開発が求められます。技術が激しく移り変わるフロントエンド分野で、最先端の開発はどのように実現できるでしょうか。富士通のWebアプリ開発ツール「K5 Playground」の開発チームによる本連載では、Reactなどを使ったモダンなアーキテクチャをベースに、チャットボットやSNS連携アプリなど、さまざまなWebアプリを「数10分で」開発できるようになることを目標とします。第1回では、Webアプリの変遷とトレンドをサクッと追いつつ、現在はどのようなWebアプリを開発すべきか、構造や手法を考えてみましょう。 顧客との接点としてのUX～成
7stepでつくる、ユーザーエクスペリエンスジャーニーマップ | ajike switch
こんにちは。 最近ガムを１日１本くらい消費していて 健康被害が気になっている山口です。 今日はカスタマージャーニーマップの書き方をご紹介します。 テンプレートを気にしないで、手書きでざざっと作れるようになると便利です。 カスタマージャーニーマップとは？ サービス全体のデザインを考えるツール カスタマージャーニーマップの説明も色々ありますが、『サービス全体のデザインを考えるツール』という説明が１番わかりやすい気がします。 誰かの何かを解決するのがデザインの本質、と言います。 カスタマージャーニーマップはまさにUXをデザインするツールの一つ。UXを向上させるために、ユーザーの視点から課題を見つけ、解決策を考えることができます。 目指すUXデザインを可視化して共有できるツール また、プロジェクトのストーリー全体を可視化することができるので、色々な人とプロジェクトが目指す「UXデザイン」を共有する
.htaccessを使ったよく使うリダイレクトまとめ
Webサイト公開後、.htaccessを使って旧ページから新ページにリダイレクトをかけます。何度も同じようなことをしているのですが、やはり忘れっぽいので、よく使うリダイレクトの書き方をまとめておきます。 私と同じような誰かのお役に立てれば幸いです。 私がよく使うリダイレクトは301リダイレクトのため、この記事のコードは全て301リダイレクトとなっています。302リダイレクトを用いる場合は、適宜変更してください。 0. .htaccessとは？1.あるURLから別のURLへのリダイレクト2.ディレクトリまるごとリダイレクト3.類似したファイル名のURLをまとめてリダイレクト4.特定のディレクトリをリダイレクトから除外する5.特定のファイルをリダイレクトから除外する6.wwwなし / ありを統一する7.https(SSL)のURLへリダイレクトまた、上手く動作しない場合のパターンも挙げてみまし
2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と
あなたのサイトは大丈夫？簡単手軽にサーバーのパフォーマンスを計測する方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
あなたのサイトは大丈夫？簡単手軽にサーバーのパフォーマンスを計測する方法 2015.01.20 2018.02.08 SEO 「最近運営しているサイトが重たい」 「データを増やしたら突然処理速度が遅くなった」 「もっと今のサイトのパフォーマンスを早くしたい」 サイトやWebサービスを運営していてこう考えたことはありませんか？ 今回はWebサイト・Webサービスの「サーバー側のパフォーマンス」を計測する為の指標と、その方法について簡単にご紹介します。 プログラムのことがわから無くても簡単に計測することができますので、是非ご一読下さい。 チェックすべきはTTFB PHPやJavaといったサーバーサイドの言語の処理時間はTTFBでおおよその値を確認することができます。 TTFBとは TTFBとは「Time To First Byte」の頭文字をつなげた言葉で、「最初の1バイトが到着するまでの時間
プログラマのための便利なオンラインエディタ厳選17個まとめ | Web活メモ帳
プログラムの開発にはテキストエディが必須ですよね。最近はWEBブラウザだけで簡単にプログラム開発ができるようになってきているので、手軽にプログラムを試して見る事ができます。 本日はオンラインで開発する事ができるサイトをまとめてみました。 詳しくは以下 wonderfl 面白法人カヤックが提供しているFlashをつくれるオンラインサービス。 既存のフラッシュをforkして新しいアプリケーションをコンパイルする事ができます。 公式サイト Zoho Creator Zoho CreatorでGoogle App Engine用のPythonソースが生成可能です。 公式サイト Amy Editor Mac風インターフェイスのエディタ。 HTML、JavaScript、PHP、Python、Ruby、Cのカラーリングが可能になっており、Ctrl + Z などのショートカットキーも動作。 タブ入力や行
z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
ブラウザから手軽にチェックできる正規表現テストツールまとめ
正規表現は適切に使うと、プログラムの手間を削減できる強力なツールになります。 ただ、正規表現を使うと動作テストが面倒だったり、慣れないうちはどんなことが書いてあるのかわからないなんてこともあると思います。 そんな時に、便利な正規表現のためのテストツール＆可視化ツールの紹介です。 正規表現のテストツールなんて、どれも同じかと思いきや、結構それぞれ特徴ある機能があるものも多いので、メモがてらまとめてみました。 photo by Jeff Kubina 正規表現チェッカー 正規表現チェッカー PHP: preg_match() / JavaScript: match() PHPのpreg_matchとJavaScriptの matchの実行結果を返してくれる定番のテストツールです。 日本語のリファレンスやサンプルがあるので、メタ文字などを忘れてしまった時などにも便利。 以下のように、PHPとJa
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
Google Maps Platform のドキュメント | Street View Static API | Google for Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Street View Static API 単純な HTTP リクエストを使用して、非インタラクティブなストリートビュー パノラマやサムネイルをウェブページに埋め込むことができます。他のコードは必要ありません。
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
jQueryのセレクタ解説 - jQuery入門 - [SMART]
jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img") 例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 $("img").css("border","3px solid red"); セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。 セレクタは要素名以外にも、ID名やCLASS名を指定することができます。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img.photo") IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。 $("img#photo01")
![jQueryのセレクタ解説 - jQuery入門 - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カスタマージャーニーマップとは？ UX向上を達成する7つの事例と作成方法 | 実践！ プロも使うラピッドUX手法
ul、li タグで・(点)を非表示にする - おはようバッファロー
http://www.uiplayground.in/css3-icons/
Facebook
