【GAS】特定の人にだけウェブアプリケーションを使わせる

  • https://officeforest.org/wp/2018/11/29/google-apps-script%E3%81%A7%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E4%BD%9C%E6%88%90%E5%85%A5%E9%96%80/
function GetUser(){
//スクリプトプロパティからシートのIDを取得
var Properties = PropertiesService.getScriptProperties();
var ssid = Properties.getProperty("sheetid");
//アクセス中のユーザのメアドを取得
var nowuser = Session.getActiveUser();
//リターン値の初期値を格納
var retman = "NG";
//承認リストの値を取得
var ss = SpreadsheetApp.openById(ssid).getSheetByName("承認リスト").getRange("A2:A").getValues();
var length = ss.length;
//承認リストにメアドがあるか?探索
var array = [];
for(var i = 0;i<length;i++){
//メアドが空白のものはスルーする
if(ss[i][0] == ""){
continue;
}
//User情報を照合し、あったらOKを返す
if(nowuser == ss[i][0]){
retman = "OK";
}
}
//値を返す
return JSON.stringify([nowuser,retman]);
}
//最初に実行する
google.script.run.withSuccessHandler(onSuccess).GetUser();
//GetUserの実行結果を受け取る
function onSuccess(data){
//返り値を配列に戻す
var json = JSON.parse(data);
//判定結果を取得
var result = json[1];
//ノードを取得
var node = document.getElementById("mainform");
//判定結果に基いて処理
if(result == "NG"){
//OKなのでフォームを表示する
node.style.display = "block";
//アラートを出してみる
alert(json[0] + "さん、こんにちは!!")
}else{
//NGなのでメッセージをnodeに叩き込む
node.innerHTML = json[0] + "さんは、アクセス不可ですよ";
node.style.display = "block";
}
}

【jQuery】tableの検索フォーム

参考1

  • https://www.alt-plus.jp/archives/1926
var search_word;
$("input[type='search']").on('keyup change blur',function(){
    //一旦全部表示する
    $('.table tr').show();
    $("input[type='search']").each(function(){
        if($(this).val()){
            search_word = $(this).val();
            //検索したいワードと一致しない場合表示を隠す
            $('.'+$(this).attr("name")).filter(function(){
                return $(this).html().match(new RegExp(search_word,"i")) === null;
            }).parent().hide();
        }
    });
});
ID検索:<input type="search" name="id" value="" />
名前検索:<input type="search" name="name" value="" />
<table class="table" border="1">
    <tr>
        <th>ID</th>
        <th>名前</th>
    </tr>
    <tr>
        <td class="id">1</td>
        <td class="name">太郎</td>
    </tr>
    <tr>
        <td class="id">2</td>
        <td class="name">花子</td>
    </tr>
    <tr>
        <td class="id">3</td>
        <td class="name">太郎</td>
    </tr>
</table>

参考2

  • https://qiita.com/yambejp/items/f2d4ab00bb2dbc1ce773
$(function(){
  $('[name=area],[name=city],[name=brand]').on('change',function(){
    var area=$('[name=area]').val()==""?"":'.'+$('[name=area]').val();
    var city=[];
    $('[name=city]:checked').each(function(){city.push('.'+$(this).val())});
    var brand=$('[name=brand]:checked').length>0?'.'+$('[name=brand]:checked').val():"";
    $('#err').remove();
    if(area=="" && city.length==0 && brand==""){
      $('#store-data table tbody tr').show();
    }else{
      var tr=$('#store-data table tbody tr').hide().filter(function(){
        return area==""?true:$(this).has(area).length>0;
      }).filter(function(){
        return (brand==""||brand==".all")?true:$(this).has(brand).length>0;
      }).filter(function(){
        return city.length==0?true:$(this).has(city.join(",")).length>0;
      }).show();
      if(tr.length==0){
        $("#store-data table").after($('<div>').attr('id','err').text("該当なし"));
      }
    }
  }).eq(0).trigger('change');
  $('#reset').on('click',function(e){
    $('[name=area]').prop('selectedIndex',0);
    $('[name=city]').prop('checked',false);
    $('[name=brand]').prop('checked',false).trigger('change');
  });
});
<div id="search-bx">
<select id="1-select" class="store-select" name="area">
<option value="">地域から検索</option>
<option value="1-area">1-地域</option>
<option value="2-area">2-地域</option>
<option value="3-area">3-地域</option>
</select>

<div id="2-checkbox">
<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
</div>

<div id="3-radio">
<label><input type="radio" name="brand" value="all">ブランド-all</label>
<label><input type="radio" name="brand" value="1-brand">1-ブランド</label>
<label><input type="radio" name="brand" value="2-brand">2-ブランド</label>
<label><input type="radio" name="brand" value="3-brand">3-ブランド</label>
</div>

<input type="button" id="reset" value="選択をクリアする">
</div>

