デバイスやビジターを選ばずに、HTMLとCSSとJavaScriptを使った最適な実装方法が身につくオススメの本
インクルーシブとは直訳すると、包括、全てを含むこと。Webデザインにおいて、ビジター・デバイスなどあらゆるものを排除せずに全てを受け入れるようにすることです。 デスクトップやスマホなどデバイスを選ばずに、健常者やお年寄りなどビジターを選ばずにアクセスできるよう、HTMLとCSS、そしてJavaScriptを使った最適な実装方法が身につくオススメの一冊を紹介します。 HTML, CSS, JavaScriptは関係ないと思ってるデザイナーやディレクターもデザインの在り方、これから必要となるフロントエンドのデザインパターンについて、理解を深めるために役立ちます。
Introduction · ECMAScriptとは何か？
Introduction ECMAScriptとは何か？ECMAScriptの嘘は嘘と見抜けるように results matching "" No results matching ""
PythonとJavaScriptではじめるデータビジュアライゼーション
Webからデータを取得して、効率よく整理、分析を行い効果的な可視化を実現するには、さまざまなツールとテクニックが必要です。 本書ではPythonとJavaScriptを使い分け、それぞれの言語の強みを最大限利用します。 PythonのBeautifulSoupとScrapyでデータを取得、pandas、Matplotlib、Numpyでデータ処理を行い、Flaskフレームワークを使ってデータを配信、JavaScriptのD3.jsを使ってインタラクティブなWeb可視化を実現します。データの収集からアウトプットまでの全体を視野に入れて解説しているので、実際にコードを追いながら、この一冊でデータ分析プロセスの全体像を理解できます。 まえがき はじめに 1章 開発環境の準備 1.1 本書で扱うコード 1.2 Python 1.2.1 Anaconda 1.2.2 Anacondaインストールの確
エンジニアの皆さん、技術系同人誌を描きませんか - takanakahiko’s blog
技術書典3が開催決定しました！ techbookfest.org ということで、今回は「みんなも技術系同人誌書こうよ！」といった話をしたいと思います。 ところで、技術系同人誌といったものをご存知でしょうか？ そして突然ですが、エンジニアの皆さん、技術系同人誌を書きませんか？ あなたが普段インプットしている知識を求めている方は沢山います。 そんな方に、あなたの知識を同人誌にしてにして送ることができるんです。 素敵なことだと思いませんか？ ということで、今回は 技術系同人誌を売るメリット 技術系同人誌を売るまでの流れ について、金銭面やスケジュールの面にも細かく触れて書いていきたいと思います。 技術系同人誌とは そもそも技術系同人誌とはどういったものなのでしょうか？ 技術系同人誌とは、プログラミング・工作等の成果発表や技術解説をする同人誌のことを指します。 有名なサークルだと、 techboo
画像やDIVをマウスで移動【JavaScript 動的サンプル】
青字部分を追加するだけで移動が可能となります。（この枠も移動可能です） <div class="sb1" cmanOMat="move"><input type="button"value="移動可能"></div> <img src="cat1.jpg" class="cat1" cmanOMat="move"> <img src="cat2.jpg" class="cat2" cmanOMat="move"> 外枠からはみ出さないように移動することも可能です。（この枠も移動可能です） <div class="areadiv" cmanOMat="area"> <img src="dog1.jpg" cmanOMat="movearea"> <img src="cat3.jpg" cmanOMat="movearea"> <img src="dogcat.jpg" cmanOMat="m
【javascript】クリックで要素を追加・削除・操作する。 | Fantastech（ファンタステック）
ボタンクリックで要素を操作する 今回CodePenに追加したのは、「ボタンをクリックしたタイミングで要素を操作するイベント」です。 追加 削除 書き換え ▲これをjavasctiptで操作します。javascriptの基本は別の記事でもご紹介しているので、よくわからない方はぜひチェックしてみてくださいっ！ function（関数）を勉強したから、わかりやすく教えてみる。 Fantastech!! もっと見る では早速始めましょー！ ボックスの色を変える 色の指定を書き換えるボタンを作り、そのボタンをクリックすると「ボックスの色が変わるイベント」が発火します。 See the Pen ボックスの色を変えるイベント by Chef (@chef-aomori) on CodePen. テキストの追加・削除・書き換え ボタンをクリックすると、ボックスの中にテキスト入りのp要素を追加したり、削除し
【JavaScript】非同期通信のためにPromiseをつかう
JavaScriptで非同期通信を利用する際に利用できるPromiseというのを勉強したのでメモ。 【参考URL】 http://qiita.com/koki_cheese/items/c559da338a3d307c9d88 https://www.htmlhifive.com/conts/web/view/study-room/async-programming-with-deferred Promiseというのはデザインパターンのひとつらしい。 なのだけど、デザインパターンのWikipedia記事には記述がないのでデザインパターンということではないのかな。ただのライブラリ？ Promiseというのはオブジェクトである。 PHPやJSでは、関数を呼び出した際、リターンで値が戻ってこない限り次の処理に進めないので、まず素早くPromiseオブジェクトを返しておき、データの準備が整ったらそ
TypeScriptを使った方がいいケースとは？ | POSTD
去年の夏、私たちは大量のコードベース（18,000行以上の コード行数 ）をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。 型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケース コードサイズ ：ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。 特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptの トランスパイラ は明白な誤りを
初学者としてJavaScriptを学ぶ | さにあらず
はじめに 僕が以前書いたModern JavaScript 概観、そして Electron へは、読んで貰えただろうか？ あれは初学者には全く向いてないエントリだ。 あのエントリは、僕の理解したモダンな JavaScript 全体について概観することを目的としているからね。 あれを読んで、「今の JavaScript ってこんなに大変なのか…」と感じた人は多いだろう。 しかし、ある程度のソフトウェアを開発するために技術全般を概観しようとすれば、ああいう分量になるのは致し方ない。 と言う訳で、今回はちゃんと初心者向けのエントリを書いた。 少し多く感じるかもしれないが、丁寧に説明しようとしたからだと好意的に解釈して欲しい。 開発環境 Thinkpad X1 Carbon 2016 年モデルに Windows10 をインストールしてある。 ハードウェアスペックは、こうだ。 CPU i7 66
JavaScriptの循環importを図で可視化してみた - Qiita
先日、JavaScriptファイルのロード中に、循環importによる初期化エラーが出て困ったので、図をつくって可視化してみました。 生成物は一番下にあります。 JavaScriptにおける他ファイル参照 ブラウザ上で動くJavaScriptコードを書くうえでは、奇妙な制約が多々あります。 言語自体が奇妙な場合も多いですが（本当に多い！）、他ファイルのimport的な機能は、もともと「ブラウザが通信してソースファイルをダウンロードしないといけない」という都合もあるため、なかなかに無茶な仕組みになっています。 そもそも最近までimport自体が存在しなかったので、適当なライブラリで専用の記法を使うか、トランスパイラで糖衣構文に変換するという手法が用いられています。 2015年のECMAScript2015（ES6）でようやくimportという構文が仕様に入りましたが、今のところどのブラウザも
小〜中規模サイトのフロントエンド・コーディング規約 CSS・JavaScript編 - Qiita
2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約 CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │ ├ scss │ │ ├ lib ... 外部ライブラリなど │ │ ├ sprite ... spritesmith などで生成したファイル │ │ ├ foundation (base) ... 変数や mix
JavaScript ベスト・オブ・ザ・イヤー2016 - Qiita
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Reduxでしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？ 目次 2016年人気プロジェクトランキング フロントエンドフレームワーク Node.jsフレームワーク Reactボイラープレート モバイル コンパイラ ビルドツー
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近の JavaScript について 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
2つのセレクトボックスを連動させるjQuery - Qiita
やりたいこと 2つのselect要素を連動させる。 1つめの選択肢を選ぶと、2つめの選択肢が動的に変わる。 色々なサイトを見てみたが、スマホだとうまく動かないコードがあったりした。 こちらのコードがシンプルでいい感じ。 プラグイン不要！ jQueryで複数のセレクトボックスの選択肢を連動させる ほぼ上記サイト通りだが、optgroupを使いたかったので少しだけ変更した。 →動作デモ HTML 1つめのセレクトボックス selectにparent、初期値になるoptionにはmsgというクラスをつけておく。 <select class="parent" name="日付" required> <option value="" class="msg" disabled selected>-----日付を選択-----</option> <option value="1/11(水)">1/11(
デザインパターンをJavaScriptとJavaでの実装を比較して理解する【随時更新】 - Qiita
はじめに 大学の研究室でデザインパターンをPythonで書くことになりました。 だがデザインパターンもちゃんと理解できていないのに、Pythonで書けないと感じました。 なので、Javaと好きなJavaScriptでのデザインパターンを比較して理解していこうと思います。 全てのパターンをこの記事に書くと長くなってしまうので、パターンごとに記事を作り下の表を埋めていく形にしていきます。 ※パターン名がリンクになっています。 デザインパターンとは ソフトウェアの設計でよく起こる問題を解決し、再利用可能にする慣例 GoF(Gang of Four)の23種類のデザインパターンが有名である GoFは『エーリヒ・ガンマ』『リチャード・ヘルム』『ラルフ・ジョンソン』『ジョン・ブリシディース』の4人 『オブジェクト指向における再利用のためのデザインパターン』でデザインパターンとうい用語を初めてソフトウェ
JavaScriptで砂嵐 - Qiita
はじめに テレビの砂嵐をご存知だろうか。アナログテレビで画像を受信できない時に出るノイズのようなものである。たまに歌のネタなんかにされたりもするが、テレビの地上波がデジタル化されて久しいので、今の若い人は知らないかもしれない。 テレビの砂嵐には有名な都市伝説がある。地方のテレビ局の夜勤の人が、放送終了後の砂嵐の時間帯に会社の機材でAVを見ようとしたら、うっかり公共の電波に乗せてしまい、すぐに数十件のクレームの電話が来たという。 これは、「放送終了後の砂嵐を見続けている人が少なくとも数十人いる」という点が怖い、というオチなのだが、なんとなく砂嵐を見てしまう気持ちもわからないではない。最近、自分の液晶ディスプレイが変な壊れ方をして砂嵐の画面になった時、妙に見入ってしまった。砂嵐画面には人を引きつける何かがあるようだ。 というわけで砂嵐をJavaScriptで再現してみよう。コードは に置いてあ
JavaScriptでシンプルに始めるクリエイティブコーディングその1 - Qiita
クリエイティブコーディングとは アートやデザインなど可視化表現のためのコーディング技法のことです。 巷に存在するコーディング環境としてはWebGLやProcessing, openFrameworksまたはArduino等が挙げられます。 これらは、現在メディアアートを始め、広告やエンターテイメントといった様々な形で人々の目に触れるようになってきています。 この記事で何をやるか かなり原始的なところから始めようと思います。ですので、複数回に渡って、技法を紹介していこうと考えています。 表現を実現するためにHTML5で追加された、2Dのグラフィックスを描く<canvas>要素を利用します。 「円を描いて、それを移動させる」 初回はシンプルで、円の移動のみやります。 円の描画 canvasをつかって円を描画するのは、以下のコードで実現できます。（最初はコピペでも動くように、html全体を記載し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
polamjag’s gists
Keras.js - Run Keras models in the browser
謎だったJavaScriptのコードたち - Qiita
