はてなブックマーク

stack overflow にいいやり方が載っていたので紹介します。 出典：Abort ecmascript7 async function デモを書いてみました まずはこちらを見てください。何がやりたいかがわかりやすくなっているかと思います。 jsfiddle で動きを見る:CancellationToken async/await にはキャンセル処理を実装するための仕組みがありませんが、 async/await の元ネタである .NET framework に CancellationToken 構造体 というものがあります。 これを JS に持ち込むことで、キャンセル可能な async 関数を実装することができます。 CancellationToken クラス class CancellationToken { isCancellationRequested = false; co

この記事では、Label や Button などと同じように使いまわすことができる独自コントロールを作成します。コントロールに任意のプロパティを定義して、さらにデータバインディングもできるようにします。 サンプルコード sukobuto/xf-user-control-example ※こちらのサンプルコードでは Prism.Forms (MVVMインフラ) と ReactiveProperty を使っています。 Prism.Forms はこの記事の前提ではないので、使わなくても同じことができます。今回は MVVM でのプロジェクト作成が楽になる上、説明もしやすいため使っています。Prism.Forms については以下の記事がとっても参考になりました。 XamarinでPrismを使ったHello world / かずきのBlog@hatena Xamarin.Forms + Prism.

無償化に伴い、小さなベンチャーにとっても強力な選択肢の一つとなった Xamarin。 公式ドキュメントを読みながら勉強しています。 ViewModel から画面遷移できない！ MVVM でアプリを作るうえで、画面遷移は ViewModel 主体で（もしその先にアプリ全体を管理するモデルがあるのであればそこでコントロール）したいと考えます。 公式ドキュメントにもMVVM に触れた記載はあるものの、所詮「ViewModel をバインディングコンテキストにセットするとバインドできるようになるぜ」という MVVM の前提技術の一部を紹介するにとどまっています。 画面遷移のために必要な Navigation オブジェクトは View が持っており、ViewModel から遷移しようとすると ViewModel と View の相互依存が発生してしまいます。 ...View は ViewModel の

preg_replace_callback でゴリ押しする方法 否定戻り読みを使う方法 いまさら感の拭えないタイトルではありますが、意外と「すでにリンクになっている場合もある」想定のノウハウが見つかりませんでした。 preg_replace_callback でゴリ押しする方法 /** * @param string $body 処理対象のテキスト * @param string|null $link_title リンクテキスト * @return string */ function url2link($body, $link_title = null) { $pattern = '/(href=")?https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:@&=+$,%#]+/'; $body = preg_replace_callback($pattern, func

ググってもなかなか正解に辿りつけなかったのでメモ。 まず .ico ファイルをリソースに追加する Resource フォルダ（なければ追加）にドラッグ・アンド・ドロップで追加します。 ビルドアクションは Resource を選択してください。 XAML で設定する方法 <Window x:Class="DiffFileSaver.Views.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.m

いつもお世話になっております。KnockoutJS の無限の可能性を具現化していきたい私です。 私はアプリ開発に関する知識がほぼゼロなのですが、Knockout による SPA の開発技術を活かせるならと Cordova の勉強を始めました。そんな折にちょうどよく勉強会が開かれるということで。 第1回Apache Cordova勉強会(動画) 第2回Apache Cordova勉強会(まとめ) にお邪魔させていただきました。 既に 第3回 の開催も予定されています。（いつも開催時に次の予定を決めておき告知するというのはいいですね！） できれば第3回にて、KnockoutJS をコアとした Cordova アプリの開発で登壇できたら、ということで主催の田中さんと少しお話させていただいたりしました。 この記事は KnockoutJS AdventCalendar 2014 最終日の記事でもあり

追記: 今から SPA を始めようと思ってこの記事を見つけた方へ この記事は2014年に書きました。 KnockoutJS はバインディングライブラリとして生まれ、Angular, Vue などの MVVM フレームワークの礎となりました。現時点で振り返ってみても、KnockoutJS はやはりフレームワークではなくバインディングライブラリです。 SPA をサクッと作りたい場合、もしくは腹を据えて開発したい場合、どちらにおいてもフレームワークを利用したほうが明らかに楽です。この記事での実装方法には、退屈なボイラープレートが数多く残っています。 薄いライブラリを使用しているがための自由度の高さがあるか、と考えてみても Angular, Vue, React を使う場合と比較した優位性はもはやありません。 KnockoutJS を dis りたいわけではありませんが、冷静に比較しても SPA

RICOH THETA? これです RICOH THETA m15 なにかというと、ワンタッチで Google ストリートビューみたいな全天球写真 360° x 360° を撮影できるカメラなんです。真ん中にあるボタンでも撮影できますが、スマートフォンと Wifi 接続（THETA が親機になる）することでスマートフォンがシャッターになります。 ちょうどベトナムに旅行に行く機会があったので、すぐに買って持っていきました。 で、ツアーの方々と一緒に THETA を囲って撮影したりなんてことがあったのですが、撮影した写真は適切に処理してあげないとグニュァアアっと歪んでいて見られたものではありません。 どうやって共有したものか と悩んでいたところ three.js を使って全天球処理する話があったので、これを Knockout のカスタムバインディングにして独自ビューアを作ってみました。 カスタ

随時追加していきます。 おすすめがありましたらコメントか編集リクエストください！ ほとんどが海外の情報なのでドキュメントが英語だったりしますが、なにせ Knockout に関するものなのでシンプルすぎるほどシンプルです。サンプルコードを読めば大体わかります！ ViewModel ユーティリティ knockout.mapping (github) プレーンオブジェクトを ViewModel にマッピング（変換）するユーティリティ。 KnockoutJS 作者によるプラグインです。 参考：Knockout.js の Mapping プラグインを使ったら凄く捗った件/しばやん雑記 Knockout Validation (github) 言わずもがな、純正ともいうべきバリデーションライブラリです。 Bootstrap と組み合わせてエラーを視覚化するといった使い方もあります。 ko.editab

Ginq は LINQ の PHP 実装の一つ。とてもよい。 Ginq に限らず LINQ 系全般に通じる話です。 PHP で配列内のオブジェクトを条件によってグループ分けする、ということをたまにやりたい場面があります。Ginq では次のように書くことができます。 // 例えばこんなクラスのオブジェクト配列があるとする class EventSlate { /** @type string */ public $date; /** @type string */ public $title; public function __construct($date, $title) { $this->date = $date; $this->title = $title; } } $events = [ new EventSlate('2014/10/15', '寿司駆動ハンズオン'), new

※PHP extension が導入できる環境(Webサーバ管理権限等)が必要です できること JavaScript のプロトタイプ拡張や C# の拡張メソッドのように、string や array など、PHP のプリミティブ型にメソッドを 自由に追加 することができます。 // 単なる文字列 $str = "foo bar hoge"; // 文字列を空白で分割して配列に... // 条件で絞り込みつつ要素数を取得 echo $str ->split(' ') ->filter(function($x) { return $x->contains('o'); }) ->length(); // ... 2

なにかと dis られる言語 PHP ですが、dis られる要因としては 利用者が多い（少なければそもそも話題にならない） 言語自体に開発者を導くコンパスがない 結果的に負の遺産が多く築かれる ということがあると考えています。 PHP をうまく使ってご飯を食べている身としていくら dis られようと何ら弊害はないのですが、PHP は OSS で安定性・拡張性・言語自体の開発の活発さを保っておりコミュニティもとても活発な言語なので、今回は「PHP を使うとしたらこうやるといいよ」という方向性で書いてみようと思います。 あくまで個人の主観に基づいた記事です。ご了承下さい。 あくまでウェブアプリケーションを開発することを想定しています。 (それ以外の用途があるとは思いませんが) その前に、なぜ PHP を使うのか PHP は書けば動くから簡単だよ という罠 この言葉を耳にしたのは専門学校時代です

書いておけば履歴が残って便利なのでは？てことで書きました。 時代とともに追加・変更していこうと思います。 IDE PhpStorm PHP 及び Node.js での開発に使用。 クライアントワークで最も多く使用する。 PHP に限らず Web 開発ならこれ一本でだいたいいける。 理論上可能ならだいたい静的解析してくれるため、言語仕様でやや難のある PHP でも一定の型安全性が確保できる。コード補完もこれ以上ないほど強力で軽快。 npm パッケージ管理ツールもついてて Node.js での開発に便利。 PHP IDE :: JetBrains サムライズムで購入した VisualStudio 2015 C#.NET WPF, Xamarin での開発に使用。 Visual Studio フレームワーク Phalcon PHP Framework その名の通り、PHP WAF。 PHP ex

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

layout.ejs がレンダリングされない!! Express2 まではレイアウトを階層化する仕組みが提供されていましたが、Express3 では廃止され、EJS テンプレートエンジンの役割 (ejs-locals) として独立しました。 ejs-locals ※現在はメンテナンスが停止してしまっているようです。 Express2 までは views ディレクトリに layout.ejs という親テンプレートファイルを置き、以下のように記述することでレイアウトテンプレートとして使うことができました。 <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <%- body %> </bod

JavaScript は非同期処理が基本 jQuery は非同期処理を簡単にしてくれる Knockout MVVM における非同期処理パターン の三本立てでお送り致します。 JavaScript は非同期処理が基本 最近、こんな記事をいくつか見かけました。 「jQuery.ajax で結果が反映されない！困ったら async:false だ！」 これは Tips とは言えません。 async:false にすると何が変わるのか、正しく認識していますか？ jQuery の API リファレンス には、こうあります。 Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. 同期リクエストは 一時的にブラウザをロックし、一

2013/12/27 追記：初回アクセス時に popState イベントが発生しリロードしてしまう問題への対策を記載しました。（この追記により、タイトルが 15行 → 16行 に変更になりました^^） pushState popState とは Ajax を使ったスムーズな画面遷移でも、URL を書き換え履歴に追加し、ブラウザバックに対応することができる仕組みです。SEO への影響を出すこと無く操作性を向上させることができます。 現在、pushState/popState を使ったクライアントサイドルーティングを実現するライブラリがいくつか作られていますが、今回は jQuery だけで行うシンプルな方法を紹介します。 参考: Googleに続いてBingもAjaxにはpushStateを推奨 本題 jQuery だけで、15行程度でできる pushState popState を使った A

PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 （私はありました。） ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考：iPhone版Safariで文字サイズがおかしくなるときは-we