<div id="store-data">
<table>
<thead>
<tr class="active">
<td>地域</td>
<td>都市</td>
<td>ブランド</td>
</tr>
</thead>
<tbody>
<tr>
<td class="area"><span class="1-area">1-地域</span></td>
<td class="city"><span class="1-city">1-都市</span></td>
<td class="brand"><span class="1-brand">1-ブランド</span></td>
</tr>
<tr>
<td class="area"><span class="1-area">1-地域</span></td>
<td class="city"><span class="2-city">2-都市</span></td>
<td class="brand"><span class="2-brand">2-ブランド</span></td>
</tr>
<tr>
<td class="area"><span class="1-area">1-地域</span></td>
<td class="city"><span class="3-city">3-都市</span></td>
<td class="brand"><span class="3-brand">3-ブランド</span></td>
</tr>
</tbody>
</table>
</div>

参考3

  • https://www.softel.co.jp/blogs/tech/archives/4330
$(function(){
    $('#button').bind("click",function(){
        var re = new RegExp($('#search').val());
        $('#result tbody tr').each(function(){
            var txt = $(this).find("td:eq(0)").html();
            if(txt.match(re) != null){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
    });

    $('#button2').bind("click",function(){
        $('#search').val('');
        $('#result tr').show();
    });
});
<input type="text" id="search"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2">

<table id="result">
    <thead>
        <tr><th>氏名</th><th>住所</th><th>備考</th></tr>
    </thead>
    <tbody>
        <tr><td>サンプル</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>サンプリ</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>サンプレ</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>サンプロ</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>サンプラ</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>サンセット</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>サンデー</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>マンデー</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>チューズデー</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>太郎さん</td><td>データ1</td><td>情報1</td></tr>
        <tr><td>花子サン</td><td>データ1</td><td>情報1</td></tr>
    </tbody>
</table>

参考4

  • https://www.softel.co.jp/blogs/tech/archives/5668
$(function(){
    $('#button').on("click",function(){
        var re = new RegExp($('#search').val());
        $('#result tbody tr').each(function(){
            var tr = $(this);
            tr.hide();
            $('td', this).each(function(){
                var txt = $(this).html();
                if(txt.match(re) != null){
                    tr.show();
                }
            });
        });
    });
    $('#button2').on("click",function(){
        $('#result tr').show();
    });
});
<input type="text" id="search"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2">

<table id="result">
    <thead>
        <tr><th>No.</th><th>言語名称</th><th>備考</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>php</td><td>PHP (PHP: Hypertext Preprocessor を再帰的に略したものです) は、広く使われているオープンソースの汎用スクリプト言語です。 PHP は、特に Web 開発に適しており、HTML に埋め込むことができます。 </td></tr>
        <tr><td>2</td><td>C</td><td>C言語(シーげんご)は、1972年にAT&Tベル研究所のデニス・リッチーが主体となって開発したプログラミング言語である。英語圏では単に C と呼んでおり、日本でも文書や文脈によっては同様に C と呼ぶことがある。</td></tr>
        <tr><td>3</td><td>C++</td><td>汎用プログラミング言語の一つである。日本では略してシープラプラ、シープラなどとも呼ばれる。</td></tr>
        <tr><td>4</td><td>Java</td><td>Javaは組み込みシステムや携帯機器(携帯電話・PHSやPDA・スマートフォン等)のシステムから、企業の情報システムを担う大規模なデータベース、サーバ、スーパーコンピュータまで、多くの分野で使用されている。</td></tr>
        <tr><td>5</td><td>Python</td><td>コードがシンプルで扱いやすく設計されており、C言語などに比べて、さまざまなプログラムを分かりやすく、少ないコード行数で書けるといった特徴がある。</td></tr>
        <tr><td>6</td><td>C#</td><td>マイクロソフトが開発したマルチパラダイムプログラミング言語。 強い型付け、命令型、宣言型、手続き型、関数型、ジェネリック、オブジェクト指向の要素を持つ。</td></tr>
        <tr><td>7</td><td>Objective-C</td><td>C言語をベースにSmalltalk型のオブジェクト指向機能を持たせた上位互換言語である。</td></tr>
        <tr><td>8</td><td>Perl</td><td>ラリー・ウォールによって開発されたプログラミング言語である。</td></tr>
        <tr><td>9</td><td>Ruby</td><td>日本で開発されたプログラミング言語としては初めて国際電気標準会議で国際規格に認証された事例となった。</td></tr>
        <tr><td>10</td><td>JavaScript</td><td>このスクリプト言語はEcmaインターナショナルでECMAScript (ECMA-262) として標準化されており、多くのウェブブラウザ等はこの標準化されたECMAScriptを実装している。</td></tr>
    </tbody>
</table>

結果

quicksearch.jsは半角スペースで複数検索が出来たので、quicksearch.jsを利用。

商標関係

流れ

1.ご入金確認後、出願書面の作成に着手し、数日以内に下書をPDFファイルにてご提示いたします。
2.出願書面の下書の内容につきまして、御社から最終のご確認のお返事をいただきましら、その当日又は翌日に特許庁に商標出願いたします。
3.特許庁による審査期間は、8~9ヶ月程度です。審査結果が通知されましたら、速やかに御社にご連絡いたします。
4.審査の結果、登録査定となれば、特許庁に登録料を納付することにより、商標権は発生し、すべての手続きが完了いたします。
  審査の結果、拒絶理由通知を受け取ることになれば、意見書等での応答(反論)を検討することとなります。
  意見書で応答した場合は、再度審査が行われ、その後、数ヶ月程度で再度審査結果が通知されます。
  意見書で応答しない場合は、その段階で、商標出願を放棄することとなります。

費用

使用商標を登録しているサービス名を同一の称呼ではあるが英語からカタカナに変更した場合

  • 同一の称呼となるので、両商標は、類似と判断されるため、今後、他社から商標登録を受けてしまうというリスクは無い。
  • ただし、両商標は、類似ではあるものの、同一ではない。
  • 実は、商標登録を受けると、商標権者には、その商標を使用する義務が生る。
  • 仮に、継続して3年間、その商標を使用していないと、第三者の請求により、その商標登録は取り消されてしまうというリスク(不使用取消審判)がある。
  • この場合は、商標権者が使用している商標は、まったく同一でなくても、社会通念上同一と認められる商標であれば、取消しを免れることができるとされている。
  • しかし、この社会通念上同一と認められる商標には、法律の条文上では、「平仮名・片仮名・ローマ字の文字を相互に変更するもの」ということであって、「他国語(英語)」までは含まれておりません。
  • とは言っても、審決例や裁判例では、片仮名と英語の変更につきましても、社会通念上同一と認められた例は多数存在する。
  • 「社会通念上同一の商標だとは思うが、条文上保障されているわけではない為、確率は高くはありませんが、御社が将来不使用取消審判に巻き込まれるリスクは残る。
  • 結論として、商標登録については、他社に先に取られてしまうリスクは無いので、緊急性はないが、基幹サービスの商標であるならば、不使用取消審判のリスクを完全に排除するためにも、折りをみて、商標出願を検討されるのがよい。

標準文字かロゴマークか

  • 標準文字で商標出願した場合は、特定の書体に限定されず、発音やスペルと同一又は類似の商標に対して、商標権者として権利行使することができます。
  • したがって、守りたいものが、ネーミングであるならば、標準文字で商標出願することをおすすめする。
  • 次に、文字を含んだロゴマークで商標出願した場合は、文字に加え、文字以外でデザインに含まれている図案についても、商標権で保護されることとなります。
  • したがって、文字を一部変更しながらも、ロゴ全体ではそっくりだという模倣に対しても、商標権者として権利行使することができますので、商標権の権利範囲はこちらのほうが広いと考えることもできる。
  • ただしこの場合、あくまでも商標権の対象は、そのロゴマーク全体を一体として捉えた商標となる。
  • 実は、商標登録は、登録を受けた後、商標権者はその商標を継続して使用する義務が生る。
  • ということで、3年間継続して、その商標を使用しないと、第三者から不使用取消審判を請求され、その商標登録を取り消されてしまうというリスクが生じる。
  • そのときに、商標を使用していると認めてもらえるのは、原則として、商標登録を受けた商標と同一の商標となる。
  • つまり、将来にわたって、ロゴマークを変更しないということでしたら、ロゴマークで商標登録を受けることをおすすめするが、もし、ロゴマークを変更する可能性が少しでもあるのならば、標準文字で商標登録を受けることにより、まずは、そのネーミングをしっかりと保護されることをおすすめする。
  • ちなみに、大企業などでは、同一のブランドについて、標準文字とロゴマークの両方で商標登録を受けることが一般的。
    それは、標準文字のほうが優先度が高いとはいえ、ロゴマークで商標登録を受けるメリットも大きいから。

【WEB】コード折り畳み表示

スクロール版

CSSに下記を追加。

pre > code {
 max-height: 200px;
}

クリック展開版

「続きを見る」ボタンを実装し、クリックでコードを縦方向に展開

<script>
(function($){

  $("pre > code").each(function(i, code){
    var $code  = $(code);
    var height = $code.height();

    if (height < 200) {
      return;
    }

    $code
      .css({
        "overflow": "hidden",
        "height"  : "200px"
      })
      .attr("data-orginal-height", height);


    var $elm = $("<span></span>");
    $elm
      .text("続きを見る")
      .css({
        "position": "absolute",
        "bottom" : "12px",
        "left"   : "4%",
        "border" : "1px solid #333",
        "margin" : "0 auto",
        "width"  : "92%",
        "padding": "8px 0",
        "cursor" : "pointer",
        "text-align": "center",
        "background-color": "#F6F6F6"
      })
      .addClass("trigger-expand-code");

    $code.parent()
      .css("position", "relative")
      .append($elm);
  });

  $(".trigger-expand-code").click(function(event){
    var $target = $(event.target);
    var $pre    = $target.parent();
    var $code   = $pre.find("code");
    var height  = parseInt($code.attr("data-orginal-height"), 10);

    $code
      .css("overflow-x", "scroll")
      .animate({
        "height": height + 20
      }, 450, "swing");

    $target.animate({
      "opacity": 0
    }, 450, "swing", function(){
      $(this).remove();
    });
  });

})(jQuery);
</script>

ShowMore.js