impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
ScrollTrigger | GSAP | Docs & Learning
let tl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { trigger: '.container', pin: true, // pin the trigger element while active start: 'top top', // when the top of the trigger hits the top of the viewport end: '+=500', // end after scrolling 500px beyond the start scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar snap: { snapTo: 'labels'
初心者のためのNestJS入門
「なんでNestJSを使うの？」 Laravel、Ruby on Rails、Djangoとフルスタック、バックエンド、どちらでも使える充実したフレームワークがあるのに 「なんでわざわざNestJSを使うの？」という疑問が浮かぶ人もいるだろう。 NestJSはNode.jsの中では有名なフレームワークだが、バックエンドフレームワークとしてはまだまだマイナーな部類に入る。 まずはその疑問に回答した上で、NestJSがどんなものかを紹介したいと思う。 １.NestJSを使う意義 NestJSを使う意義は、現在主流となっているReactやVue、Svelteと同じTypeScriptで書けるということにある。 バックエンドでもフロントエンドと同じTypeScriptが使えるということが非常に貴重だ。 例えば、人数やサービスの都合でフロントエンドとバックエンド、両方を受け持つメンバーが出たとする。
CORSを絶対に理解する
対象者 「CORSがなんなのかわからない」 「とりあえず調べた記事でテキトーに解決したけど、根本的に何がダメだったのかがわからない」 みたいな方を対象に、CORSについて細かく解説しています。 記事を読み終えれば、CORSについて理解でき、どんな記述が必要なのかがわかるようになると思います。 また、フロントエンドしか触らない方も読んでいただけると、フロント側のエラーかと思っていたけれど実はバックエンドの方の設定が漏れていた...みたいなケースにも対応できるようになると思います。 今回サンプルコードを置いていますが、フロントはJavaScript、バックエンドはGolang（Echo）で記述しています。 まずはCORSとは何か CORSはオリジン間リソース共有という意味です。 追加のHTTPヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンに選択されたリソ
PhaserでHTML5ゲームを作ってみた
はじめに インディーゲームを作っておりますnyorokoと申します。 以前はUnityでゲームを制作していたのですが、PhaserでHTML5ゲームを作ってみたので、記事にしてみました。 私自身が初心者であるため解説記事というよりは開発手記という体裁にはなっていますが、それでもPhaserはUnityと違って日本語の情報が非常に少ないので、多少なりとも有用であると信じて投稿することにしました。 完成したもの YouTubeのvideoIDが不正です きっかけ 私の初めての作品はUnityで作ったダウンロードしてプレイするタイプのPCゲームでした。 しかし、 PCゲームという時点でハードルが高い ダウンロードする気になりにくい(面倒、ウイルスの懸念等々) という欠点があるため、閲覧数の割にはダウンロードがそこまで伸びませんでした。 そこで、次回作はスマホでもプレイできるゲームにしようと思った
Tween<span>Max</span>
Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, V
これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Rotating 3D Cube in JavaScript
© Thiemo Mättig, created in September 2007 More JavaScript experiments »
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログ
as, box2dワリオランドシェイクと YouTube のコラボプロモーション が面白かったので、似たようなものを作ってみました。次の文字列をコピーしてアドレスバーに突っ込むと、HTML が崩壊します。javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();崩壊するのは画像だけなので、画像があるページで試してみてください。このブログだとこんな具合。画像はドラッグすることも可能です。あまり画像が多いと重くなりすぎるのでご注意を。仕組みFlash と JavaSc
jQueryで作る“Amazon風”インターフェイス (1/5)
「最近、どこでよく買い物していますか？」――こう聞かれて「Amazon！」と答える方も少なくないかもしれません（特に本誌読者であれば）。当初は書店の店頭で入手が難しい書籍の購入などに重宝していたAmazonですが、取扱商品が増えた今では、ペットボトルの水からパソコンまで何でも買える便利なECサイトとして、ネット利用者の生活に定着しました。 もっとも、Webサイトを作る立場から見ると、Amazonの魅力は品揃えやサービスだけではありません。Webサイトのデザイン面からAmazonを見ても優れた点は多数あり、実際、国内外の非常に多くのECサイトがAmazonをお手本にしたUIを採用しています。今回は、「Amazon.co.jp」を参考にさせてもらいましょう。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。現
Ajax うきうき Watch 第12回 サーバが通信を開始できるComet活用Webチャット
このニュースの意義は、ただ単にそのようなサービスが正式版として開始されたということではありません。本来、デスクトップ上のソフトウェアで最強企業であったマイクロソフトが、本格的にWeb上のサービスに取り組んでいるという点で、特に大きなインパクトがあるわけです。他社が同様のサービスを始めるのとは、意味の質が違います。 とはいえ、まったく個人的な見解を述べるなら、現在のマイクロソフトには統一された「マイクロソフトの意思」ないし「一貫した目標」のようなものは存在しないと感じられます。さまざまな方向性への試みが競合しているのが、現在のマイクロソフト文化なのではないか……と感じます。つまり、Windows Liveがこうして立派にサービスを開始したということが、そのまま「マイクロソフトの意思」であるとまではいえないわけです。マイクロソフトの別の部分は、別の意思を持ち、例えばデスクトップの世界を堅持しよ
[JS]Mootoolsのプラグイン 41選 | コリス
specky boyのエントリー「Mootoolsのプラグイン Best 41」から、Mootoolsのプラグインをいくつか紹介します。 41 of the Best MooTools Ajax Example Downloads
JavaScriptライブラリのパフォーマンス、最速はコレだ! | エンタープライズ | マイコミジャーナル
The PBwiki engineering teamのメンバーがWebブラウザとJavaScriptライブラリのパフォーマンスを調査するために興味深いパフォーマンステストサイトを公開している。Javascript Library Performance Test Roundupにアクセスして"Run (West Coast)"かまたは"Run (East Coast)"をクリックしてみてほしい。使っているWebブラウザにおいてDojo 1.0.1、jQuery 1.2.1、Prototype 1.6.0、YUI 2.4.0、Protoculous 1.0.2の読み込み時間がどうなるかを調査してくれる。 しかも読み込み方法は通常のJavaScriptソースコード、キャッシュされたものとそうでないもの、Gzipで圧縮されたものとそうでないもの、YUI Compressorで最小化されたものと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AdonisJS - A fully featured web framework for Node.js
GAS ビギナーが GAS を使いこなすために知るべきこと 10 選 - Qiita
CodyHouse | Web Design Nuggets
Form Library | Free and Open-source JavaScript component
JavaScript リファレンス