面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
初心者からのJavaScript開発入門！iTunesのJSONデータを使ってランキングサイトを作るチュートリアル大公開！ -
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでJSONを使った「Webアプリ開発」に挑戦してみようと思います！ そこで、アップルが提供している「RSS Generator」からJSONデータを取得し、多彩なジャンルのランキングサイトを構築してみましょう！ 【 RSS Generator 】 「RSS Generator」という名前の通り、これはiTunes Storeで提供されているスマホアプリ、音楽、映画…などの最新情報をRSS形式で取得可能なURLを自動生成してくれるサービスです。 ただし、URLを少し変えるだけで「JSON(JSONP)データ」も取得できるようになっているので、このデータを読み込んでアプリや音楽などの最新ランキングを自動表示するサイトを作ってみたいと思います！ ■必要なファイルを準備しよう！ それでは、最初に必要となるファイルを準備すると
すべてのプログラマーが知っておきたいReactの7つの強み
JavaScriptはこの６年で大きくその地位を向上させてきました。JavaScriptは有名なサーバーサイド言語になり、オフラインファーストSPAは用語として定着し、そしてJavaScriptは他の言語のための有名なコンパイル先となりました。 JavaScriptは、ElectronやReact Nativeのような技術やハイブリッドアプリを通して、ついにはデスクトップとモバイルのプラットフォームとなってきています。 この3年でもう一つ革命が起こり始めました。FacebookのプログラマーであるJordan WalkeがReact.jsを生み出しました。Reactはそれ以来、数百ないし数千ものプログラマーのJavaScriptのコードの書き方を変えてきました。 Reactの途方もない成功の裏にはそれなりの理由があります。 1. バグが出にくいよりシンプルなコードReactはユーザーインタ
SVGでプログラマブルな書体を作る話｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない
IE8以下でレスポンシブWebデザインを実現するRespond.js
レスポンシブWebデザインはディスプレイサイズ（特に横幅）に合わせてデザインを最適化する事で、1URLで全てのデバイスに対応できることが強み。 導入することで最も威力を発揮するデバイスはスマートフォンですが、マーケティング的にIEでもレスポンシブWebデザインが機能（閲覧可能）した方が良いケースもあるでしょう。 そういった状況下でお勧めするのがRespond.js。 Respond.js（github） Respond.jsとは IE6～8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするpolyfill（※）。 ネイティブで非対応の機能をpolyfillで実現すると、大半が処理が重くなったり動作が不安定など実用的ではないですが、Respond.jsは高速かつ安定しています。 ※非対応のブラウザに相応のインターフェースを実装 Respond.j
全8サイト！SNSのカウント取得方法まとめ 2014年6月版
ソーシャルシェアボタンをオリジナルデザインにしたかったり、いいね！数のデータを元にランキングシステムなどを作りたい場合に役立つ「ソーシャルカウントの取得方法」をまとめました。取得方法はサーバーサイド(PHP)、クライアントサイド(Javascript)の両パターンを取り上げています。よろしければ参考にしてみて下さい！なお、Twitterのカウントは2015年11月20日以降、取得できなくなりました。
Facebookのエンジニアも登壇！「React.js meetup #2」イベントレポート | Goodpatch Blog
こんにちは。グッドパッチのフロントエンドエンジニア/グロースデザイナーの右寺です。 今回は、9/8(火)にイベント＆コミュニティスペース dots.で行われたイベント「React.js meetup #2」のレポートをお届けします！ React.jsとは？ React.jsはFacebook謹製のJavaScriptライブラリです。一昨年のリリースから急激に人気が上昇しています。 その特徴は、同じJavaScriptライブラリであるAngularJSがMVCフレームワークとして全般的な機能を提供するのに対し、React.jsではMVCのViewにあたる部分をComponentとして提供することに特化している、と言えます。 現在、React.jsはFacebook社内だけではなくYahoo!やTwitter、Airbnbなどでも採用されているようです。 主催のお二人 今回のイベントは、昨年末
画像の「縦方向の最適化」って何!?たった数行でスマホビューを改善しよう！
webデザインの大きな問題の1つは、スマホビューにおける縦長画像。今回は「縦方向のレスポンシブ」を紹介します。思い付きで実装してみたのですが、驚くほどスマホビューが改善できたので、そのJavascriptのコードを紹介します。 デモを見る 1「縦方向のレスポンシブ」って何？縦長画像をスマホで見たサンプル今回の問題は、縦長画像のスマホビューです。iPhoneやAndroidの解説記事などでスクリーンショットを載せる場合、縦に長い画像を利用しますよね？するとスマホビューではサンプル図のように、画像が画面全体を占領してしまうことが少なくありません。 max-width:100%を設定することで「横方向」には最適化していても、「縦方向」には最適化できていない例です。画像はやっぱり文字と一緒に見たいですよね…。max-height:...%は「画面の高さ」ではなく「コンテンツの高さ」が基準になるので
外部CSSと外部JavaScriptで表示速度の低下を防ぐには [ホームページ作成] All About
外部CSSと外部JavaScriptで表示速度の低下を防ぐにはHTML内でCSSファイルやJavaScriptファイルを読み込ませる場合、記述の仕方によっては読込速度や表示速度が遅くなることがあります。ウェブページができるだけ速く表示されるよう、外部ファイルを読み込む記述にも注意してみましょう。CSSファイルやJavaScriptファイルを読み込む際に、読込速度や表示速度の低下を防ぐ記述方法をご紹介致します。 独立したCSSファイルやJavaScriptファイルを読み込むと、全体の表示速度が低下する？ ウェブページでCSSやJavaScriptを使う際、それらを独立したファイルに記述しておき、HTMLから呼び出す方法がよく使われます。複数のページで共通するCSSやJavaScriptがあるなら、単独のファイルに独立させておく方がメンテナンスしやすくなりますし、(一度読み込まれたファイルはブ
![外部CSSと外部JavaScriptで表示速度の低下を防ぐには [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
エヴァンゲリオンでわかってしまうJavaScript - Qiita
はじめに 全国１億２０００万人のエヴァンゲリオンはわかるけど,JavaScriptはちょっと、、、な皆さんこんにちは。 JavaScriptのプログラミングは、エヴァンゲリオンよりは簡単なのですが、なぜかプログラマにしか浸透しません。 エヴァンゲリオンの諸概念を理解している方であれば、すでにJavaScriptプログラミングは理解していると言っても過言ではありません。 そのあたりをそういうことにして、本編にとりあえず行きましょう。 あわせて読みたい 半年で40kg痩せた！ダイエットでわかるリーンなプロジェクトマネジメント手法 1.地球とミックスイン まずは、エヴァンゲリオンの世界における地球をJavaScriptで表現してみたいと思います。 ここで登場するのはもちろんエヴァンゲリオン世界のトリックスター、ナディアと我らをつなぐものこと「第一始祖民族」ですよね。 彼らは隕石に「白き月」と「黒
Smoky Backgrounds Generator - waterpipe.js
waterpipe.js by dragdropsite.com Tweet Smoke style Gradient start: Gradient end: Opacity: 10% Smoke size: 100% Line width: 2px Smokes #: 1 Background style Outer color: Inner color: Download size Width (px): Height (px): Samples (click to generate) Samples Generate Download Credits: rectangleworld.com
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://getar.jp/15733/
https://www.tettori.net/post/293/
Web Audioの制御やOSCデータの送信が可能なオーディオUI向けJavaScriptライブラリ・「NexusUI」 - かちびと.net