フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
D3.js の force layout を試してみる - 雑食性雑感雑記
概要 D3.js で Force layout を動かしてみる。 理解用に簡単なサンプルを作る。 その他、オプションを試してみる。 ラベル表示と矢印を追加。 情報 D3.js って…？ 日本語サイト D3 = Data Driven Document データに基づいてドキュメント (要は DOM) を操作するための Javascriptライブラリ。 svg を使った華麗なグラフのデモが目立つが、DOM操作のライブラリとしても優れている (と、使ってみて思った)。 Force layout force = 『力』とか『エネルギー』とか。 スターウォーズのアレ？？ 要素同士が影響し合っている状態を node (円) と link (線) で表している。 説明よりもサンプル見た方が早い。 Force-Directed Graph 作ったサンプル jsdo.it 上に置きました。 作り方とかは以下
d3.js超初心者向け ①→②を表現してみる - Qiita
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。
SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。 そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。 これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ 目次 表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！ サーバーの設定に気をつけろ！ 表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips
はじめに PhantomJS - Scriptable Headless Browser PhantomJS はヘッドレスな（ブラウザ画面のない）QtWebKit ベースのブラウザで、JavaScript の API を通じて、そのブラウザを自由自在にあやつることが出来ます。使用シーンとしては、Jenkins などの CI ツールとの組み合わせによる Web ページの GUI の自動テストや、Web ページのスクリーンキャプチャ、スクレイピングなどが挙げられます。 今回は、ログインが必要なページの情報をパースして自分専用に RSS 化したいなと思い、３つ目のスクレイピング用途をベースに調べてみました。その内容を備忘録として残しておきます。 出来るようになること ログインが必要なページの HTML を取ってくる ログインが必要なページのスクリーンキャプチャを撮る PhantomJS の導入
Bootstrap - Wikipedia
BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。 GitHubで四番目に人気があり[2]、アメリカ航空宇宙局やMSNBCなどに採用されている[3][4]。 HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。 Ver2.0以降では
JavaScriptを捨ててPythonでWebフロントエンドを書いてみよう! - Qiita
どうも、オリィ研究所 (http://orylab.com) の ryo_grid こと神林です。 さて、皆さん! JavaScript書いてますか! 私も書いてます。 しかしながら、C, Java, Ruby, Python なんかでコードを書いてきた時間の方が長いために、どうも JavaScript の言語仕様に馴染めないでいる私がいます。 そこで、Webフロントエンドで、JS以外の言語を使う選択肢がないか探してみたところ、BrythonというブラウザJSで実装された (= ブラウザ内で動作する) Python処理系を見つけたので、試してみました。 Brython - A Python 3 implementation for client-side web programming とにかく試してみる ネットの海をさまよいつつ、書いてみました。 お題はプログラミング初学者向けの課題でよ
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
WebStorm - JetBrains公式パートナー | 株式会社サムライズム
JavaScript / TypeScript IDE WebStormは軽量かつ強力なJavaScript、TypeScriptIDEです。インストールしたら面倒な設定ななしにすぐに使うことができ、リファクタリングやビルド、コード補完など複雑な操作も簡単に行えます。 素早いナビゲーションや検索、インテリジェントなコード補完、スマートなインスペクタによる問題点の洗い出しなどを備えているほか、リモート開発やコラボレーション機能、AI Assistantによる支援も可能です。 個人の非商用利用は無償 WebStormは個人の非商用利用や非商用のOSSプロダクト開発には無償でご利用いただけます。 AIでIDEを強化 IDEをAIで強化するAI Assistantや、スマートなコーディングエージェントJunieを使うことでリファクタリング、ドキュメントやコミットメッセージの作成など、様々な場面でA
AJAXでJSONデータを表示＆保存する | カテゴリー: AJAX | 作業メモ
JSONファイルから全データを読み込んで新規データを追加するに引き続き、AJAXの勉強に以下のようなものを作ってみた。 公安9課のメンバーデータが保存されたJSONデータを読み込んで、メンバーデータ表示用のプルダウンを表示。同ページのフォームから入力されたデータをページ遷移なしでJSONデータとして保存し、プルダウンに保存された項目を反映。 ミニマムな雛形として作ったので、エスケープ等してないがajaxなデータ保存＆読み込みの基本形はこんな感じと。 HTML プルダウンメニュー表示の空のselectを用意。「onsubmit=”return false;”」でページ遷移無効に、javascriptがオフられてた場合も考えてactionとmethodはそれぞれ書いておく。 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
初心者でも分かる！クライアントサイドとサーバーサイドの違い | THE LANCER
プログラミングを勉強し始めた人からよく聞くのが「解説書に出てくる言葉自体が難しくて理解できない」といったものがあります。そこで、今回は初心者泣かせの言葉の一つクライアントサイドとサーバーサイドについて解説していきます。 クライアントサイドとはそもそもクライアントサイドとはアプリケーションを実行する場所がクライアント側という意味です。ここでいうクライアント側とはホームページに訪れた利用者です。 利用者側のパソコンやスマートフォンなどに入っているブラウザがプログラムを実行しています。例えば、JavaScriptやCSSなどはWebサーバーから結果がブラウザに返ってきてブラウザ側で処理をする時に動作するのでクライアントサイドの言語と言えます。 サーバーサイドとは一方サーバーサイドはクライアントサイドがお客様側だったのと反対にアプリケーションの提供側がプログラムを実行します。この場合はインターネッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chart.js
Vue.js - The Progressive JavaScript Framework | Vue.js
HTML5 登場からみるフロントエンド開発技術の進歩 - monoe's blog - Site Home - MSDN Blogs
PythonでさくっとWebスクレイピングする (JavaScript読み込みにも対応しつつ) - Qiita
jQuery で JSON ファイルを読み込む - Qiita
