Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

27ページ目

typeがnumberのテキストフィールドに数字以外の文字を入力させないようにする

テキストフィールドに数字以外の文字を一切受け付けない用にするためのコードを考えてみました。

$("body").on("keydown","input[type=number]",function(e){
    if((e.which >= 48 && e.which <= 57) || e.which == 46 || e.which == 8 || e.which == 37 || e.which == 39){
        return true;
    }else{
        e.preventDefault();
    }
});

このとき、十時キーの右と左の入力と、deleteキー、バックスペースの入力は受け付けないと不便なので、if文の中で、それを受け付けるようにしました。
左のキーが37で右のキーが39、deleteキーが46でbackspaceが8です。
でも環境によって違うかもしれません。
keycode表は下のサイトで確認してみてください。


ちなみにe.preventDefault()でブラウザの既存の機能が発動するのを妨げることができます。
よって、キー入力ができなくなるということです。


a-blog cms のカスタムフィールドを子ブログには見せないようにするテクニック

field.htmlにカスタムフィールドを直書きすることの問題点

ブログの管理画面にカスタムフィールドを追加することがa-blog cmsではよくあると思う。その時に、そのままそのテーマのadmin->blogのなかにfield.htmlをつくって、そこでカスタムフィールドのHTMLを書いてしまうと、小テーマを設定しているブログフィールドにも親のフィールドが見えてしまうので少し工夫が必要だ。



このように、ブログごとにカスタムフィールドのみえる情報を切り分けたい。

アプローチ

例えば、ブログIDが4の場合、admin->blogのなかに、bid4というディレクトリをつくり、admin->blogのなかにある、field.htmlに以下のように記述すれば、子ブログは同じカスタムフィールドでも参照できない

<!--field.htmlの中身-->
<!-- #include file="/admin/blog/bid%{BID}/field.html -->

なぜなら、自分の現在いる位置によって,ブログのIDが格納された%{BID}
の値が変わってくるからだ。
これで具体的な処理はadmin->blog->bid4の中のfield.htmlにかけばよい


jsでもし〜が定義されてなければ...を代入という記述を簡略化


今回は、便利にブラウザ上でjsが編集できる僕が一年前に作ったプログラミング学習環境、Atlas Editorをつかって、コードを書いてみる。

いままで僕はjsでもし値がなければ、という処理をif文で書いていたが、| |演算子で簡略化出来ることを知った。

var number = null;
var output = 0;
var ret = number || output;

上のようなコードを書いたとき、retには0が代入される。
実行結果はこちら



a-blog cms 管理画面でのタブの増やし方を考えてみた

ブログの管理画面のhtmlはthemes->system->admin->blog->edit.htmlにあります。
これを直接いじってしまってはバージョンアップの時によろしくないので、
自分のテーマフォルダの中にadmin->blog->edit.htmlのようにディレクトリの階層をつくりましょう。そこに、systemのなかのedit.htmlのコードをまずはぺたっと貼付けます。



次にacms-tabsと検索して、50行目あたりにある、ul要素を見つけてください。
ここにli要素を追加してください。
このときに、なかのa要素のhref属性のあたいを決めてください。ここの値は他のタブと被らないようにしましょう。


つぎに、acms-tabs-panelと検索してください。だいたい最後のほうにあります。
ここに上のようにacms-tabs-panelというクラスのついた要素を追加して、中に読み込ませたいファイルへのinclude文をかいていきます。
この時に追加した要素のidは、先ほどa要素のhref属性につけた値と一致させてください。
これで、タブの切り替えが行えます。
管理画面で、用途に応じてタブが切り替えられたら便利ですよね。
皆さんもやってみてはどうでしょうか??


chromeのシークレットモード


chromeのシークレッドモードをご存知でしょうか?
シークレットモードでサイトを閲覧してもCookieが保存されないので、未ログインユーザとして
サイトを閲覧することが出来ます。
通常モードでは、Cookieが保存されるので、ログインしている状態と未ログインの状態が同時に確認できますね。
こんなかんじです。


こんなかんじで、同じブラウザでログイン時と未ログイン時の両方を確認できます
cmd+↑+Nで簡単にシークレットモードでウィンドウを開けるので皆さんもやってみては??


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド