JavaScriptだけでExcel風のスプレッドシートを開発できる「jExcel」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで簡単にExcelのようなスプレッドシートを作成できるライブラリをご紹介します！ 基本的な操作はすべてJavaScriptから制御可能であり、自分の好きなようにカスタマイズできる強力な機能が多数提供されています。また、簡単なプログラムだけでファイルの書き出し機能が利用できるなど便利なメソッドも多く含まれています。 自作のWebアプリなどにも手軽に組み込めるので、ご興味ある方はぜひ参考にしてみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 【 jExcel 】 ■「jExcel」の使い方 それでは、まず最初に「jExcel」の導入方法から見ていきましょう！ 全部で3通りの方法が以下のように提供されています。
完全カスタマイズOK！ブロックスタイルのテキストエディタを開発可能な「Editor.js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Mediumなどにも採用されているブロックスタイルのテキストエディタを開発できるJavaScriptライブラリをご紹介します！ ヘッダー要素・リスト・画像など、それぞれのコンテンツを独立したブロックで管理することができ、保存時の出力はクリーンなJSONデータとして取得することができます。 また、簡単に開発できるプラグインにより、欲しい機能を好きなだけ拡張していくことも可能なので、オリジナルのテキストエディタにご興味ある方はぜひ参考にしてみてください！ なおpaizaラーニングでは、JavaScriptの基本が学べる講座「JavaScript入門編」を公開しています。そちらも合わせてチェックしてみてください。 【 Editor.js 】 ■「Editor.js」の導入方法 それでは、最初にEditor.jsをどのように使えばよいのかを見て
JavaScriptで自分だけのWeb製作エディタを構築できる「GrapesJS」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は、ドラッグ＆ドロップで誰でも簡単にWebサイトを製作できるサービスのご紹介です！ そのままでもWebオーサリングツールとして大変便利なのですが、JavaScriptで好きなようにカスタマイズしてオリジナルのエディタを開発＆公開できるという面白い特徴があります。 現在、オープンソースとして活発に開発が進められているので、ぜひこの機会にみなさんも試してみてください！ 【 GrapesJS 】 ■「GrapesJS」の使い方！ それでは「GrapesJS」を使ったWeb製作エディタがどのようなツールなのかを見ていきましょう！ トップページにある「Webpage Demo」というボタンからアクセスすることができます。 登録なども不要で、すぐにブラウザ上で「エディタ」が表示されます。 この画面上で、自分の好きなようにWebサイトを製作することができ
CMSによるスマホアプリケーション開発の選び方や導入メリットを解説
独自開発するのにコストや手間がかかるスマホアプリ。しかしCMSを活用することで、スマホアプリは気軽に作成できます。扱うのに専門知識を必要としないため、アプリ開発のハードルが大幅に下がるでしょう。 この記事では、CMSの製品を紹介するとともに、製品選定ポイントや導入メリットについて解説します。スマホアプリの開発・運用のコスト軽減に役立ててください。
ブラウザ上でサインを書けるjQueryプラグイン「jSignature」:phpspot開発日誌
jSignature ブラウザ上でサインを書けるjQueryプラグイン「jSignature」。 CanvasかFlashで描画出来るので多くのブラウザに対応。ウェブサイトにサインを導入したい場合に使えるかも 実装は以下のように超簡単です <script src="libs/jSignature.min.js"></script> <div id="signature"></div> <script> $(document).ready(function() { $("#signature").jSignature() }) </script> データをSVGのbase64形式で取得できたりもするみたい デモページはこちら サイン書いてみました（＾＾） 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 一見普通のテーブルだけどExcel風に使えるjQueryプ
マルチタッチを実装してCanvasに3本指で線を引くサンプル | キリウ君が読まないノート
JavaScriptでマルチタッチ実装するサンプルです。複数本の指でCanvasに線を引けて、途中で指を増やしたり減らしたりしても大丈夫なはずです。 指が接地してるかぎり、Touch.identifier が変わらないのを利用してます。指が接地したときに identifier を覚えておき、指が離れたときに覚えておいた identifier を削除します。よって、実装上保持できるようにした identifier の数 ＝ マルチタッチ可能な上限数ということになります。 ちなみに identifier は、Chrome (ver65.0.3325.181) の開発者ツールだとゼロが設定されてました。手元のiPhone 6Sだと、結構大きい桁数の連番だったような気がします。なのでゼロが来ることは一応考慮しておき、かつ identifier の具体的な数字に依存した実装も避けます。 しかしこれ
手書きホワイトボードの説明
手書きホワイトボードの説明 2013.9.10 作成 2016.2.14 改訂 パソコンやタブレットの画面に、マウスや指で手書きできます。 但し、HTML5非対応のブラウザ(IE8など)はNGです。 書き込んだ内容を、ワンタッチで一括消去でき、跡が残らないのが特徴です。 ＰＣ(マウスドラッグ)でもタブレットでも手書きができます。 タッチパネルの場合、「クリック」を「タップ」と読み替えてください。 色ボタンをクリックすると色を変更できます。 線幅ボタンをクリックすると線幅を変更できます。 「全面」ボタンをクリックすると、設定色で画面を塗りつぶすことができます。 「消去」ボタンをクリックすると、画面を一括消去できます。
タスク、プロジェクト管理の表示に便利なガントチャートライブラリまとめ
業務システムでは各人員のタスク管理が重要になります。単発のタスクだけでなく、グルーピングしたり、さらにあるタスクの成果物が他のタスクに関連したりしていると必要になってくるのがガントチャートです。 今回はWebベース、HTML5で作られたガントチャートライブラリをまとめて紹介します。自社システムに組み込む際にぜひ参考にしてください。 Twproject Gantt Webサービスのガントチャートも提供していますが、オープンソース（MIT License）で取得もできます。チャート内での変種機能、クリティカルパス設定、リサイズ、スクロール、SVGによるドロー、ドラッグ&ドロップによる移動などの機能がサポートされています。 Twproject Gantt jQuery.ganttView シンプルな色合いのガントチャートです。ドラッグ&ドロップ、スクロール、イベントのハンドリングなどの機能があり
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
Electronでアプリケーションを作ってみよう - Qiita
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
Electronの手習い〜Electron環境からパッケージ化まで〜 - Qiita
Electronってどういうことができるのか全く知らない状態からスタートです。 Electronとは？についての参考資料 Electron 本家サイト HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点 本家サイトを翻訳してくれているページ発見 助かる。。 ★ 本家サイトからのデモファイルDL時に混乱したこと http://electron.atom.io/#get-started に「Downlode for mac」があったのでそれをDLして中身を確認しようとしました。 しかし、これは**「Electronで開発したアプリでは、どのようなことが行えるか」**がわかるappであり、期待しているソースファイルはありませんでした。 自分でつくっ
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
Seleniumアレルギーのための処方箋 - Qiita
何年も前、SeleniumやWebDriverの話で盛り上がった記憶があります。ただ、その当時はまだRailsなどバックエンド中心の文脈でした。今、フロントエンドに軸足が移る中、ブラウザテストの状況はどうなったのでしょう? 不思議なことに、フロントエンド界隈でそれほど話題に上がって来ないですよね (私の周りだけ?)。結構大事なのに。実は皆さん、「Seleniumアレルギー」なんじゃないですか? 公式サイトに漂う ゼロ年代感(下図)。Javaへの躊躇、「めんどくさい」と聞かされ続けた過去、無意識に避けてしまうのがSeleniumです。 ただ、フロントエンドの文脈でこそ、ブラウザテストは重要度を増しています。そこで「Selenium触りたくない病」の筆者が、 四苦八苦した背景 と、2016年だからこそ 見えてきた落とし所 を書いてみたいと思います。 註: 思ったより長文になってしまいました。先
サーバサイドJavaScriptの本命「node.js」の基礎知識
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです（例えば、「ログが必要だよね」など）。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
jQueryでthisの子要素を取得するやり方いろいろ | Base Views
公開 2010年6月6日（日） 更新日 2014年8月18日（月） スポンサーリンク jQueryを使っていて、thisとその子要素を同時に指定したい場合がある。 結構いろんなやり方があるみたいで、取りあえず使いやすそうなので下の3通り。 $("hoge",this) $(this).children("hoge") $(this).find("hoge") 一番上がシンプルでいいかと思うんですが、取得したいthis直下の要素名をthisの手前に書くんですね… 使いどころは多そうですが、例えば下みたいなの。「Click1」をクリックしたらその直下の<div>が隠れるようにしたい場合とか。 <ul> <li>Click1 <div> <h2>Menu1</h2> <p>text1</p> </div> </li> <li>Click2 <div> <li>Menu2</li> <li>tex
Bootstrap Editor
Bootstrap Editor Webページを爆速で作成 「ログインもインストールも不要」です。(全76テンプレート) Bootstrap Editorはブラウザがあればいつでも使えます！ [ 2018-02-02 ] Bootstrap Editor に名前を戻しました。 [ 2018-05-12 ] Bootstrap4.1バージョンアップによる不具合を修正 [ テンプレート ] Bootstrap4 34枚 [ テンプレート ] Materialize 2枚 [ テンプレート ] Foundation 8枚 [ テンプレート ] AMP 9枚 [ テンプレート ] JavaScript/GoogleMap/vew.js 23枚 2018年1月15日 Coliss掲載（http://coliss.com/） 1. Code エディター：3色から選択（Emmet） 2. Templat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【完全ガイド】LINEミニアプリ開発からデプロイまでを丁寧に解説 | ギークの逆襲 🐟
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
TEST CORDING » node.js 怒濤の50サンプル!! – socket.io編
JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
