超簡単に数値を 1,234 1.2万 12.3万 123万 1,234万 1.23億 ... に整形する方法 - Qiita
超簡単に数値を 1,234 1.2万 12.3万 123万 1,234万 1.23億 ... に整形する方法JavaScripttips この記事は第2のドワンゴ Advent Calendar 2018 18日目の記事です。 ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています、 @misuken です。 まだ空きがあったので 14日目の React + TypeScript における ViewComponent の美しい合成技術 に続いての投稿します。 今回はニコニコ生放送でも使用されている、超簡単に数値を 1,234 1.2万 12.3万 123万 1,234万 1.23億 ... に整形する方法を紹介します。 処理 早速ですが超簡単なコードがこちらです。 function format(n, patterns) { const s = String(Math.abs(n
John Maeda | Design in Tech Report
Where did the 2020 Design in Tech Report go? There was a concern raised by an organization representing an artist who passed away that artwork within the Design in Tech Report (a Tony Ruth commission) was deemed as a potential copyright violation. Therefore it has been taken down. Sorry! Download the 2019 report in PDF form. Design in Tech Report 2018 The interactive 2018 #DesignInTech Report is a
ニコ生の公式とチャンネルのコメントサーバの仕様について | ニコラボ
2015年3月頃にニコ生のコメントサーバの仕様が変更されたのでその仕様について。新仕様ではアドレス番号とポート番号が増えて、別座席への法則が以前より複雑になり今後もアドレス番号とポート番号が増える可能性がある。 毎回仕様変更で追記しているとページが肥大化するので google スプレッドシートにまとめた。 2015年6月18日（lv225158304）以前のコメントサーバの仕様 2015年6月18日（lv225158305）以降のコメントサーバの仕様 2015年7月30日（lv229843487）以降のコメントサーバの仕様 2015年10月22日（lv239347132）以降のコメントサーバの仕様 2015年11月27日（lv243479485）以降のコメントサーバの仕様 2015年12月17日（lv245691588）以降のコメントサーバの仕様 チャンネル生放送 以前と同じように放送枠を
JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
“人類最後の職業”はプログラマーだ――プログラミングを学ぶ意味とは | 文春オンライン
AI時代の到来が叫ばれるようになり、“プログラミング”という言葉を耳にする機会が増えてきた。しかし、「プログラミングが重要だ」と言われても、漠然としていて何だかよく分からない、という人が多いのではないだろうか。プログラミングを学ぶことにどのような意味があるのか、カドカワ株式会社代表取締役社長の川上量生氏が解説する。 （出典：文藝春秋オピニオン 2017年の論点100） プログラマーが“人類最後の職業”に 私はコンピューターのプログラミングを義務教育に取り入れるべきだと考えています。それは、プログラマーが〝人類最後の職業〟になりうるからです。プログラミングをマスターしていれば、世界中どこに行っても食いっぱぐれることはないという「実益」が第一の理由です。 進駐軍の時代なら、英語ができる人間は、より有利にビジネスを進めることができました。今の時代であれば、プログラミング言語ができて有利になる世界
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
依存関係逆転の原則（DIP） - Strategic Choice
依存関係逆転の原則（DIP:the Dependency Inversion Principle）上位のモジュールは下位のモジュールに依存してはならない。どちらのモジュールも「抽象」に依存すべきである。「抽象」は実装の詳細に依存してはならない。実装の詳細が「抽象」に依存すべきである。どういうこと？手続き型は「方針」が実装の「詳細」に依存する構造になってしまう。 方針が詳細の変更に影響されてしまう好ましくない構造。 OOプログラミングでは「方針」「詳細」とも抽象に依存させることで、悪しき依存関係を逆転できる。 なんで？アプリケーションの方針を決めていて、他に対して影響を与えるモジュール(＝言うなれば「偉い」ヒト)は上位。 上位が下位に依存してしまうと、上位が、下位の影響を受けてしまう。手続き型でよく見られた悪い依存関係。 筋的にはアプリケーションの存在理由である上位が下位に対して影響力を持つ
Androidのテストに役立つツール2つ - Qiita
Android端末向けにアプリやwebサイトを開発するときに役立つツールと接続方法のメモ。 Vysor VysorはGoogle ChromeのアプリでPCに接続されたAndroid端末の画面をPC上に表示することができる。 ただし、Screan Recording機能を利用しているらしくAndroid4.4(Kitkat)以降の端末でしか使えないようだ。 特徴 表示するだけでなく、PC側から操作することができる。 文字入力をPCのキーボードを使ってできるのが非常に便利。 日本語の入力もPC側のIMEではなく端末側の機能を使うのだが可能。 Vysorを利用しながら、Android Studioから開発中のアプリを端末で起動することもできる アプリの開発中に使えば、アプリを起動して端末を手を持っていくことなく、PCの上で操作できてしまうので便利。 動作そのものは完全に端末側なのでエミュレータ
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
数字で語れる！webで手に入る統計データサイトまとめ20選
仕事の資料やブログでも「統計データ」を使いたい！ってときがありますよね。 数字を上手に使えると説得力が出ますね。 そう、私たちは「数字に弱い」のです。 私は数学能力が著しく低く、Excelも大して使えないんですが、そんな私でもたまには説得力ある資料を作りたい！と思うときがあるんです。 そんな時に、二次情報を手に入れるために、利用しているウェブサイトをご紹介します。保存版ですぞよ。 【一次情報・二次情報とは？】 一次情報とは、調査のために自分で採ったデータのこと。 二次情報とは、自分以外の誰かが調査して集めたデータのこと。 欲しい統計情報が検索しても出てこない・・・ってときにイライラしないように、本記事をブックマークしておくと便利かもしれませんね。これは便利！と思った統計情報があれば、随時更新していきますね。 また、統計情報を使って資料を作成すると、あなたの資料がちょっぴりかっこよくなること
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
CSS filter プロパティで 「半透明ガラス」 効果を再現してみる
2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 （Windows Aero ...） とかで使われてる、所謂 「半透明ガラス」 っぽい効果が出せるんじゃね？ と思ってやってみました。 実際に iPhone の Safari で表示してみた例が下記の画像です。 ただし、dialog 要素や ::backdrop 疑似要素を使っちゃうと、現時点では Chrome Canary で、さらにフラグを立てないと動作しないっていう、ほとんどの人が試せない状態になってしまうので、今回は div 要素を J
WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属性の基礎知識
WAI-ARIAを活用したフロントエンド実装 第1回 role属性、aria属性の基礎知識 Webコンテンツアクセシビリティを確保するさまざまな仕様のうち、WebサイトやWebアプリケーションで活用できるrole属性とaria属性について取り上げます。まず、両者の基礎的な知識から解説します。 はじめに 情報アクセシビリティに関する法整備などの背景もあり、アクセシビリティの確保は、今後、エンジニアとして無視できない技術となってきました。 あなたがこれまで、アクセシビリティに対して、あまり興味のないマークアップ・エンジニア、フロントエンド・エンジニアだったとしても、HTMLとSVGの追加仕様であるWAI-ARIA（ウェイ・アリア）を理解すれば、Webサイトのアクセシビリティを強化できるのはもちろんのこと、CSS設計やJavaScriptでのUI実装の際にも、WAI-ARIAの考え方を役立てるこ
デザイナーは残酷な職業
Liberato 自然素材をアップサイクルしたサステナブルなシューズブランド「Liberato(... 詳細を見る
URLスキーム・独自ディープリンク実装に代わる、Universal Links(iOS 9で導入)でより良いUXを実現 - Qiita
URLスキーム・独自ディープリンク実装に代わる、Universal Links(iOS 9で導入)でより良いUXを実現iPhoneWWDCsearchapiiOS9UniversalLinks iOS 9で、Universal Linksという仕組みが導入されます。 WWDC資料: Seamless Linking to Your App - WWDC 2015 - Videos - Apple Developer これまでのURLスキーム・独自ディープリンク実装と機能的に似ていますが、それがAPIとして公式にサポートされ、より良いUXが提供出来るようになる模様です。 Search API(特にWeb Markup API)と同時にiOS 9対応に向けてWeb側で是非対応検討しておいた方が良い事項だと思っています: searchapi - iOS 9の「Search API Best Pr
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
短期間でユーザビリティを改善したLiquidPlanner社のケーススタディ
クラウドを基盤としたプロジェクト管理システムを提供するLiquidPlanner社では、ユーザーが時間をかけずにダッシュボードを作成できるようにする必要がありました。 古いシステムでは、ウィジェットを含めたダッシュボードの作成をゼロから行うというものでした。顧客エンゲージメントとLTV（ライフタイムバリュー）の向上はダッシュボードの利用増加と比例しているため、プロダクトチームは新たなダッシュボードのテンプレート機能の開発に着手しました。 チームの目標は、ユーザーが設定しなくても便利なダッシュボードをすぐに作ることができる「ワンクリック・ソリューション」を開発することです。 新たなダッシュボードのテンプレート機能は４カ月間で完成し、その結果、特に重要な顧客層からの良い評価を得ることができました。機能はユーザーに広まり、プロジェクトは成功しました。 下の画像は、実際にチームが作成したダッシュボ
どうしたらバナー広告の価値を上げられると思う？ Googleの解は、外部データ連携のバナー自動生成だ | インタビュー
マイクロモーメントをデータでとらえてバナー広告の価値を上げ、よりWebユーザーに喜ばれる仕組みを作り、提供を開始したのだ。 デモグラフィック情報に加えて、天気、場所、降水量、花粉飛散量、POSデータなどなど、オフラインのデータを自由に取り込み、インプレッションごとに最適なバナー広告を自動的に作って配信する仕組みだ。 クリエイティブのパーツを用意しておけば、各データ状況に対応するパーツをリアルタイムに組み合わせて、数万種類のバナー広告を自動生成するこの仕組み。名称は、「リアルタイム・データドリブン・クリエイティブ（RDC）」。 実は日本のグーグルが主導して開発したこの新しい広告ソリューション「RDC」について、立ち上げや提供開始に携わったグーグルの後藤果奈氏に聞いた。 日本マクドナルドで2万5000種類のバナーを自動生成、CTRは通常の3倍―― 「リアルタイム・データドリブン・クリエイティブ
めっちゃ怒られているのがテレビで放送されてしまった - はてな匿名ダイアリー
何ヶ月か前、ある人にめちゃくちゃ怒られたことがあって、その時の映像が某国営放送で、この前の日曜日に放送された。 まあ、炎上するだろうなと１ヶ月前から憂鬱だったのだが、ネットを見ると予想以上に燃えまくっていた。特にコメントをするつもりはなかったが、知り合いからも、「かわんごさん（仮名）が正しいと僕は思っているから」というような、よくわからない励ましのメッセージがたくさん来るので、一言、ここで書いておこうと思う。 まず、あのシーンにおいて、どちらが正しいといったことはないと、僕は思っている。それぞれ違う考え方、違う感じ方を持つ別々の人間であるというだけの話だ。 事実としてあるのは、僕が「ある人」を不快にさせることを、「ある人」のテリトリーでやってしまったということだ。それについては全面的に僕の失敗であり落ち度だ。 そもそもあの場はなんだったのかというと、CGの世界でどういう技術が開発されようと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
