solrに1-gram

N-gramというものは、文字列をN文字ごとに分解して、あってるかなーどうかなーって検索するもの。
2-gramなら「とうきょう」なら「とう」「うき」「きょ」・・のように。
ちゃんと単語の意味を辞書で調べて検索する形態素解析とは別物です。
これが1文字なら1-gram。ユニグラムともいうらしい。

2-gramならデフォルトのサンプルのSolr上に書かれている。
ただ、2-gramなら、例えば商品名や会社名といった、辞書にないものを検索するときに2文字以上だと正しい動作をしない。
そういうわけで1-gramが必要となったので、つくりました。

<fieldtype name="1-gram" class="solr.TextField" omitNorms="false" autoGeneratePhraseQueries="true">
<analyzer>
<tokenizer class="solr.NGramTokenizerFactory" maxGramSize="1" minGramSize="1" />
<!-- normalize width before bigram, as e.g. half-width dakuten combine -->
<filter class="solr.CJKWidthFilterFactory"/>
<filter class="solr.JapaneseReadingFormFilterFactory" useRomaji="false"/>
<!-- for any non-CJK -->
<filter class="solr.LowerCaseFilterFactory"/>
</analyzer>
</fieldtype>

文字スクロールバー

職場でCSSの勉強がてら作ったけど、陽の目をみなかったスクリプト。
単純なスクリプトだけれども、文字数がおおい場合は
枠内をスクロールして、そうでない場合は中央揃えになる。

css

<style>
.message{
 position: relative;
 width: 400px;
 height: 40px;
 background: rgba(0,0,0,0.5);
 overflow: hidden;
 padding: 0 10px;
}
.message p{
 position: absolute;
 line-height: 40px;
 display: table-cell;
 min-width: 380px;
 box-sizing: border-box;
 padding: 0;
 height: 40px;
 text-align: center;
 vertical-align: middle;
 color: white;
 margin: 0;
 white-space: nowrap;
}
</style>

js

<script>
$(function(){
 function imageMessageAnimate(){
var $im = $('.message');
var imw = $im.width();
var $imp = $('.message p');
var impw = $imp.width();
var startdelay = 3000;
var enddelay = 3000;
var refleshtime = 1000;
var animatetime = (impw-imw) * 10;
var sumtime = startdelay + enddelay + refleshtime + animatetime;
if ((impw-imw) > 0){
 $imp.delay(startdelay)
 .animate({
marginLeft: -(impw-imw)+"px",
 }, animatetime , 'linear')
 .delay(enddelay)
 .animate({
opacity: 0.0
 }, refleshtime/2.0, 'swing', function(){
$(this).css('marginLeft', 0);
 })
 .animate({
opacity: 1.0
 }, refleshtime/2.0);
 setTimeout(imageMessageAnimate, sumtime);
}
 }
 imageMessageAnimate();
});
</script>

html

<div class='message'>
 <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
</div>

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

gulpを使う

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ
ここを参考に。 gruntの使用経験はあったけれど、 あちらは設定ファイルが巨大化したりして、いつの間にか記述間違えていたりした。 こっちはすんなりと入ってびっくり。

gulpとBrowsersync

browserによる再読み込みはローカル環境では上記通りだが、 もし仮想環境上にある場合は、proxyモードと呼ばれるもので操作することができるらしい Browsersync - Time-saving synchronised browser testing

gulp.task("server", function() {
  browser({
    server: {
      baseDir: "./"
    }
  });
});

こう書いているが、これではindex.htmlしか確認できないじゃないか！ hoge.htmlで作業がしたいんだぞ！と困ったが ブラウザ上のURLが

http://localhost:3000/

だったとすれば

http://localhost:3000/hoge.html

とすれば、普通に確認できたし、更新もされた。 browsersyncでルートディレクトリから下はすべて監視対象なんだな。なんて便利なんだ

gulpとタスク

「gulp」コマンドの後ろにタスク名を書けば、そのタスクを実行できる。 公開用にgulpのタスクを分けてみるとかもできそう。

gulpと引数

gulpに引数を渡す場合は、linuxのオプションみたいに

gulp --hoge=aaaa

とすれば、hogeというキーにaaaaという値が入力される。こうしないとタスク扱いされてしまう

nginxが自動起動しない

起動時のログを確認してみる

less /var/log/boot.log

fsck from util-linux 2.20.1
/dev/sda1: clean, 204174/3866624 files, 1423895/15466240 blocks
Skipping profile in /etc/apparmor.d/disable: usr.bin.firefox
Skipping profile in /etc/apparmor.d/disable: usr.sbin.rsyslogd
* Starting AppArmor profiles ESC[80G ^MESC[74G[ OK ]
Starting memcached: memcached.
Starting nginx: nginx: [emerg] host not found in upstream "hogehoge.co.jp" in /etc/nginx/sites-enabled/default:18
nginx: configuration file /etc/nginx/nginx.conf test failed

※"hogehoge.co.jp"はproxy_passに設定しているドメイン


しかし、手動でコマンド実行では普通に起動する。
nginxは構文チェックの他に名前解決のチェックも行っているようである。
なるほど。ネットワークのサービスが完全に立ち上がる前にnginxが起動しているのが原因？

tester@tester-VirtualBox:~$ ls /etc/rc2.d/
README S20speech-dispatcher S50rsync S91apache2
S20kerneloops S30vboxadd S50saned S99acpi-support
S20memcached S30vboxadd-x11 S70dns-clean S99grub-common
S20nginx S35vboxadd-service S70pppd-dns S99ondemand
S20php5-fpm S50pulseaudio S75sudo S99rc.local

dnsってつくサービスよりも数字が早いぞ。 なので一度、nginxを消し去ってから

sudo update-rc.d -f nginx remove

再度以下コマンドで追加

sudo update-rc.d nginx defaults 91

しかしこれでは直らなかった。 結局hostsファイルにエラーになっていたドメインとIPを記述すると、正常に起動するようになった

Android, iPhoneのタップ感向上

スワイプとクリックの見分けのために、チェックボックスにチェック入れようとしても、標準動作だったら0.3秒の待ち時間が入っているとか。


これをtouchstartで

$('#obj').prop('checked', true);

とか実行してやればサクサク動くが、
画面スワイプ中にチェックボックスに触れてしまっても同様にチェックされてしまう。

そこは前回の記事で作ったtouch*とclickを監視する関数で実装すればいい。
_callbackに渡す関数内でも 「event.preventDefault」しないと結局クリック判定待ち0.3秒入るので注意

touchstart touchmove touchend そしてclick

PCのchromeのエミューレーターと、実際のモダンな端末で挙動を確認（HTC J OneやiPhone6 ）

1. touchstart
2. touchmove
3. touchend
4. click

の順に発火する模様。

touchendの時にevent.preventDefaultをすれば、clickイベントが起こらない。
間違って前半2つにpreventDefaultすると、スワイプもできなくなるので注意。 ただ旧式のAndroid2.x(GalaxyS)では、clickイベントが起こってしまう。

よって以下のように、touchend発生後1秒間はclickイベントを無視する（無茶苦茶）

_callbackに好きな関数を渡せば、タップ発火で実行ができる。

var $obj = $('#sample');
var pos;
$obj.on('touchstart touchmove touchend click', function(event){
 if ('touchstart' == event.type){
  pos = touch_position(event); //X,Yを得る
  $_obj.data('data-touchposition', pos);
  $_obj.data('data-touchstarted', '');
  return;
 }

 if ('touchmove' == event.type){
  pos = touch_position(event); //X,Yを得る
  var touchpos = $_obj.data('data-touchposition');
  // ある程度以上指が動いていたら、スワイプと判定
  if ( Math.abs( pos.x - touchpos.x ) +
    Math.abs( pos.y - touchpos.y ) > 10 ){
   $_obj.removeData('data-touchstarted');
  }
  return;
 }
 if ('touchend' == event.type){
  if ('undefined' != typeof $_obj.data('data-touchstarted')){
   event.preventDefault(); // click除外のために
   $_obj.removeData('data-touchstarted');
   $_obj.removeData('data-touchposition');

   // タップ実行したフラグ（1秒後にフラグは折れる）
   $_obj.data('data-touchdone', '');
   setTimeout(function(){
    $_obj.removeData('data-touchdone');
   }, 1000);

   return _callback.call(this, event);
  }

 }
 
 // win8向けに対応しておく
 if ('click' == event.type){
  // タップは実行していないか？
  if ('undefined' == typeof $_obj.data('data-touchdone')){
   $_obj.removeData('data-touchstarted');
   $_obj.removeData('data-touchposition');
   return _callback.call(this, event);
  }
 }
});

iPhone6SのiOS9のfixedがおかしい

画面下部に貼り付けているposition:fixの要素が、iOS9のブラウザ側の戻るボタンや進むボタンが載っているバーと連動して、消えてしまう。iOS8では発生せず。


だが以下を読むと過去iOS8でも発生していた模様
http://2eb.jp/ios8-overflow-scrolling/

それならiOS9も解決することに期待

Popoverの発火ボタンから開いているpopoverを参照する

Bootstrap v3 ネタ。

たとえば、buttonタグにひも付けているPopover要素を
参照したいのであれば、以下のようにdataメソッドからアクセスすると、
実際のpopoverを形作っているdiv要素を参照することができる。

$(‘button’).data('bs.popover').$tip

便利。

VM上のファイルをnginxで取得すると欠損する

nginxをVM上で動かしていると
ただホストPCをマウントしたドライブ上の静的ファイルを取得するだけなのに、
ファイル末尾が欠損したりゴミデータが混じったりする。
そのときはnginx.confなどに

sendfile off;

を指定する

I add a line of text to my CSS file, garbage comes through the browser

nginxのUNIXソケットが生成されない

proxy_pass http://unix:/var/run/nginx.sock;

こうすれば自動的に生成されるはずだが作成されない
 ・・というのは勘違いで

listen unix:/var/run/nginx.sock;

このように何処かでlistenしてやって初めて生成される