Chosenの日本語入力の問題点とは？ ①日本語入力後のEnterで勝手に要素が決定してしまう 例えば、下記のように日本語で「ジョ」と入力した時、「ジョ」が入っている要素が検索されるまでは良いのですが、この状態で入力を確定しようとEnterを押すと、 英語だと入力中にEnterを押すというのはまさに確定ですからね。 「日本語入力の確定の為のEnter」という判定はChosenプラグインにはデフォルトでは入っていないです。 これが問題の一つです。 一番良いのはGoogle検索のサジェクトのように日本語入力確定した後に下矢印などで要素を選択出来れば最高ですよね。 ②途中の文言にはヒットしない 前回、紹介したchosenのデモページを触ってみてもらえれば分かるかと思いますが、要素の途中の文字列にはヒットしません。 要するに「ジョナサン・ジョースター」であれば「ナサン」と打ってもヒットしてもらいた

Home › プログラミング › 【jQuery】chosenプラグインって日本語いけたんだ！じゃーセレクトボックスはこれで良いじゃん！ chosenプラグインはご存じですか？ セレクトボックスの中身を直感的に検索できちゃうアイツですね。 以前、日本語もいけるのかな？とchosenを試した時には英語のみ対応だったのでちょっと見送ったのですが、日本語も対応できるようにカスタマイズすれば良いかと改めて最近ダウンロードしてみたら、いつの間にか日本語も対応してたんですね。 もしや最初からなの？ まあそこはどなたか知っていたら教えて欲しいのですが、使い方とデモを書いておきます。 2014/10/15 追記 下記の投稿で日本語に最適化したchosenプラグインに関して書いています。

【まとめ】本当に使える商用無料の写真素材サイト６選 どうもpei(@pei_babo)です。 ブログを書き始めてから結構困ったのが写真素材です。 「写真ってどこから手に入れるの？」 「写真素材にお金はかけたくないな、、、でもそれなりに見える写真が良い！」 「勝手に使って良いのかな？」 「自分で撮るのはちょっと自信ないな。」 などなどブログを始めた方はいずれかに当てはまるものがあるのではないでしょうか。 今回はブログを始めて約１年のpeiがオススメする、本当に使えるクオリティの高い無料写真素材サイトを紹介したいと思います！ プログラミングやWordPressを習得するのに一番近道な方法とは？ 本当に使える写真素材サイト ぱくたそ/PAKUTASO 言わずと知れた超人気写真素材サイト。 「これ使えるのか？？」といったギャグ系の写真が注目されがちだが、その他の写真も全て超ハイクオリティ！ サイト

Home › プログラミング › jQueryでテーブルソートを簡単かつオシャレに作るならAnimated Table Sorterプラグインにおまかせ！ jQueryでテーブルソートを簡単かつオシャレに作るならAnimated Table Sorterプラグインにおまかせ！ テーブルソートってサーバ側で実装すると地味に面倒な作業ですよね。 クライアント側でチャチャッと出来ちゃえば作る側も嬉しい、ユーザーも嬉しいと一石二鳥。 そんな時にオススメなのが、簡単にクライアント側でテーブルソートが実装出来ちゃうAmimated Table Sortを紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは？

郵便番号APIはajaxzip3で決まり！SSLも対応してるし今のところ申し分なし！ どうもpei(@pei_babo)です。 先日、申し込みフォームを作成していたのですが郵便番号を入力すると勝手に住所入力されるやつを簡単に実装しようと思ってちょっと調べたのですが、今のところ郵便番号APIの有力候補は… 「コレだ！」 というものを見つけましたので共有します。 といってもEC-CUBEで使われていたり、元々結構有名だったようですが、気にせず紹介させて下さい。 プログラミングやWordPressを習得するのに一番近道な方法とは？

XSERVERにFileZillaでSFTP接続する方法！ どうもpei(@pei_babo)です。 新しく当ブログ以外に個人的にWEBサイトを作成しようかなと思っているのですが、今回はかねてから何かと評判の良いエックスサーバーを使ってみようじゃないかと早速契約してみました。 サーバ情報のメールが届いたので、私の愛用FTPソフトのFileZillaでSFTP接続しようと思ったのですが、 「ん？うまく繋がらないな・・・」 どうやらXSERVERでSFTP接続する時は鍵認証じゃないといけないみたいです。 今日はXSERVERでSFTP接続をする方法を簡単に紹介します。 ちなみに私のMac愛用アプリの記事はこちらからどうぞ。 そもそもなぜFTPではダメなのか？ 釈迦に説法的な話で恐縮ですが、そもそもなぜFTP接続ではなくSFTP接続にするのか？という話ですが、それは・・・ FTPだとパスワードが

そもそも保護フィルムを付ける目的は？ 保護フィルムを付ける目的は人それぞれあるかと思いますが、主なところでは下記のようなものではないでしょうか。 というか私はこれです。 他にも画面を鏡のようにしたい！や、隣の人から見られるのがイヤ！などがあるとは思いますが、私は主にこの４つを目的としています。 保護フィルムの種類は？ 保護フィルムを付けたいと思っても、色々種類があってどれが良いか分からない！っという方もいるのではないでしょうか。 「選ぶのまんどくせ」 まずはどんな種類があるかおさらいしましょう。 今回は大きーく分けて２種類の説明をします。 細かく分ければもっと種類がありますが、この２タイプを覚えておけば大丈夫です。 ① 光沢系 （グレアタイプ） 【特徴】 フィルムの表面が平らになっており、画面の美しさを損ないません。デメリットとしては光の映り込みが大きい、指紋が目立ちやすい、操作性があまり

WordPressで投稿記事をSNSに共有するならJetpackプラグイン一択！ 「被リンクの時代は終わりだ！」 「今はコンテンツ・マーケティングらしいよ！」 「コンテンツ・イズ・キング」 というような話題があってから久しいですが、被リンクが全く無効になるというのは行き過ぎな話というのは置いておいて、良質なコンテンツを定期的に長期間投稿し続けるのがSEO的にも良いということはどうやら周知の事実になってきているのは間違いないようです。 そうなるとますます需要が高まっているのが「WordPress」や「MovableType」といったCMSですね。 当ブログもご多分に漏れずWordPressを使用させていただいております。 企業などにおいて担当者がHTMLの知識が無くても簡単に記事を投稿できるのが魅力の一つですよね。 話は逸れましたが、そもそもコンテンツ・マーケティングとはGoogleのSEO

Home › プログラミング › [Bootstrap] かっこ良いチェックボックスにカスタマイズしたい時はBootstrap Multiselectプラグインを使うと超便利！ [Bootstrap] かっこ良いチェックボックスにカスタマイズしたい時はBootstrap Multiselectプラグインを使うと超便利！ Bootstrapのチェックボックスってちょっと見た目普通ですよね。 他のBootstrapのフォーム部品と比べると浮いて見えちゃいますよね。 かといって自分でカスタマイズするのはちょっと面倒。 今日はそんなチェックボックスをプルダウン形式でかっこ良くカスタマイズしてくれる「Bootstrap Multiselect」プラグインを紹介します。 ちなみにファイルインプットをかっこ良くしたい場合はこちらの Bootstrap3でかっこ良いファイルインプットフォームをつくる の記

EC2のインスタンスIDからPublicDNSを取得する方法！PHPでね。 どうもpei(@pei_babo)です。 AWSのEC2で特定のインスタンスのPublicDNSを取得したかったので、PHP for SDKを使って簡単に取れるだろうと思ったのですがどうもAWSのドキュメントは分かりづらくて… その他の情報も少なかったので、自分の備忘録も兼ねて投稿したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは？ インスタンスIDを指定してPublicDNSを取得するコード 四の五の言ってもしょうがないので早速コード載せますね。

