やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Contour - 多彩な種類に対応したWeb用グラフライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。 そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあったものを選びましょう。今回はContourを紹介します。 Contourの使い方 まずごく基本的な折れ線グラフ。 D3.jsと組み合わせた例。 曲線グラフ。 棒グラフ。 積み上げ型の棒グラフ。 横棒グラフ。 横でも積み上げ型。 エリアグラフ。 円グラフ、ドーナツグラフもあります。 シリーズ化した円グラフ。 散布図。 散布図＋トレンド。 地図。 アメリカの地図。 CS
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
HTML5 時代のファイルアップロード方法 - ボクココ
ども、@kimihom です。 今までファイルのアップロードといえば、 input type="file" な要素を作って、 multipart なフォームで送信、というやり方が一般的だった。が、最近はAWSやHTML5の登場により、よりクールで使いやすいファイルアップロードを実現できるようになっている。 今回はその方法をご紹介したい。 File API によるファイル選択とドラッグアンドドロップ 最近のウェブサービスなら一般的になりつつあるファイルのドラッグアンドドロップ。今後は むしろドラッグ&ドロップのないサイトは古臭いし使いにくい というような所まで一般的な方法となるだろう。最近は HTML5 の提供する API のおかげでとても簡単に実装できるようになっている。 ファイル選択とドラッグ&ドロップの両方でキーになってくるのが、Fileオブジェクト。どちらの手法でやっても最終的に得ら
「プログラマでしょ？ホームページ作ってよ！」を1日で対応する - Qiita
プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
通信系テストのためのサイトのススメ：example.com、httpbin.org、badssl.com - 病みつきエンジニアブログ
HTTP通信の機能を持ったプログラムをテストするときに、どこにアクセスするか、迷うことがある。(モックが使えるならそれがいいけど) そんなときにおすすめな、example.comとhttpbinとbadssl.comを紹介してみる。 example.com 名前がそのままだが、example.com はちゃんと動くサイトである。よくサンプル文字列として(例えばメールアドレスとかで)仕込んでたのだが、最近まで本当に生きたサイトだとは知らなかった。 亜種に example.org とか example.netもある。RFC 2606に定義されているそうで、第三者に悪影響が及ばないことを保障することができるとある。Wikipediaにも記事がある。 ただ、あくまで普通のウェブサイトであり、「403をテストしたい」といった特殊なテストには合わない。そんな人にhttpbinをおすすめしたい。 htt
目的別お勧めプログラミング言語
いまやプログラミング言語は百花繚乱の戦国時代。あまりにも選択肢が多すぎて入門者なにを選んでいいのかさっぱりわからないという状態になっています。 そこで、やりたいことに合わせてオススメのプログラミング言語を紹介してみることにしました。 目的に合わせて、適切なプログラミング言語を選択しましょう！ Webサイトを作る HTML + CSS + JavaScript フロントエンドプログラミング JavaScript サーバーサイドプログラミング node.js デスクトップアプリ作りたい Electron node-webkit , Rhino, HTA+JScript モバイルアプリ作成
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Pythonでスクレイピング - Yahoo!ファイナンスから投資信託の基準価格を取得する - Qiita
#この記事について Pythonとlxmlを使って、webスクレイピングでYahoo!ファイナンスから投資信託の基準価格を取得する方法を解説します。 [追記] Yahoo!ファイナンスからのデータスクレイピングは規約上禁止されているようなので、代わりの方法を利用ください。 Pythonでスクレイピング - 投信協会webから投資信託の基準価格を取得する ##環境 Windows10 x64 Python 2.7.11 lxml 3.5.0 ##変更履歴 2016/1/16 lxml.html.parse()にurlを直接渡すようにした。urllib2のimportを無くした。 url生成の際に引数をdictに取ってからformat()で展開するようにした。 forの回し方を変更 ElementTreeからXPathで取得した要素に.encode('utf-8')する処理をあらかじめmap(
WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 - KAYAC Engineers' Blog
このエントリーは tech.kayac.com Advent Calendar 2015 の4日目のエントリーです。 こんにちは！ 今年の春、カヤックに新卒として入社した、フロントエンドエンジニアの深澤（@takumifukasawa）です。 今回は、「canvasのライブラリは手をつける順番で理解度が大きく変わる」と思った出来事について書きます。 canvasライブラリで表現の幅は広がるが、種類が多くて迷う。 僕は7月に、『1日1jsdo.it』という企画を始めました。主にcanvasの勉強のためです。 これは、「1日に1つプログラムで何か作品を作る → それをjsdo.it(※1)に投稿する」習慣のことです。 途中で1週間ほど間が空いてしまった時期はありますが、この習慣を4,5ヶ月ほど続けていて、いまのところ120個近くの作品が出来上がっています（たいてい、仕事を終えて帰ってから寝るま
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom
色で迷ったときに重宝するイメージ配色見本
色とイメージを繋ごう 色を組み合わせることで色々なイメージを表現できます。でもいい色が浮かばないってことはしばしばあることです。配色で頭を悩ませたときには、見本があるとそれをベースにして色を決めていけます。 ここでは利用度の高いカラーイメージ、もしくは興味がそそられるような色の組み合わせイメージ配色をピックアップしています。カラーリングのヒントとして配色見本を眺めてみてください。 色カラーの基本カラーリスト 配色のベースとなる色をカラーチップとして用意しておくと色選びの際に便利です。色カラーで色を考えるときに使っている色は以下の215色です。これらの色をまず土台にして配色を作っています。 無彩色グレートーンの achromatic tone カラーチップ
ポートフォリオグラフ メーカー ～ 投資信託のガイド｜ファンドの海
あなたのポートフォリオをグラフにしませんか？ ブログに簡単に貼り付けられます！ 【入力】 ポートフォリオを構成する銘柄名と評価額を入力してください。金額は割合の計算のみに使います
ズルいデザインテクニック2013 + セミフラット version
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/k…
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
ディレクターが知っておいて欲しい10個のMarkdown-マークダウン記法 - PHPサンプル実験室
マークダウンは、軽量マークアップ言語のひとつです。プレインテキスト文書をhtmlに変換する言語です。 覚える要素が少ないので学習コストが低いです。そして読み書きしやすい文章というのが特徴です。 しかしマークダウン記法は万能ではないので直接HTMLを記述して補うことも可能です。 マークダウンとhtmlが混合になっても問題はありません。 またGithubやBitBucketなどでも標準的なマークアップ言語として採用されており READMEやWikiなどの記述でマークダウンをお見かけする機会は多いと思います。 マークダウン用のソフトも多数有ります。 windowsならMarkDown#EditorやMarkdownPadなど Mac用アプリKobitoやMarsEditやMultiMarkdown Composerなどなど chromeの拡張でもTextdownというアプリがあります。 subl
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブログ（Wireless・のおと）｜サイレックス・テクノロジー株式会社