Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
I am mitsuruog | D3.jsでタイムチャートを作ってみたので、苦労した点など振り返ってみる
D3.js を使ってタイムチャートを作成してみました。 初めて実践投入したこともあり、いろいろ苦労した点などあるので、振り返ってまとめてみます。 D3.js まだまだ奥が深いので、私が紹介する以外にもっといい方法があると思います。あくまで自分用のメモだと思ってください。 利用している D3.js は v3 系です。 サンプル Codepen にサンプル作りました。 TimeChart 苦労したこと 一定期間の時間軸を作成したい 時間軸のラベルを一定間隔にしたい 時間軸のラベルフォーマットしたい 軸のメモリ線(？)を消したい 画面サイズに応じて軸ラベルを回転させたい カテゴライズされた軸を作りたい カテゴライズされた軸のラベルを別なものにしたい ラベルの文字が長い場合に改行したい 軸の domain 範囲を超えたデータがある場合に表示させない window がリサイズしたら Chart を再
Read D3 Tips and Tricks v4.x | Leanpub
Acknowledgements Mike First and foremost I would like to express my thanks to Mike Bostock, the driving force behind d3.js. His efforts are tireless and his altruism in making his work open and available to the masses is inspiring. The decision for him to leave what must have been an incredible job with the New York Times to return to improving visualisation software (d3.js in particular) has mark
D3.js v4/5 使い方 徹底攻略 – データビジュアライゼーション・ラボ
2018-02-152022-10-03 インタラクティブなグラフ、チャート、データ可視化のためのjavascriptライブラリ、D3.js(Data-Driven Documents)の使い方を徹底解説します。v4/5に対応しています。 チュートリアル 環境準備 要素の追加方法 (append) データのバインド方法 (data,enter) SVGの基礎 グラフの書き方 基本的な使い方 data使い方(enter,update,exit) 表(table)の作り方 カラースケールの作り方 カラーテーマまとめ アニメーションのエフェクト一覧 Web上のファイルの読み込み方(d3-fetch) 乱数生成関数の使い方 マウス/タッチイベント drag使い方 zoom使い方 範囲選択 (brush) 使い方 範囲選択 (brush) 使い方 (タッチパネル応用) 基本チャート 棒グラフ(bar
D3 V4 - What's new?
class: center, middle, inverse # D3 V4 - What's new? Play along: [D3 v3 playground](http://jsbin.com/degoxo/1/edit?html,js,console,output) | [D3 v4 playground](http://jsbin.com/yoruka/1/edit?html,js,console,output) Slides: [iros.github.io/d3-v4-whats-new/](http://iros.github.io/d3-v4-whats-new/#1) [](http://bocoup.com/datavis) --- # Modularity #### D3 v3 was
細かすぎて伝わらないD3 ver.4の話
※ なぜか、スライド内の画像が天地逆転して表示されています。 D3.js ver.4の新機能などについて。 Read less
D3.js ver.3向けのコードをver.4でも動かすよ - Qiita
目的 私はD3.js(Data Driven Document：JavaScriptの情報可視化ライブラリ)を導入する上で、バージョンの違いに苦しめられました。主に、D3のver.3(以下v3)からver.4(以下v4、2016/7月リリース)で大規模な変更があったためです。Webに掲載されているサンプルコードはv3で作られたものが多く、v4上ではその大半が動きません。 本記事の目的は、自分の備忘録および、同じくD3v4を新規導入する方々のために、v3からの変更点や、v3用に書かれたコードをv4用に再コーディングする場合のポイントを述べることです。 内容 重要な点は以下3点です。それぞれセクションを区切って説明します。 1. Scale 2. selection.attr / selection.style 3. selection.merge Scale Scaleは値の正規化（線形変換
Web上でJavaScript版Jupyterのような高機能ノートブックを作成できる「Observable」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、話題のJupyter Notebookみたいな使い方ができるノートブックを面倒な環境設定不要で、手軽にブラウザ上から無料で作成できるサービスのご紹介です。 マークダウンで文章を書いたりJavaScriptによるコードを実行することが可能で、HTMLを使ったUI部品の挿入やデータの可視化・マッピングなども自由に作成できるのが特徴です。 誰でも簡単に使えるように工夫されており、学習用途や教材作り…ブログのような使い方もできる万能型のノートブックと言えるでしょう。 【 Observable 】 ■「Observable」の使い方 それでは、実際に「Observable」を使いながらどのようなサービスなのかを見ていきましょう！ サイトのトップページにアクセスしたら「Try the scratchpad」と書かれたボタンがあります。 このボタンを
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
Node.js、Socket.IO、MongoDBでリアルタイムWeb
Node.js＋Socket.IO＋MongoDB こんにちは！ 著者は、マインドフリーという会社でNode.jsを使ってWebアプリなどを作成している。この連載では、最新Webテクノロジを使った研究開発の事例や実績を発信する弊社のサイト“Tech Release”のリニューアルで培ったNode.jsに関する知識を分かりやすくお伝えする。 Tech Releaseは一見、普通のブログに見えるが、実は記事の更新内容がリアルタイムにView画面に反映されている。管理者が、記事の文章（データ）に変更を加えると、その記事を見ている人にもページをリロードせずに、リアルタイムに文章（データ）が変化していく。 このUXを実現するために開発したシステムが、REALTIME BLOG ENGINE「REABLO」というエンジンだ。「REABLO」はNode.jsとSocket.IO、MongoDBを使用して
JavaScriptでも制御できる！ Arduinoの基礎知識
JavaScriptでも制御できる！ Arduinoの基礎知識：Arduinoで始めるWeb技術者のためのIoT入門（1）（1/2 ページ） 今注目のInternet of Thingsを実現するセンサーデバイスのインターフェースとしてArduinoを使い、電子工作の基礎から実装までを紹介する連載。初回は、Arduinoの概要と注目を集める理由、4つの面白い利用例を紹介します。 連載目次 「IoT：モノのインターネット」をJavaScriptで体験 皆さんは「IoT」という言葉をご存じでしょうか。IoTは「Internet of Things」の略称で「モノ同士がネットワーク越しに連携し合う世界」を言い表しています。 これまで、インターネットといえば、PCやサーバー、スマートフォンなどの限られたデバイスをつないでいました。IoTが目指す世界では、その対象を大きく広げて、モノをインターネット
Safari による User-Agent 固定化と Web における Feature Detection | blog.jxck.io
Update 2018/3/1 : Safari 11.0.3 の UA を追記 2018/4/16: Safari 11.1 の UA を追記 2018/5/1 : OS のバージョンは固定されなくなった件を追記 2 月に方針が変更され、 OS のバージョンは固定されなくなった。 このため、 iOS のバージョンアップにより発生するバグなどを回避する道は残されたことになる。 一方 Webkit のバージョンは(予定では 605.1.15 に)固定されることになりそうだ。詳細は、以下を参照。 Safari の UA 文字列が固定されて固定されなくなったおはなし - fragmentary Intro 少し前に Safari Technology Preview 46 がリリースされた。 Service Worker のアナウンスに目がそちらに盗まれている一方、しれっと以下の一文がある。 F
jupyter notebookでpythonとJavaScriptの連携 - Qiita
はじめに jupyter notebookでpythonだけでもデータ解析から可視化まで一連の流れが可能ですが、D3.jsの高い表現力とインタラクティブ性をみてしまうと、可視化はJavaScriptでというケースも多くなるのではないでしょうか。そこで、データはpythonで用意してJavaScriptに引き渡す方法を紹介したいと思います。 以下の説明ではpy_d3というjupyter notebook上でD3.jsのコードを実行、表示するパッケージを利用しますが、D3.jsに限らず任意のJavaScriptが実行可能です。1 py_d3のセットアップ
Building a crude Node.js from scratch
Node is powered by the JavaScript engine used in Google Chrome, called V81. In this post I'm going to guide you through two steps: making a "Hello World" example in V8 making a crude Node runtime with support for 3 statements: console.log, console.error and quit for quitting the process In our new crude runtime we'll execute the following script: console.log("🎉"); b=4+4; console.error(b); quit();
You Need to know SSR - Speaker Deck
ng-japan で発表した Server Side Rendering の資料です。
今すぐ知っておくべき！モダンな10のWeb技術
エンジニアやデザイナー、Web担当者が今すぐ知っておくべきモダンな10のWeb技術を紹介しています。Webデザインの世界が根本的に変化し、Webサイトの構築ははるかに簡単に高い技術でできるようになりました。ぜひ覚えておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ライターのJake Rocheleau氏によって投稿されました。
オンラインでさくっと簡単！HTML, CSS, JavaScript, C++, Java, Pythonなどのコードを見やすくする無料サービス
HTML, CSS, JavaScript, C++, Java, Pythonなどのコードをコピペするだけでさくっと簡単に、ブラウザ上で見やすく表示する無料のオンラインサービスを紹介します。 Sublime TextやDreamweaverなどのエディタに備わっているシンタックスハイライトが、オンラインで利用できるのはいいですね。 SlidesCodeHighlighter SlidesCodeHighlighter -GitHub 表示コードは「HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート」のHTMLです。 SlidesCodeHighlighterはオンラインのブラウザ上で、コードをコピペするだけでシンタックスハイライトを適用して見やすく表示してくれます。現在、対応しているコードは下記の通り。 C++ Java JavaScript XML
Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います！ 特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。 【 BeautifyConverter 】 「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。 登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう！ ■基本的な使い方！ 「BeautifyConverter」の基本的な使い方を実際に試しながら、どのよう
ロジックを画面から分離できる「Angular 2」のサービスと依存性注入
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。2016年9月に正式版がリリースされ、本格的に利用できる環境が整いました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 前回記事では、Angular 2のWebページを構成する要素である、コンポーネントやモジュールについて説明しました。これらを利用すると、実装を分割して互いの影響範囲を限定することができます。 しかし、ログ出力のようにさまざまな箇所で使われる処理や、ビジネスロジックのような画面から独立した処理は、独立して実装した処理を、後から追加できれば便利です。Angular 2ではこのような機能として、独立した処理を実装する「サービ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Session을 이용해 로그인하기 · GitBook