【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする - Qiita
はじめに 本稿は Vue 2.x が対象になります。Vue 3 に関する記事はこちらを参照ください。 Vue.js のコンポーネント間のデータのやりとりについて、親コンポーネントから子コンポーネントへデータを渡すには、v-bind 属性と props オプションを利用します。これにより親コンポーネント側でデータを変更すれば、子コンポーネントの props 経由で渡されたデータも変更されます。しかし、子コンポーネント側で props 経由で渡されたデータを直接変更することは非推奨です。しかし、子コンポーネントの変更を親コンポーネントへ反映したい場合があります。たとえば、再利用性のある入力フォームのコンポーネントを親子間でやりとりするケースです。この問題を解決するには v-model を正しく理解する必要があります。本稿で紹介するコードは CodeSandbox にて共有します。 サンプルコー
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
GoogleフォームにURLパラメータ使って初期値を指定する方法
ある商品ページからGoogleフォームを使った問い合わせを行う際、顧客が問い合わせ商品についてその都度書かなくても良いように、どの商品ページから問い合わせを行ったのかをわかるようにしました。 やったことは、WordPressでショートコードのプラグインをつくり、元ページのタイトルをGoogleフォームにURLパラメータとして渡すことです。 GoogleフォームにはURLパラメータを利用して初期値を指定することができるので、その方法をご説明します。 おおまかな流れ Googleフォームに初期値を渡す方法は検索するといくつか出てくるのですが、過去何度か仕様が変わっているようですね。現在のおおまかなやり方は、 １．GoogleフォームのURLを確認 ２．該当フォームのname要素を確認(これがURLパラメータとなる） ３．初期値として渡す値をURLエンコードしてパラメータと結び付けたものがURL
「React / Flux を実案件で使ってみた」その後
改めて覗いてみよう 1) CheckboxWithLabel changes the text after click: AssertionError: # /path/to/test/components/CheckboxWithLabel_test.jsx:21 assert(label.getDOMNode().textContent === 'On') | | | | | | "Off" false | HTMLLabelElement{htmlFor:"",form:null,accessKey:"",control:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:f
Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita
楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の
JavaScriptで英単語の原形を取得できるライブラリを公開しました
サンプルのデモページ サンプルで添付している html/lemmatizer_sample.html のデモページです。 JavaScript Lemmatizer デモページ 適当に英語の単語の変化形を入力、品詞を選択して（未選択でも可）、「Search Lemma」ボタンを押しますと、入力単語の原形を出力します。 使い方と取得できる単語の原形の戻り値 実際のメソッドの使い方や、取得できる戻り値は以下の通りです。js/lemmatizer.js をロード後、Lemmatizer インスタンスを生成して、Lemmatizer#lemmas か Lemmatizer#only_lemmas メソッドを使用します。 // initialize Lemmatizer. var lemmatizer = new Lemmatizer(); // retrieve a lemma with a pa
DrupalのSQLインジェクションCVE-2014-3704(Drupageddon)について調べてみた
既に日本でも報道されているように、著名なCMSであるDrupalのバージョン7系にはSQLインジェクション脆弱性があります（通称 Drupageddon; CVE-2014-3704）。この脆弱性について調査した内容を報告します。 ログイン時のSQL文を調べてみる MySQLのクエリログを有効にして、Drupaのログイン時に呼び出されるSQL文を調べてみます。リクエストメッセージは以下となります（一部のヘッダを省略）。 POST /?q=node&destination=node HTTP/1.1 Host: xxxxxxx User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0 Cookie: has_js=1; Drupal.toolbar.collapsed=0 Conn
MySQL内に保存された画像を、実ファイルに変換するスクリプト | SHINGO IRIE
実は僕が10年前くらいに作ったWebシステムのいくつかは、データベースにBLOB形式でバイナリファイルを格納していました。データベース内に直接画像を保存することで、検索と連動して処理しやすいようにしたつもりでした。 しかし、実際に運用がはじまるとそんなことはありませんでした。むしろ、データが増えてくるほどに危険性が増してきます。データベースのバックアップデータも肥大化し、SQLでバックアップをとっても、ファイルが数GBともなると、直接ファイルを開いて確認することはできませんし、復元する時にとんでもない労力が発生する可能性があります。 ということから、これまでデータベースに保存していた画像を取り出して、通常の画像ファイルに変更して保存しなおすスクリプトを作りました。それぞれの環境によって適宜変更が必要かと思いますし、流用の際は自己責任でお願いします。 データベースから画像を抽出するスクリプト
WinSCPのディレクトリ自動同期機能で開発効率アップ
RIA系の開発だと、画面定義XMLを専用のデザイナで作って、それをWEBサーバーにアップしてクライアントから動作確認、なんてことをやるケースが多いと思います。 今ウイングアークのSVFをイジくってるんですが、SVFも「SVFX-Designer」っていうGUIの画面デザイナで作成したXMLを、SVFサーバー（帳票サーバー）に配置して動作確認する必要があります。 環境的にはSVFサーバーがLinuxで、Sambaも入れてないしFTPサーバーも立ってない。というわけでWindows上で作った画面定義XMLファイルをLinuxサーバーにコピーするのにWinSCPを使ってGUIの画面でD&Dしてたんですが、これが結構面倒（なんせ開発中なんで頻繁に更新が発生する）。 クライアントPCで所定のフォルダ内に作成したXMLファイルをサーバーの所定のディレクトリに同期させればいいだけなんだけど… と思ってよ
オープンソースで必要な英語力を調べてみた
最近、mrubyのIssuesを英語で書くのが厳しく、やっぱり英語は勉強しなきゃなと日々痛感しています。 勉強するにしても普通の英語とは違うので、Issueを英語で書くためにどれぐらいの単語力が必要なのか調べてみました。 GitHub上のmrubyとnodejsのIssuesをダウンロードして形態素解析をして、単語の頻度をグラフにしてみました。 ものすごく偏っていることがわかります。 ここから1000だけ切り出してみます。 これを見ると3-500でほとんど部分をカバーできそうです。固有名詞もあるからもっと少ないはず。 これをベースにして「300語で書くオープンソースの英語」とか出来ないかな？ あとは、Phrasal verbs(get into, put onみたいなヤツ) なんだけど、代表的な物を公開しているリストないかな？それもランキングできると面白そう。 なお、この単語数は形態素解析
Ethna - PHPウェブアプリケーションフレームワーク
二重POSTを防止する (1) 登録画面の前のページ(確認画面等)にユニークIDを仕込む ethnaには二重POSTのチェック用のユニークIDを出力するSmartyプラグイン {uniqid} が用意されています。 以下のように確認画面(ない場合は登録画面) のテンプレートにユニークIDを仕込みます。 POSTの場合(hidden) <form method=POST action=index.php> <input type="hidden" name="action_user_regist_do" value="1"> {uniqid} : : </form> {uniqid} の部分には以下のようなhiddenタグが出力されます。 <input type="hidden" name="uniqid" value="a0f24f75e...e48864d3e"> GET の場合 <
フォームデザイン虎の巻：複数の選択肢を提供する - builder by ZDNet Japan
リモートワークを成功させる方法 必須となるセキュリティをどう強化するか 必要な対策5つを紹介 最新ストレージで変わるIT運用 仮想化テクノロジーとFlashArrayの組合せで 運用負荷軽減と高性能化を実現したDMM 50年の経験を持つアイネットが提供 ユーザー企業の使いやすさを第一に考えた ワンストップで使えるマネージドクラウド ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある 本当のデータ活用できていますか？ データドリブンがあたりまえと言われる今あらためて考えたいデータ活用のありかた クラウド導入が進まない本当の課題 ITベンダーだからこそ知っている クラウドに二の足を踏む企業のボトルネック iPhoneデバイスも統合的に管理 激しく変化する業務環境とリ
複数のテキスト入力に適したインタフェース実現用JavaScript「TextboxList」:phpspot開発日誌
TextboxList ・Devthought 複数のテキスト入力に適したインタフェース実現用Javascript「TextboxList」。 テキスト入力→改行を繰り返せば、アイテムがどんどん追加されていきます。 以下にデモを設置してみました。 ・テキストに入力して改行でアイテム追加 ・×ボタンでアイテム削除 ・バックスペースでアイテムどんどん削除 複数アイテム、例えば、アイテムにタグを追加したいというな場合に使えますね。 で、このform内容を実際にPOSTした場合、Array ( [test] => a,b,c,d ) のように、カンマ区切りのデータが得られます。 PHPなら、サーバ側で、このデータをexplodeしてリストに出来ますね。 この仕組みを利用したオートコンプリートの仕組みも同時に配布されています。 以下のようにサジェストされます。 これはなかなかクールですね。 Moot
フォームデザインいろいろ - DesignWalker
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Payments Orchestration Blog | Spreedly
CSS Gradient Background Maker
Twitter bootstrap入門 #twtr_hack
http://www.designwalker.com/2009/03/form-design-2.html
フォームをかっこいいデザインにしてくれる『Niceforms』 – creamu
pForm - Free HTML Form Builder - Create Web Form Template Online