KnowkoutJSでTrelloライクなWebアプリを作る - Qiita
みなさん、Trello使ってますか？ IT企業は「TrelloとSlack使ってる」と言っておけばイケてるスタートアップ風を装えると誰かが言っていました。 KnockoutJS Advent Calendar 13日目ということで今回はTrelloライクなUIをKnockoutJSで実装してみたいと思います。 一応軽く説明すると、Trelloはタスクを書いた『カード』と、カードをステータスごとに格納する『リスト』から構成されているタスク管理ツールで、「リストにカードを追加・削除したり、異なるリストにカードを移動させる」というのが基本的な機能です。 例えばTODOリストに新しいタスクを書いたカードを追加して、そのタスクに取りかかるときにDOINGリストに移動し、タスクが終了したらDONEリストに移動するという流れで使います。 特徴的なのは、これらの動作をすべてドラッグ＆ドロップで行う点です。
キャレット位置をバインド&キャレット位置に文字列を挿入「caret binding」 - Qiita
TinyMCE ほど高機能な WYSIWYG エディタでなくても、カーソル位置に文字列を挿入する機能くらいつけたいなぁなんてことありませんか そこで今回ご紹介するのが「caret binding」です ko.bindingHandlers.caret = { init: function(element, valueAccessor, allBindings) { var $elm = $(element), suspend = true, value_writer = allBindings()._ko_property_writers.value; function updateModel() { var pos = $elm.caret(); var modelValue = valueAccessor(); suspend = true; if (ko.isObservable(m
KO + TypeScript + Cordova でハイブリッドアプリ開発 - Qiita
いつもお世話になっております。KnockoutJS の無限の可能性を具現化していきたい私です。 私はアプリ開発に関する知識がほぼゼロなのですが、Knockout による SPA の開発技術を活かせるならと Cordova の勉強を始めました。そんな折にちょうどよく勉強会が開かれるということで。 第1回Apache Cordova勉強会(動画) 第2回Apache Cordova勉強会(まとめ) にお邪魔させていただきました。 既に 第3回 の開催も予定されています。（いつも開催時に次の予定を決めておき告知するというのはいいですね！） できれば第3回にて、KnockoutJS をコアとした Cordova アプリの開発で登壇できたら、ということで主催の田中さんと少しお話させていただいたりしました。 この記事は KnockoutJS AdventCalendar 2014 最終日の記事でもあり
丸みを帯びたデザインが特徴のフリーアイコンセット「Essential Generic Free Icons (SVG & PNG)」
デザイン制作に便利な素材の一つとしてあげられるアイコン。種類やテイストにもさまざまな種類が存在しています。そんな中今回紹介するのは、丸みを帯びたデザインが特徴のフリーアイコンセット「Essential Generic Free Icons (SVG & PNG)」です。 ぽってりとした質感が印象的な、かわいらしい雰囲気のアイコンが100個セットでダウンロードできるようになっています。 詳しくは以下 種類としては、定番のファイルや矢印、ダウンロード、チェックマークなどのアイコンがしっかりと揃っており、デザイン的にはベーシックな中にも個性を感じさせますが、いろいろなデザインに使用できそうです。また100種という利用しやすい数、SVG・PNGという多彩な媒体に対応できる形式などがしっかりと押さえられているもの特徴です。 すでに定番アイコンを持っているという方も、ちょっと変化を付けたデザインアイコ
Knockoutの template バインディング - 418 | I'm a teapot
これはKnockoutJSアドベントカレンダー１５日目の記事です。 KnockoutJS Advent Calendar 2014 - Qiita KnockoutJSには template バインディングなるものがあります。 これは何かというと HTMLの一部を切り出してテンプレート化して使える機能です。 利用用途としては「Componentsにするほどでもないけどこの画面でよく使うので切り出しておきたい」と いった場合などでしょうか。 それではさっそく公式サイトのドキュメントからかいつまんで説明していきたいと思います。 http://knockoutjs.com/documentation/template-binding.html 公式ドキュメントにあるように、 template バインディングの書き方は以下のようになります。 <h2>Participants</h2> Here a
カスタムバインディングの作り方 - 418 | I'm a teapot
これはKnockoutJSアドベントカレンダー１４日目の記事です。 KnockoutJS Advent Calendar 2014 - Qiita KnockoutJSではすでに組み込まれているvalueバインディングやclickバインディングなど以外でも 自分でバインディングを作成することができます。 作り方は公式サイトにあります。 Knockout : Creating custom bindings 使い方は公式サイトのとおりです。 こういうふうに定義すると・・・・ ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding i
ko.utils（その他） - 418 | I'm a teapot
これはKnockoutJSアドベントカレンダー８日目の記事です。 KnockoutJS Advent Calendar 2014 - Qiita 今日は Knockout の便利機能が入った ko.utils について適当に紹介します。 前回は配列だったのでそれ以外を紹介します。 ソースコードはここ。 https://github.com/knockout/knockout/blob/master/src/utils.js 紹介するのは以下のメソッドです。 ko.utils.extend ko.utils.fieldsIncludedWithJsonPost ko.utils.getFormFields ko.utils.peekObservable ko.utils.postJson ko.utils.postJson ko.utils.parseJson ko.utils.string
たった１０分で驚く程イケメンに！眉毛の整え方参考サイト１２選
あなたはモテる男性は眉毛を整えていると聞いて、眉毛を整え始めようかなと思われていませんか？でも自力で眉毛を整えて失敗してしまい挫折したという経験の方も多いですよね。 眉毛を整えることで、見た目を好印象にさせ、仕事もプライベートもポジティブになります。 私は20代からサロンで働いていますが、男性が眉を整えた後の変わりように日々驚いています。 実際に約90％の女性が、男性が眉毛を整えることに好意的なアンケート結果もでています。初めのうちは慣れませんが、習慣化して自分にあった眉毛をらくちんに整え続けることができます。 ここでは、１０分程度でできる眉毛の整え方の参考になるサイトと動画をご紹介して行きます。 １．男性が眉毛を整えるってどうなの？ 一先ず、男性が眉毛を整える事について、世間はどう思っているのでしょうか？ ある統計では、男性が眉毛を整える事について、下記のように回答しています。 【 良い
新人プログラマに知っておいてもらいたい人類がオブジェクト指向を手に入れるまでの軌跡 - Qiita
あわせて読みたい 新人プログラマに知ってもらいたいメソッドを読みやすく維持するいくつかの原則 ペアプログラミングして気がついた新人プログラマの成長を阻害する悪習 「オブジェクト指向プログラミング」と「関数型プログラミング」のたった一つのシンプルな違い あきらめるにはまだ早い！ソースコードの品質向上に効果的なアプローチ 2015年に備えて知っておきたいリアクティブアーキテクチャの潮流 この記事について この記事は新人向けの研修内容を再編集してお送りいたします。 ここで述べる内容はどのようにして現在のプログラミングスタイルが生まれてきたかを理解することで、よりよいプログラムを書くためのもので、正確なソフトウェア工学の歴史を学ぶためのものではありません。正確な歴史を把握したい場合は、原典をあたるようにしてください。 また、想定している読者は「よくあるオブジェクト指向プログラミングの学習」を既にし
WPFのサンプルアプリケーションを作ってみました。 - Qiita
この１年半ほど取り組んできたWPFの仕事がそろそろ終わりそうなので、得たノウハウ（というほどのものではないけど）を残しておこうと小さなサンプルアプリケーションを作ってみました。もし次にまたWPF関連の仕事にありつけたらその時のたたき台として使うためですが、これからWPFを使って開発をしようという人のお手本というつもりはありませんけど、とっかかりにでもなればと思い公開します。 一人で開発してたので対象となるコードも少なく、WPFの一般的なお作法から大きく外れてたり、まともなプログラマとしてこれはねーだろうというダサいコーディングや、そもそもバグってるかもしれんので、そういう指摘をいただけると嬉しいです。 アプリケーションは蔵書管理を目的とした小さなものですが、WPFでのアプリケーション開発での、MVVMパターン、データバインディング（INotifyPropertyChangedによる変更通知
Knockout.js の paging extender を使ってページングを実装する - しばやん雑記
Knockout.js で項目のページングを行う方法として、公式サンプルにある simpleGrid を使う方法があります。 Knockout : Paged grid 名前からわかるように、ページング用と言うよりも簡単に GridView を作るための ViewModel になります。*1 もうちょっと汎用的に使えるページング用の実装が欲しかったので調べていたら、JSFiddle で paging extender と言うものを見つけました。 extender を使って observableArray にページング用のメソッドやプロパティを追加するので、結構スマートに書けているし実装が分離出来ていていい感じです。 ちょっとごちゃっとしてるので、最低限のコードだけ引っ張ってきました。 <ul data-bind="foreach: tweets.currentPageData"> <li
データ ポイント - コンテキストが限定されるドメイン駆動設計でのデータ共有パターン
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 コンテキストが限定されるドメイン駆動設計でのデータ共有パターン Julie Lerman コード サンプルのダウンロード 私はプログラミング人生の中で、コードとデータを再利用できるようにすることを自分を駆り立てる目標としてきました。そのため、ドメイン駆動設計 (DDD) の学習を始めた当初、コンテキストを限定して強制的に分離し、コードはもちろんデータまでコピーすることがある DDD の手法は理解に苦しみました。DDD 業界の優秀な開発者数人の手を借りて、私の古いやり方が招く潜在的な問題が明らかになったときは、卒倒するような気分でした。最終的には、どこで複雑さという犠牲を払うかを選択することが必要だと Eric
Deploy to Azure Button を試してみた - しばやん雑記
Heroku Button を知って Azure Web サイト版が欲しいなーとか思ってました。 Deploy to Azure Web Sites ボタンが必要とされているのではないか— しばやん (@shibayan) September 25, 2014 とか呟いておいて特に何もしてなかったんですが、MSFT の Brady Gaster 氏が Azure Active Directory の Azure Service Management パーミッションを使って、Deploy to Azure ボタンを実装してみたらしいです。 The Deploy to Azure Button Vittorio Bertocci 氏と一緒に作ったっぽいですね。Azure Active Directory というか IDM 周りのプロフェッショナルと作ったとか最強すぎる…。しかし、AAD 使って
ステップ形式のウィザードが作れる「jQuery Steps」:phpspot開発日誌
Examples - jQuery Steps ステップ形式のウィザードが作れる「jQuery Steps」。 WEBサイト上で、ユーザ登録画面などで入力項目が多い場合にステップ表示をした方がユーザは安心しますが、それをjQueryで簡単に実現できるプラグイン。 デザイン的にBootstrapなサイトでも使えそうで便利かも 関連エントリ フォームにて入力の入力UIを追加できる「jquery.signfield」 フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 より良いフォームの入力ヒント実装jQueryプラグイン「Label Better」 クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」
» selectをカスタマイズするjQueryプラグイン | isee ウェブに関するブログ
jQuery Advent Calendar 2014の14日目。 select要素をカスタマイズするプラグインを作成してみました。select要素を自由にデザインする この記事はjQuery Advent Calendar 2014の14日目の記事です。特にネタが思いつかなかったのでプラグインを作成してみました。 select要素はcssでもデザインできますが、ブラウザごとに挙動が違っていたりけっこう面倒くさいです。そこでjQueryでselect要素を自由にデザインできるプラグインを作成してみました。厳密にはselect要素とは別にdiv要素を生成し、select要素に見立てるというものです。早速デモをどうぞ。 DEMO コードは以下のような感じです。Githubに上げてあるのでよかったらダウンロードして使ってみてください。 Github <div class="select js-s
ASP.NET MVC と Azure Web Sites で VS Online のカスタムService Hookを作成してサクッとリモートデバッグする - きよくらの備忘録
本エントリはASP.NET Advent Calendar 2014 24日目対応エントリです。4日目に続き今年2回目のエントリですが、今回はもう少しASP.NET的な成分が多くなる…予定。 VS Online のカスタムService Hook 以前のエントリで少し触れましてが、Visual Studio Online は外部のサービスと連携可能です。 例えばHipChatをはじめJenkinsやAppVeyor、Hubot等々、色々なものとの連携がビルトインされてますが、仕様に沿ったWeb APIの口を用意するとこでカスタムのWeb Hookを行うことも可能になっています。 Web Hookを作成するにあたっては、もちろんですが特に言語などは選びません。規定の形式のJSONでPOSTされるデータを受信できるWeb APIさえ用意すればOKです。 言語はなんでもOKなんですが、Visua
マジックビーンズ
4. アクティブレコードとは データベーステーブルあるいはビューの1行が1つのクラスにラップさ れ、オブジェクトのインスタンスがそのデータベースの1つの行に結合 される。このクラスはデータベースアクセスのカプセル化も行う。オブ ジェクトの生成後は、保存メソッドで新しい行がデータベースに追加 される。 オブジェクトが更新されると、データベースの対応する行も また更新される。 出典: http://ja.wikipedia.org/wiki/Active_Record 5. アクティブレコードとは # 1 件取得 bug = Bug.find(1234) # SELECT * FROM bugs ! # 新規作成 bug = new Bug.new bug.summary = ‘保存時にクラッシュが発生’ bug.save # INSERT INTO bugs (summary) VALUES
フラットで超カッコいいUIライブラリ「Semantic UI」:phpspot開発日誌
Getting Started | Semantic UI フラットで超カッコいいUIライブラリ「Semantic UI」 ボタン、ヘッダー、アイコン、パンくずリスト、フォーム、グリッド、メニュー等実に豊富で、クールななUIエレメントがセットになっています。 ざっと見たところ、Bootstrapにも対抗できそうなUIライブラリです。とにかく、流行りのフラットデザインベースがカッコいい。 マークアップもBootstrapより、より自然な記法になっているところも嬉しい。 Bootstrapとお互いに競争して素晴らしいライブラリになってくれると利用側としては選択肢が増えてありがたい限り。 関連エントリ FlatなUIが美しいJSレスなUIライブラリ「TopCoat」 Yahooが作ったピュアCSSのUIライブラリ「Pure」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「
Visual Studio 2013 で Bower を使う - miso_soup3 Blog
Visual Studio 2013 で Grunt, Bower を使った運用ができるかなと思い試してみました。その手順を記載します。 参考サイトは 2015/1 に来日されるハンセルマンのブログから：Introducing Gulp, Grunt, Bower, and npm support for Visual Studio VS 2013 で Grunt, Bower を使ってる図 所感 VS からできるといっても今のところは CUI に近い感じ。 操作は VS 2015 の場合とほぼ同じ。 パッケージを取得だけではなく配置まで細かく設定できるのは便利そう。 Web Essentials と同じ匂いを感じます。（Mads Kristensen 氏が関係しているから？） Web Essentials 2015 では、コンパイラ等の node.js ベースのツールが取り外されるみたい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
綺麗なTOCを自動で作られるjQueryプラグイン「contents」:phpspot開発日誌
日付範囲の入力に便利な「jQuery UI Date Range Picker Widget」:phpspot開発日誌