JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita
原則、JavaScriptでは異なるドメイン間のAjax通信はできません。つまり、自サイトから他サイトのデータを取得することはできません。 HTML5では、異なるドメイン間でも安全にデータをやり取りできるよう、postMessage が用意されました。（両ドメインのサイトが postMessage を実装している必要があります） コード例 基準サイトから外部サイトへメッセージを投げて、返信を受け取る場合のコード例です。外部サイトの window オブジェクトを必要とするため、iframe と併用されることが多いようです。 ＜基準サイト側＞ <!-- 外部サイトへメッセージを投げるためのiframe --> <iframe id="ifrm" src="http://外部サイト.com/xxx.html" style="display:none;"></iframe> <script typ
![[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4506624c4627e0d506669c13c757a918e551fa50/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMHBvc3RNZXNzYWdlJUUzJTgxJUE3JUUzJTgyJUFGJUUzJTgzJUFEJUUzJTgyJUI5JUUzJTgzJTg5JUUzJTgzJUExJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgzJUExJUUzJTgzJTgzJUUzJTgyJUJCJUUzJTgzJUJDJUUzJTgyJUI4JUU5JTgwJTlBJUU0JUJGJUExJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kNWY4ZWQxNjQ2ZDVhNjY3N2ExYTBjNmI2YTU0OWEwNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YXN1bW9kZXYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFiZGRhNzVhNjliZWZiMTZhZjQ2ODA4MDZmMGY2NzZm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3d55a2f39704479fee794270a599986e)
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
JavaScriptコードは1行のみ！超手軽にWebサイトでパララックス効果を実現できる「Rellax.js」使ってみた - paiza開発日誌
どうも、まさとらん（@0310lan）です。 みなさんは、自分のWebサイトに「パララックス効果」を取り入れたいと考えたことはありませんか？ 「なんだか難しそう…」とか、「実装が面倒くさい…」のようなイメージをもし持っているのであれば、今回ご紹介するJavaScriptライブラリが一発解消してくれますよ！ 【 Rellax.js 】 今回のテーマである「パララックス（視差効果）」がどんなモノであるかは、「Rellax.js」の公式サイトを見ると分かりやすいです。 このように画面を上下に動かす際に、複数のHTML要素が異なるスピードでアニメーションすることで、Webページが立体的になって印象に残りやすいサイトになります。 「Rellax.js」は、このような「パララックス効果」を可能な限り簡単に書けるようにしてくれるJavaScriptライブラリというわけです！（ちなみに、「ver1.0」か
jQuery学習者にReactも学習してほしい3つの理由と学習方法まとめ
jQueryの初版が登場して10年が経ちました。 jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。 時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。 そうした中、昨今注目されているのがReact.js(React)です。 今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。 Reactとは？ Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。 Facebookが開発の主導となっており、
Riot.js入門 なるべく簡単に とはいえ 少し実用的に - Qiita
やりたいこと なるべく簡単に、とはいえそこそこ実用的なくらいに、Riot.js を使いたい。 Riot.jsはランタイムでのコンパイルなども可能です。開発者てきにはメリットありますが、多少ユーザメリットが感じられないので……プリコンパイルしてサーバにあげたいです。あと、開発環境的にあんまり複雑なことすると手軽感がなくなるので、最低限ですませたい。 ということでメモがてら作ってみました。 環境構築 npmインストール してください。 各種 npm install $ npm install -g riot $ npm install --save-dev gulp $ npm install --save-dev gulp-riot $ npm install --save-dev gulp-connect var gulp = require('gulp'); var riot = req
大量接続に耐えるWebSocketアプリケーションサーバ構築のコツ - pixiv inside [archive]
WebSocketの扱うサービスでは、長時間のコネクション、再接続処理、プロキシ、ロードバランサなど、インフラの面で多くの問題を抱えがちです。弊社のサービス「pixiv」の9周年企画でも、この問題に直面しました。 実際にそこで構築したインフラの事例をもとに、本運用に使えるWebSocketサーバの構成について、pixivインフラ部の南川からご紹介します。 * 9周年企画 “黒歴史”をロケットで宇宙に飛ばす pixiv黒歴史 そもそも WebSocket とは？ WebSocketはTCP上で動く双方向通信のための通信規格です。 Webページの読み込みで行われているような、クライアントがサーバにデータを要求し、サーバはクライアントにレスポンスを返すというHTTPの通信ルールとは違います。サーバと長時間コネクションを確立し、Socketのようにデータのやり取りを行います。そして、コネクションを
![大量接続に耐えるWebSocketアプリケーションサーバ構築のコツ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95f08ea3414673bb0131022fbc9dc354bb7483ba/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20161129%2F20161129204837.png)
JSグラフライブラリNVD3.jsを使ってはてなブログにハイセンスな株価チャートを表示させる方法 - サラリーマン休日副業で月10万円以上目指すページ
久々にプログラミング系のネタです。 はてなブログにJavaScriptのグラフライブラリであるNVD3.jsを使用し、ハイセンスな株価チャートを表示させてみます。 もちろん、同様の方法で棒グラフ、円グラフ、折れ線グラフ等の基本グラフや、複合グラフ等の高機能なグラフまで簡単に表示させることができます。 １．CSS/ライブラリの読み込み まずはCSSとJavaScriptライブラリを読み込みましょう。 下記ソースをページ上部にコピーします。 <link href="http://cdn.rawgit.com/novus/nvd3/v1.8.4/build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" char
フロントエンジニアが今話題のFirebaseについて語りたい - Qiita
最初に 最近、Firebaseについての記事をよく見ます。 稚拙ながらもFirebaseについて注目している一人として語りたい。 知識不足(特に後述の歴史の認識)のため、駄文乱文あると思います。ご指摘いただけると幸いです。 React + Redux + Firebaseの実装記事を書きました。 Firebase Databse導入のために考えた4つのポイント。NoSQLと真剣に向き合った時ぶつかったことを書きました。 Firebaseとは mBaas(Mobile Background as a Service)の一つで、Googleの買収で一気に知名度が上がりました。 今までも、十分使えるものでしたが、2016年のGoogle I/Oの発表で統合プラットフォームとしての風格がムンムン漂ってきました。 また、Parse終了の知らせがでるやいなや無料プラン(SPARK)の改変、push n
これからReactを勉強する人が最初に見るべきスライド７選
React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。 そこで今回は、 「Reactって最近よく聞くけど一体何？」 「jQueryと何が違うの？」 といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。 ＊もし、「このスライドもおすすめ」というものがあったら教えてください。 Reactとは？ なぜ人は必死でjQueryを捨てようとしているのか なぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンド
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
読み間違えると恥ずかしい！デザイン・プログラミング用語15選 | UX MILK
ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新：米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正：ウィズス、ウィドゥスなど 誤：ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正：ハイト 誤：ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「
いまさら聞けないWebSocketとSocket.IOの基礎知識＆インストール
本連載「Socket.IOで始めるWebSocket超入門」では、WebSocketを扱うことができるNode.jsのライブラリ「Socket.IO」を使って、サンプルアプリケーションを構築していきます。 具体的には、チャットを題材とし、送受信されるメッセージ内容が即時反映されるリアルタイムかつ双方向なWebアプリケーションの構築を目標とします。さらに構築の中で、Socket.IOの各種ライブラリの使い方について解説することで、Socket.IOを使ったWebSocketの実践方法を体系的に学びます。 いまさら聞けないWebSocketとは WebSocketはリアルタイムWeb技術の一種であり、リアルタイムかつ双方向な通信を実現するプロトコルです。WebSocket通信では、コネクション確立時にHTTPからWebSocketへプロトコルを切り替えます。1度コネクションが確立されると、「w
クローラー構築の際に気をつけたいこと - Qiita
この記事は CAMPHOR- Advent Calender 2015 延長戦、29日目の記事です。 今回はスクレイピングについてです。スクレイピングのやり方なんかは他にたくさん記事が上がっているのでそういうのはやめて、昔クローラーとしてたくさんのサイトを継続的にスクレイピングして回っていた(google botかな？)ときに経験したことについて書いていこうかなと思っています。これからクローラーを構築しようとしている方の参考になればと。 DOS攻撃をしない 基本ですね。スクレイピングをするときはサーバーへの負荷も考えて、あまり一度にたくさんのリクエストを送らないようにしましょう。 サイトのリニューアルを検知 webサイトは時として何の前触れもなくリニューアルがされて全く違う構造になることがあります。ECサイトなんかは企業の買収や合併も激しく、リニューアルも頻繁に行われることでしょう。イケイ
Javaですべての上場企業のと地方自治体のサイトをスクレイピングして大変だったこと - Qiita
私は主にJavaを使って大量のサイトからクロールとスクレイピングをしています。 作っているサイトは happyou.info です。上場企業と官公庁と地方自治体とその他1万サイトくらいスクレイピングしています。 このエントリでは、技術的なこと特にめんどうくさかった点を書き残しておきたいと思います。基本的なことかもしれませんが、私自身忘れそうなところもあるので。 1.上場企業は企業が入れ替わる 上場企業は毎日企業が入れ替わります。新規上場、上場廃止、合併、分社化、企業名変更は毎日のことです。この変化にキャッチアップするのが難しかったです。 日本取引所グループ 「よし上場前からきっちりスクレイピングして事前に準備しておくぞ」と思っても、上場にあわせてサイトをリニューアルしたりする企業も多いので油断なりません。 官公庁のサイトは、民間企業に比べるとはるかに移転が少なく落ち着いています。 地方公共
Node.js開発者が一度は読むべきStackOverflow【初級編】 - Qiita
周りに尊敬するNodeコミッターとかがたくさんいらっしゃっておそれおおいのでw 今回は初級編・初心者編です。 10. How to decide when to use Node.js? http://stackoverflow.com/questions/5062614/how-to-decide-when-to-use-node-js Nodeで何がデキるの？Nodeって結局何？Nodeのメリデメって？っていう方はまずみるといいかもしれません Nodeでできること、できないこと、得意なこと、苦手なことが簡単にまとめられているので最初に見る記事としてはかなりおすすめ その質問者のLegendさん自体が相当シンプルにまとめられていて、Answerで抜けをカバーしたり補強したり、みたいな流れになっているのですが、Question見るだけでも参考になる From all the homewor
Mithril.jsでがっつりSPAを作った話 - コード譜共有サイト「ChordKitchen」 - リズムのじかん
Mithril.jsを使って、がっつりSPA（シングルページアプリケーション）を作ったので紹介します。 Mithril使いやすいので広まって欲しいです。 作ったもの コード譜をweb上で作成して共有できるサービスを作りました。 コード譜共有サイト ChordKitchen http://chordkitchen.net サービス紹介動画です。 www.youtube.com 開発環境 プログラミング言語 typescript（versionは1.4） typescriptいいよ！！ コードはできるだけjavascriptっぽく書いて、 コンパイル時にケアレスミスを検出する感じに使いました。 タスクランナー gulp webpack（後述） クライアントサイド 使用しているライブラリ Mithril.js underscore.js Mithril.jsについて 公式サイト https://
サーバPUSHざっくりまとめ
ポーリング、Ajax、Comet、Server Sent Events、WebSocket サーバPUSH方式の大雑把な比較 Read less
Tutorial: Tic-Tac-Toe – React
You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
