レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
Choo
Choo's modular core was engineered from the ground up to be smaller and more efficient than every other alternative out there. This was made possible by building out the core components over the span of 3 years and combining them under a tiny API. We think learning frameworks is boring. So instead of inventing a new language, Choo relies on vanilla JS and HTML. Combined with its small API and clea
p5.js
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else! Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza. Coding Club for people aged 50+ in Korea, led by Inhwa Yeom. Qianqian Ye intro
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
Xterm.js
Getting Started First you need to install the module, we ship exclusively through npm so you need that installed and then add xterm.js as a dependency by running: To start using xterm.js on your browser, add the xterm.js and xterm.css to the head of your html page. Then create a <div id="terminal"></div> onto which xterm can attach itself. Finally instantiate the Terminal object and then call the
CSSやJavaScriptで実装された、2016年に人気が高かったテクニックのまとめ -Top Pens of 2016
世界中の多くのWeb制作者・クリエイターが利用しているCodePenから、CSSやJavaScriptを使って実装された2016年にもっとも人気のあったデモを紹介します。 Top Pens of 2016 on CodePen Top Pens of 2016では、人気が高かったスゴ技が100個紹介されており、その中からベスト10を紹介します。 当ブログで紹介したものもいくつかあり、初見のものいくつかありました。 I DESIGN WITH CODE ❤ 10位は、Creogram animatedの動画にインスパイアされて実装されたSVGアニメーションのデモ。動きだけでなく、見せ方もうまいです。
多次元データを複数のグラフや地図に連携して表示するdc.jsを使ってみる - Qiita
概要 dc.jsは多次元データを複数のグラフや地図に連携して表示することが可能なJavaScriptのライブラリです。 dc.js - Dimensional Charting Javascript Library http://dc-js.github.io/dc.js/ たとえば次のようなグラフを描画したとします。 dc.jsを使えば、グラフ上の項目をクリックすることで任意の項目のフィルタリングが行えます。 下記の例では「艦種」が「戦艦」かつ「速度」が「低」の艦を抽出しています。 特定の項目をフィルタリングすることにより、全てのグラフが連動して変化していることが確認できます。これによりに、様々な角度でデータを表現することが可能になります。 このサンプルは以下にあります。 http://needtec.sakura.ne.jp/dc_example/exampl001.html 依存ライ
JavaScriptによるデータビジュアライゼーション入門
TOPICS Web , Database , HTML/CSS , JavaScript 発行年月日 2015年10月 PRINT LENGTH 396 ISBN 978-4-87311-746-1 原書 Data Visualization with JavaScript FORMAT PDF JavaScript、HTML、CSSといったWeb開発者が日頃使い慣れている技術を使って、効果的で印象的なグラフの作成方法をチュートリアル形式で説明しています。さまざまな可視化手法の中から、データをより効果的に魅せるには、どの表現方法がよいのか、どのような技術が必要なのかを解説します。基本的なグラフから、樹形図、ヒートマップ、ネットワークグラフ、ワードクラウド、時系列グラフ、地理情報、複合グラフなど、ステップバイステップで徐々に機能を追加したり改善を加えながら高機能かつインパクトのあるインタラ
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
知らないうちにMacがシステム標準でJavaScriptで操作できるようになってた (JXA) - Qiita
知ってる人には今更と思いますが、今まで知らなかったのでメモメモ。 AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。宇宙航空研究開発機構とは無関係です。 (追記：JXAは公式の略称です →Introduction to JavaScript for Automation Release Notes) 詳しくは Appleの公式ドキュメント か、「参考」にあるリンクへどうぞ。 もう一つ記事を書いたのでこちらもよかったらどぞ。 Macのキーボード入力、マウスクリックをJavaScriptで (JXA) Script Editorで使う方法 まずScript Editorを使う方法を説明します。 好きなテキストエディタを使いたい場合は飛ばしてください。 (でも「用語説明」の表示の仕方は覚えておいて
Reveal.js、Markdown、Githubでスライドを作成する。 - Qiita
PowerPoint2003から2013になってちょっと戸惑いを隠せない。。。 ありきたりなスライドテンプレートもなんか嫌だし。。。 と思っていたところ、markdownでWebスライドが作れることを発見しました。 GithubでWebページを公開する方法を発見、SublimeTextも入れたので、ちょっとWebスライドを作ってみます。 完成サンプル http://budougumi0617.github.io/reveal.js-myMaster/ 作り方 Reveal.jsというJavaScriptライブラリを利用します。 GitHubからreveal.jsのプロジェクトzipをGET index.htmlをテキストエディタで開く。 <div class="slides">タグ内の<section>内容を削除 後述のオプション付き<section>を記載する <section>内にMa
RakutenMAによる形態素解析入門 - あんちべ！
概要 本稿はRakutenMAというJavaScriptだけで動く学習器付きの形態素解析器を利用する入門記事です。本記事を読了すると、形態素解析の実行と形態素解析のモデルを作成・更新出来るようになります。 また、本稿ははてな×PC工房との連動企画の補足をするべく書きました。 「あんちべさんと一緒に Rakuten MA で形態素解析」はてなニュース連動企画 第二弾！ : パソコン工房 パソコン工房のPCで遊ぼう第2弾！ あんちべさんと一緒に Rakuten MA で形態素解析 - はてなニュース RakutenMAを利用したエディタ判定器デモ エディタ判定器 :パソコン工房 【やじうまWatch】Emacs派とVim派の対立を煽る「エディタ判定器」が面白いと評判 -INTERNET Watch はじめに 近年、twitterやFacebookなどのSNSやAmazonのレビューなどから得ら
Introducing V8: An Embedded JavaScript Engine for R | R-bloggers
[This article was first published on OpenCPU, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here) Want to share your content on R-bloggers? click here if you have a blog, or here if you don't. JavaScript is an fantastic language for building applications. It runs on browsers, servers and databases, making it possible to design an entire web stack in a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
choo handbook - your first choo app
Seeing Theory
GitHub - datacamp/datacamp-light: Convert any blog or website to an interactive learning platform for data science
Redirecting…
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
【旧版】D3.js入門 (全17回) - プログラミングならドットインストール
WEBSITE.WS - Your Internet Address For Life™