どうもpei(@pei_babo)です。 ご存知の通りBootstrapは「レスポンシブ・デザイン」を簡単に導入できるCSSフレームワークですね。 画面サイズの違うPC・タブレット・スマートフォンなど、どのデバイスでも見やすく・且つ操作しやすいイケてるWebページを簡単に実装出来てしまうという画期的なものです。 各コンポーネントがしっかりレスポンシブ化されているので、本家Bootstrapサイトの使い方を真似すれば特に気にせず勝手にレスポンシブ化されてて嬉しいのですが、「ちょっとだけ動き変えたいな。」という時もあると思います。 今回はその「ちょっとだけ動き変えたいな。」の部分から、Navbarのメニューがスマホなど画面サイズが小さい時に勝手にボタン化されて見やすくされてしまうのを防ぐ方法を紹介します。 プログラミングやWordPressを習得するのに一番近道な方法とは？ Navbarの動き

キャプチャを撮ったらお絵かきも出来る Awesome Screenshotはキャプチャを撮るだけでなく簡易的なお絵かきというか線を引いたり、文字を入れたり、モザイクかけたり、ひと通りのペイント機能もあります。 ちょっとした指示や説明をしたいならこれだけで十分です。 モザイクをかけてみる お絵かきアイコンのしずくのような形をしている部分を選択して、見せたくない部分をドラッグすると、モザイク風に処理して全く見えなくできます。 完了ボタンを押してダウンロード 最後は完了ボタンを押してダウンロードすれば終わりです。 完了ボタンを押して、、、 「Save image as a file」を押せばローカルにキャプチャ画像がダウンロード出来ます。 またGoogleドライブにも直接送ることも出来ますよ。 まとめ Google Chromeのキャプチャアプリでは今のところこれが一番かと思っていますが、他にも

ECサイトであったり、何かの問い合わせフォームを入力していて、不意な動作で戻ってしまったり、タブを閉じてしまい、 「なんてこった」 ということはありませんか？ その後、もう一度入力する気が失せてしまいそのまま離脱してしまう。 もしあなたがECサイトや何かの商売をWEB上でやっているとしたら、このように意図せずに離脱してしまうユーザーさんをしっかり繋ぎ止めておきたいところですよね。 要は画面遷移する時に「本当に閉じて良いですか？」的なやつです。 もちろん本当に離脱したいと考えているユーザーさんはアラートが表示されたとしても離脱すると思います。 問題なのは意図せず離脱しかけてしまったユーザーさんに対する配慮ですね。 プログラミングやWordPressを習得するのに一番近道な方法とは？ 意図せぬ画面遷移にはアラートを表示させよう JavaScriptの次のページに移動する時(リロードも含む)に発

Bootstrap3はページ全体を中央寄せにする際は基本的に<div>のcontainerクラスを使うかと思いますが、これを使うと画面の横の余白が大きすぎて気になる。 まさに 「余白あり過ぎない？」 状態である。 プログラミングやWordPressを習得するのに一番近道な方法とは？ containerクラスの中身 Bootstrap3のcontainerクラスはCSS3のMediaQueriesで画面サイズに応じてmax-widthを細かく設定しています。 ↓みたいになっています。

ちょっと前まではFireFoxバンザイ！な人でしたが、今はChromeの速さにひれ伏しております。 Chromeうんぬんは関係ないのですがMacを使っていて個人的に良くやってしまうのが「command + tab」でアプリ移動をするつもりが、間違えて「command + q」を押してしまってアプリ強制終了…にしてしまうやつ。 まあ強制終了してしまったのでまた起動し直せば良いわけですが、Chromeを起動し直すとたまに、 「開いてたタブ全部消えてんじゃん…」 人によってどれくらいタブを開いておくかは差があると思いますが、一つひとつのタブに何かしら想いがあるはず。 「このタブは固定でいつも出しておきたいな」「このタブのページとこのタブのページを見て作業しよう」「ブックマークやPocketするほどのものじゃないけど…」などなど。 もちろん履歴などを辿ったりすれば元には戻すことは出来ると思いますが