Reactを使って本気でアンケートシステムをつくった - Qiita
この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説
HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css
WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。 HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。 normalize.email.css -GitHub normalize.email.cssの特徴 normalize.email.cssの構成 HTMLメールを作成する時のテンプレート normalize.email.cssの中身 normalize.email.cssの特徴 ほとんどの電子メールクライアントに有用なデフォルトのスタイルを提供。 ネイティブプラットフォームのフォントスタイルを作成。 HTMLメールの一般的なバグに対応。 コメントを使用したスタイルの説明。 normalize.email.cssの構成
WebAssemblyの基礎から最新動向まで、@chikoskiに聞いてきた！
WebAssemblyの基礎から最新動向まで、@chikoskiに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、WebAssemblyコミュニティを率いてらっしゃる清水 智公さん（@chikoski）です。清水さんのセッションは「WebAssembly MVPまとめと、今の議論の内容からいくつか」でした。 ※スライド資料はこちらで公開されています。 WebAssemblyとは何か？ 白石: 今日はよろしくお願いします。まずは自
[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox
チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。
![[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox](https://cdn-ak-scissors.b.st-hatena.com/image/square/1dd910b325a6cc2c3c080f26dc7ac70824dc0015/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110701.png)
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
フロントエンドチェックリスト（日本語訳） - 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
HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。 ..
まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。 https://www.nnn.ed.nico 一日8時間勉強時間があるなら、だいたい一ヶ月で終わる内容。 月額1000円だけどしっかり勉強すれば一ヶ月の無料期間中に終わると思う。 もともとN高等学校のノンプログラマーの生徒をWebエンジニアとして就職させるために作られたカリキュラムで講師曰く去年はこれで二人エンジニア就職を決めたらしい。 内容も相当親切に説明していて、プログラミングで何か作るだけじゃなくて、就職に必要な環境構築やセキュリティまでみっちりやる。 http://qiita.com/sifue/items/7e7c7867b64ce9742aee#%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88%E3%82%92%E3%82%82%E3%81%A8%E3%81%AB
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
【Bootstrap製】90ページ超えの無料HTML5／CSS3テンプレート素材 Titan
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 Angularは基本的にWebブラウザで実行されるJavaScriptアプリケーションのフレームワークですが、一方でサーバサイドでAngularが備えるHTML構成機能を実現する、いわゆるServer Side Rendering機能の開発も「Angular Universal」として進んでいます。 そのため、Server Side Renderingに興味を持つAngularデベロッパーも増えてきました。 ng-
Web業界は進化が速い！自分がHTML, CSS, JavaScriptで何を知らないか、スキルをチェックができる -Know it all
HTML, CSS, JavaScriptをはじめ、Web制作に必要とされる知識で何を知らないかが分かり、自分のスキルをチェックできる「Know it all」を紹介します。 自分の現状を知ることで、次に何をすべきかに役立ちます。
EmmetでHTML 5.1のレスポンシブイメージを効率よく記述しよう - Qiita
HTML、CSSを短い文字数で打てるプラグインEmmetを使いこなせば、コーディングの時間は大きく短縮されます。昨今のEmmetでは、HTML 5.1のレスポンシブイメージ(※)を効率的に記述できることをご存知でしょうか？ 本エントリーではEmmetでレスポンシブイメージのコードを効率的に記述する方法を紹介します。 ※ 参考記事「レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA」 srcset の記述 レスポンシブイメージでは、デバイス環境に応じた最適なファイルサイズの画像を表示するためにimg要素のsrcset属性を用います。Emmetでは次のように記述します。
この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016
この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016 川田寛（ピクシブ株式会社） こんにちは、ふろしきです。HTML5 Conference 2016の当日は、38度近くの熱があり、発表時はろれつが回ってませんでした。しかし、伝えたいことは伝えられたと思っています。その内容とは… 「この1年でWebのパフォーマンスの技術にどんな動きがあったのか」 というダイジェスト。ここで話した3つのテーマについて、本記事でもご紹介。 1. レイアウト処理を減らす HTML5がバスワードするよりもずっと前から、CSSでアニメーションさせることはごくごくあたりまえ。JSが扱えないデザイナーであっても手軽にアニメーションできる良い世界になりました。しかしそこに、モバイルが出現したことで、JSだけで満足という人たちもCSSの機能を活用しなくてはいけなくなりました。 モ
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPAをパフォーマンス・チューニングした話
コーダーの仕事が楽になる！レスポンシブ対応のさまざまなHTMLテンプレートが驚くほど簡単に作成できる -Aperitif
閲覧ページを単一のHTMLとして保存するChrome拡張「シングルHTMLダウンローダー」 - 窓の杜
