3万社*1の業務課題を サイボウズのソリューションで解決しよう API ドキュメント、設計・開発・運用のノウハウや、イベント情報など、 エンジニアの成果を最大化する技術情報を発信しています。 *1 2024年5月時点でのkintone導入社数

忙しくない人は、公式のチュートリアルを頭から全部やると良いです。めんどくさくてそっちはやってないので分かりません。 とりあえずここを開いてジャッヴァスクリプトを眺める モジュールについて 基本中の基本。特に推奨セットアップのところを見ておけば良い。 DI(依存性注入)について こっちを読んだ方が幸せになれるかも。 どんなサンプルを読むにあたっても、DI の仕組みを知ってないと辛くなる。仕組み自体はよくできているが取っつきづらい。 特に 引数名で渡される実体が変わる 部分は慣れるまで気持ち悪い気がするし、ぼくは気持ち悪い。もっと言うと、minify した場合などで変数名が変わると動作しなくなるため基本的には変数名を指定して、実体を捕捉する必要がある。 var sampleApp = angular.module('sampleApp', []); /** たとえば、Controller で
自分が現役でプログラミングをやっていた時期はPHP4全盛期で、クラスも使わず、データベースもmysql_関数を直接使うような時代でした。もちろんテンプレートエンジンやフレームワークも使わず、HTMLにPHPのロジックを直書きです。JavaScriptもほとんど使っていなかったと思います。 それから数年プログラミングの世界から離れていて、つい最近舞い戻ってきたのですが、あまりにも技術が進歩していて、加齢プログラマにはついてゆくのが大変です。 新しい技術は、前提として知っていなければならない知識が多いのですね。 そんなわけで、カムバックしてから学んだことをまとめました。 PHP系 他の言語、具体的にはRuby on Railsも何度か挑戦したのですが、PHPで出来ることばかりなので、なんとなくモチベーションが上がらなくて最近はやってません。でもRuby界隈は楽しそうで羨ましい。 PDO データ
Minimal Form Interface | Codrops 入力抵抗を少なくできるかも、なミニマムなフォームインタフェースの一例。 フォームにはたった1つのinputしか用意されておらず1個1個の質問に答えていけば完了するというUIの実装デモです。 デザインがフラットでいい感じにアニメーションする部分もトレンドにのっている感じでいいのですが、入力抵抗を少なくすることでコンバージョンが上がるかも、ということで登録フォーム等でのテストをしてみてもよいのかもしれません。 関連エントリ クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」 フォームでの洗練されたアイテムへのタグ付けUI実装jQueryプラグイン「taggingJS」 複数画面にわたるステップ別のカッコいいフォームを実装できる「Ideal Forms 3」
追記:ベンチマークをコメントを元に修正 文字列から要素を作りたい場合、 var temp = document.createElement('div'); temp.innerHTML = '<span>foo bar fizz buzz!</span>'; とやることが多い。 だが、不要なdiv要素ができて気持ち悪いし、for文でchildNodesをひとつずつ処理する必要があって、不便。 divの中にhead要素を入れることはできないので、innerHTML=''としても、要素は作られない。 RangeのcreateContxtualFragmentを使うと、こういった問題を避けることができる。 例えば、上のコードをcreateContextualFragmentを使って書き直すと、 var range = document.createRange(); range.createCon
※わかりにくいとクレームがはいったため、大幅に加筆修正しました。 オブジェクトやthisという概念をどうやって理解するか? まだjavascriptのことがいまいちわかっていなかったときに、いろいろ考えてみた結果についてまとめておきます。 結論から言うとこれでjavascriptについて「だいたいわかった」と言えるようになったので、javascriptのオブジェクトを使いこなすためにはかなり有効な考え方なのではないでしょうか。 「メモリ上にwindowオブジェクトをルートにもつファイルシステムのようなものがある」 「それを編集・作成・取得できるようにするしくみがオブジェクトである」 ざっくり表現すると、だいたいこんな感じです。 こう考えを改めると、なんだか急にわかったような気がしてきました。 ここまで来たらもうだいたい勝ったようなものですが、油断せず行こう。続けます。 オブジェクトをディレ
Functional JavaScript(関数型言語としてのJavaScript) JavaScriptでは関数型言語の一部の機能が備わっています。 ここでは小難しい話は抜きにして、より可読性やメンテナンス性などをよくするために、 実践的なJavaScriptの関数型について考えていきます。 関数型の特徴 JSでの実装のみを知りたい場合は、 この項を飛ばして、気をつけるべきは三点へどうぞ。 関数型言語では関数でプログラムを組みます。 特徴としては 変数は再代入禁止である 関数は参照透過性が保たれている(副作用がない) があります。 しかし、前者の「変数の再代入禁止」は縛りとして強すぎるので、 JSでの実装においてはそこまで重視しません。 ただ再代入が少ない程、可読性はあがりやすいです。 後者の「参照透過性」とは、 「引数が同じであれば何回その関数を実行しても結果が変わらない」ことをいいま
JavaScriptプログラミングのTOPへ 今から3分で,HTML5の JavaScript API の使い方を2つ覚えよう。 1:ドラッグ&ドロップAPI 画面上の要素を。 画面外から。 2:File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで,これらの実装の方法を素早く学習する。 ※サンプルは,IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では,ここから3分の時間のカウントを開始。集中して読もう。 (0:00〜前半の1分半) 画面内でのドラッグ・ドロップ (後半の1:30〜3:00) 画面外からのドラッグ・ドロップ 参考資料 (0:00〜前半の1分半)画面内でのドラッグ・ドロップ まず,動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル1 ht
なんだこのプレゼンは? と思ったプレゼンをネット上で見かけた。 Build Warsへのリンク JavaScriptのプロダクトをうまい具合にビルドするためのツール、 Gruntとglupを比較したプレゼンだ。 gifアニメが多用されてるし、オサレでカッコイイ。 何使ってこのプレゼン作ってるんだ!?と思って調べてみたら、 このプレゼンの作者が自分で作っていた。 bespoke.jsというアプリだった。 bespoke.js bespoke.jsというプレゼンアプリを早速使ってみたい。 セットアップや、プレゼンのスケルトン作成って めんどくさいのかなと思ったんだけど、yeomanを利用して テンプレを作成する形になってて、 プレゼン作成準備に必要な手間は少ししかなかった。 bespoke.jsを使うまで bespoke.jsをセットアップするのに必要なツールは以下の通り。 node.js y
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
Document has moved, if you aren't automatically redirected go here.
そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。
こちらです ☞ JavaScript Libraries Playground(jQuery 2.1.0 と underscore の例) jQuery や underscore などの JavaScript ライブラリをインタラクティブに試したいとき、最近はブラウザで自分のブログ(ここ)や GitHub など、当該のライブラリがロードされていることを知っているページを開いておもむろに ⎇⌘J(Chrome)! していたのですがこれは直接的ではないなと思ってそれ専用のページを作った次第です。 冒頭の例にもあるように location.search 部に library[@version],… 形式でライブラリを与えてやればページに <script> 要素が追加されて、あとは開発者コンソールなりでお楽しみください、という仕組みになっています。 cdnjs にはかなり多くのライブラリがホストさ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く