5分で完了！Webサイトに簡単にチュートリアルが作れるIntro.jsの使い方 | ランサーズ（Lancers）エンジニアブログ
こんにちは。 開発部の 神庭（godgarden）です。 先日、サービスの操作説明をするために、操作マニュアル（チュートリアル）ようなものを作りたいって要望があり、少しだけ調べる機会がありました。 操作マニュアル（チュートリアル）といえば、前職の受託システム会社で働いていた時では、ExcelやWordを駆使してゴリゴリ頑張って作っていました。 ただ、画像や文字・図形だけで作られた操作マニュアルでは、細かいところの説明や動きを、エンドユーザー様にうまく伝えることが難しく、電話で補足しないと伝わらないってことも何度かありました。（私のドキュメント作成能力の問題かもしれませんが…） ほかにも、仕様変更や機能拡張などでシステムは日々進化していっているのに、操作マニュアルやチュートリアルは、古いままって状態もありました。ご経験ありますよね・・・？ 今回調べるにあたり、そういった背景やWebサイト/W
お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編）
はじめに Vue.jsは、シンプル・軽量・高速という特徴を持つデータバインディングライブラリとして最近注目を集めています。LINE社でもアプリ内WebViewの実装技術の選択肢の一つとしてVue.jsを採用しています。2014年11月27日にリリースされたLINEスケジュールは、Vue.jsを使って実装しているSPA（Single Page Application）の代表例です。 本稿は日本語記事がまだ少ないVue.jsの基本機能の紹介を目的とした「基礎編」として、公式ドキュメントの内容を元に解説します（執筆時点のバージョンであるv0.11の内容です）。 Vue.jsとは Vue.jsは、双方向バインディングによるModelとViewをつなぐ仕組み「ViewModelレイヤー（MVVMパターン）」を提供するJavaScriptのライブラリです。 Vue.jsの基本概念は以下のようになってい
bouncejs.com - bouncejs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Progress.js - Themeable progress bar library
ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for any object on the page. You can design your own template for progress bars or simply customize them. You can use ProgressJs to show the progress of loading contents (images, videos, etc.) on the page to the users. It can be used on all elements including textboxes, textareas or even the whole bod
TodoMVC
Introduction Developers have a number of choices today when it comes to selecting a JavaScript framework or UI library for building scalable web apps. React / Next.js, Vue / Nuxt, Angular…the list of solutions continues to grow, but just how do you decide on which to use in a sea of so many options? To help you understand the options, we created TodoMVC - a project which has offered the same Todo
Backbone.jsアプリケーション開発ガイド
Backbone.jsをはじめとして、コードの構造や保守の容易さを向上させてくれるJavaScriptフレームワークが人気です。本書の解説は、MVCによって構造化されたJavaScript SPAアプリケーションを作成する方法など、Backbone.jsについての基礎的な事柄にとどまりません。モジュール形式の開発やさまざまなプラグインの紹介、開発者がよく遭遇する問題への解決策、アプリケーションの骨組みの自動生成やユニットテストに至るまで、Backbone.jsアプリケーション開発のさまざまな局面を多角的にとらえた一冊です。 まえがき 1章 イントロダクション 1.1 MVCとは 1.2 Backbone.jsとは 1.3 JavaScriptのMVCフレームワークが必要になるとき 1.4 Backbone.jsを検討するべき理由 1.5 本書の構成 2章 MVC 2.1 MVCとは 2.1
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも
JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも JavaScriptのMVCフレームワークはBackbone.jsやEmber.jsなど多くの種類が登場していますが、Backbone.jsやEmber.jsなどが比較的シンプルなフレームワークを指向しているのに対して、AngularJSの特徴はUIバインディングを含むリッチなフレームワークとして開発されていることです（ちなみにAngularJSのWebサイトでは「MVWフレームワーク」と名乗っています。MVWのWはWhateverらしいです）。 AngularJSでは、HTMLにJavaScriptのコードを混ぜ込まなくとも、識別子を差し込むだけで、その識別子に対応したモデルのデータを自動的かつリアルタイムに表示してくれます。逆に、HT
Chaplin | HTML5 application architecture
Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practices. Chaplin empowers you to quickly develop scalable single-page web applications; allowing you to focus on designing and developing the underlying functionality in
AngularJSのサンプルアプリ - ワザノバ | wazanova.jp
http://weblogs.asp.net/dwahlin/archive/2013/10/25/learning-angularjs-by-example-the-customer-manager-application.aspx Dan Wahlinがブログの一連のポストで、AngularJSについてまとめています。AngularJSがはじめての方は、まずこちらの1時間+のビデオを見てからのほうがわかりやすいと思います。そのビデオの最後にも少しでてくるサンプルアプリについてまとめてみした。 [Customer Managementサンプルアプリの画面] 1) 主要機能 AngularJSの全ての機能を網羅してはいないが、下記のポイントを含んでいる。 factoryと再利用可能なデータservice（app/servicesフォルダ参照） カスタムdirective (app/dire
D3.js の Data-Driven な DOM 操作がおもしろい
D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG
JavaScript Garden
JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
Intro.js - Step-by-step guide and feature introduction for your website
No dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped). User-friendly Navigate using keyboard or mouse. Easily change the themes for your website. Browser compatibility Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer. Why using Intro.js? When new users visit your website or product you should demonstrate your product features
JavaScriptの実行速度を劇的に改善するasm.jsの特徴は、CやC++のような言語をJavaScriptのサブセットで記述すること
JavaScriptの実行速度を劇的に改善するasm.jsの特徴は、CやC++のような言語をJavaScriptのサブセットで記述すること 6月のリリース予定で現在開発が進んでいるFirefox 22では、JavaScriptのサブセット言語仕様であるasm.jsと、asm.jsに最適化したJavaScriptエンジンのOdionMonkeyが搭載予定とのことです。この両者の組み合わせは、JavaScriptを型つき言語として事前コンパイルすることで、いま以上に高速に実行できると期待されています。 asm.jsとは、jQueryのようなJavaScriptライブラリのようなものでも、Node.jsのようなフレームワーク実装のことでもなく、JavaScriptを基にしたサブセットの言語仕様です。 新しい言語を作るのではなく、既存のJavaScript文法をそのまま利用しつつ高速化を実現するa
JavaScriptの正規表現で変数？ - おふぃす・ぞんち開発日記
昨日の続きで、今日は技術的なお話。 JavaScriptの正規表現で変数使う時ってどうするんだろね・・・。 今回は、入力フォームの変数としてimage1,image2・・・にマッチする物を見つけたかったのね。それだけなら、 aaa.match(/^image([0-9]+)/) でいいんだけど、画像（image）と拡大画像（limage）を共通処理にしたかったんで、この正規表現の「image」の部分を可変（変数）にしてマッチさせたいってわけ。Perlだったら、 $aaa =~ /^$image[0-9]+/ と変数「$image」とでもしてぶち込んじゃえばいいんで、非常にわかりやすいし便利。JavaScriptで同じことしようったって、変数に「$」がついてて区別出来るわけではないので、入れようがない。 調べてみたら、正規表現オブジェクトというのがあるらしい・・・ re = new RegE
jQuery 開発者向けメモ - 基本・サンプル
基本 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したインタラクティブなページを作ることが出来ます． 以下のサンプルを見れば，JavaScriptらしい表記をほとんどする必要がないことがわかると思います． toggleサンプル 特定のブロックの表示・非表示を切り替えるのは以下のようなコードになります． $("#target_toggle").toggle("slow"); このブロックは，<p id="target_toggle"> です． Ajaxサンプル Ajaxでhello.htmlをロードするのは以下のようなコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NINJA138 : Keuntungan Games Viral Judi Online Official Metazoogames Company
Chart.js
JavaScriptユーティリティライブラリの紹介