• ejsを使ってみる

    HTMLテンプレートエンジンである、pugは試したことがあったのですが、wordpressとそんなに相性がよくなく、魅力を感じていませんでした。
    しかし、ejsはすごくPHPっぽい感じですのでちょっと調べてみようと思いました。

    pugがwordpressと相性が悪いわけ

    pugは性質上、閉じタグが必ずできてしまします。そうすると、閉じタグなしのパーツ切り分けをしたい場合にどうしたらいいかよくわかりません。
    工夫すればうまくできるのかもしれませんが、工夫する意味を考えてしましますね・・・。

    ejsはHTMLの書き方である

    HTMLの書き方で、変数やincludeが使えるというイメージです。
    なのですごくPHPっぽい書き方で構成できます。

    難点

    視認性がめちゃくちゃ悪い。
    普通のタグっぽくてあんまり好きじゃないんだよな。
    この辺はエディタで解決できるかもしれません。

    HTMLやPHPを作る

    基本的には、サーバー上で動かすのを想定しているようなので
    静的なファイルの生成(HTMLやPHP)を作るにはgulpを使う必要がある。

    ちなみにvs codeにこれを入れた

    https://marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-support

    導入方法

    node/npmはインストール済みとして進める。

    sudo npm install --save-dev gulp-ejs gulp gulp-rename
    mkdir src src/ejs src/scss dest
    touch src/ejs/_header.ejs src/ejs/_footer.ejs src/ejs/index.ejs gulpfile.js

    wordpress云々といってますが、とりあえずLPを構築してみたいと思います。

    gulpfile.js

    'use strict';
    const gulp = require('gulp');
    const fs = require('fs');
    const rename = require('gulp-rename');
    const ejs = require('gulp-ejs');
    
    gulp.task("ejs", function () {
        return gulp.src(
            ["src/ejs/*.ejs", '!src/ejs/_*.ejs']
        )
            .pipe(ejs(rename({ extname: '.html' })))
            .pipe(gulp.dest("dest"))
    });

    尻切れとんぼですが、src/ejs/ にindex.ejsファイルを入れて
    gulp ejs でコンパイルできます。

  • node-sassでsassコンパイル

    一番シンプルにnpmでコンパイルしてみよう。
    ディレクトリを作って次のコードを実行。
    なお、nodeとnpmはインストール済みとして進める。

    npm init
    sudo npm install node-sass -g

    npm init では適当にすすめると package.json ができます。
    -g (グローバルインストール)しないと動かなかったです。

    適当なscssファイルを用意します。

    style.scss

    $my-color: #ff0000;
    
    body {
      color: $my-color;
    }

    ではコンパイルします。
    scssファイルと、出力後のcssファイル名を指定すればokです。

    node-sass style.scss style.css

    ちゃんと style.cssが生成されればOKです。

    ちゃんと使う

    シンプルなものは上記ですが、いろいろオプションをつけて使うには、以下の記事を参考にするといいと思います。

    https://its-office.jp/blog/sass/2018/05/12/node-sass.html

    mkdir common common/css _sass
    touch _sass/styles.scss

    を実行すれば良いです。
    フォルダ構造変えたい場合は、package.jsonのファイルパスやファイル名を変えると良いです。

  • Illustratorの代替ソフトウェアを調べてみた

    個人的にはAdobeのCCを契約していて問題ないです。

    ( 2019年 8月現在、就職してフリーの仕事がほぼなくなったのでフォトプランにしました。イラレ作業はアイコン作るくらいだったので、後述の通りXDに完全に移行しています。)

    しかしながら「製品の作図をする」ためにCC契約したいと言ってる知り合いがいまして、
    本業で毎日のように作図するではないようなので、それは契約には釣り合わない用途ではないかと感じました。

    その程度の用途であればフリーのベクターを扱えるソフトで十分ではないかと思ったのでどんなものがあるのか調べてみました。

    ツールを使うには学習コストがかかるので、それを考えると契約してもいいのかもしれないですけどね。

    ベクター、ベジェを扱うソフトということで集めています。

    XDはいいぞ!事足りることもあるぞ!

    2019/8/11 追記

    XDで足りる用途もあると思うので、以下の記事もぜひみてみてください。
    リンク先記事の範囲であればXDは無料で利用できます。
    (共有数に制限があるのみなので実はほぼ無料のツールなんです!)
    ぜひ読んでみてください。

    https://logzitsu.tlog.work/illustratorno-dai-tisofutohaxdde-juemari/

    Affinity Designer

    2019/6/17 追記

    https://blog.kamijin-fanta.info/2019/06/affinity-designer/
    有料ソフトだけど結構良さそうです

    Gravit Designer

    https://www.designer.io/
    すごくリッチそうです。
    機能的にはかなり充実してそう。でもそのぶん、覚えるコストがあるかも。

    Vectr

    https://vectr.com/
    オンラインでも使えるみたいです。
    作ったものを誰かに見せるとかもスムーズにできそうです。
    割とシンプルそうなので、多機能が必要ない場合はこれがいいかもしれませんね。
    cmなど単位の切り替えもできるみたいです。

    inkscape

    http://inkscape.softonic.jp/
    Illustratorの代わりといえば昔からこれだった。
    でもよく落ちる印象があり、なんとなく成果物もクオリティの低いものになりがちだった記憶があるのであまりオススメしません。
    アイコンの作成に使っても、レイアウトには使わない方がいいかも。

    その他

    もっといえば、パワーポイントとか、keynoteとか、googleスライドでもなんとかなると思うんですよね。工夫次第。

    以上でーす

  • フォームの装飾に関するメモ

    しばらくの間 bootstrap使ってたので、フォームについて適当でもよかったんですがもうflexが一般的になったためあまりメリットがなくなったように感じています。

    フォーム装飾には少しコツがいるのでメモっておきたいと思います。

    属性セレクタを使う

    input[type="text"]{
    
    }

    上記のようにすると、submitなどを外して指定ができます。

    デフォルトのスタイルを消す

    色々指定したつもりが効かないとか、iphoneで表示が変わっちゃうとかの時に指定してください。

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    フォーカス時のスタイルを指定する

    input[type="text"]:focus,
    textarea:focus {
      box-shadow: none;
      border: 1px solid red;
      outline: 0;
    }

    ここをしっかり指定しておくといい感じに見えるようになります。
    「outline」がデフォルトの影です。

    フォントサイズは16px以上にする

    スマホでinput、textareaのフォントを16px以下にすると、フォーカス時にズームされます。
    使い勝手的にも16pxは使いやすいサイズだと思いますので、16px以上にしておきましょう。PCはこの縛りは特にありません。

    textarea

    resize: none;

    サイズ変更をOFFにできます。
    長い文書を書く可能性がある場合はoffにしない方がいいです。

    選択時の色

    コピペのために選択した時の色を変更できます。
    フォーム関係ないですけど。

    ::selection {
        background: #ff0000;
        color: #fff;
    }
  • 最近やってるマニアックな「なか卯」の注文

    ちょっとほんとうにどうでもいいことを書いてみます。

    定食屋は太る

    お得なランチなど見てみるとすごく糖質が多い。
    親子丼 + 小うどん

    これを頼むだけでアウト!

    大盛り無料とかやってると頼みたくなりますよね。
    でもそれを続けていると、胃が大きくなって太るに決まってます。

    おすすめは ミニ丼 + サラダ + 豚汁のセット

    ご飯少なくて大丈夫なの?
    って思う人もいるかもしれませんが、これで意外と満足感があります。
    量が足りないと感じる人は、胃が大きくなってます。
    プチ断食でもしてください。

    ぶっちゃけこれでも太ると思う

    これでも続けてたら体質によっては太ると思うんですよね。
    つまり毎食食べてる人はやばいです。

  • よく使うWPテンプレートのコメントをメモしておく

    WPでテンプレート内にコメントすることはさほど多くはありません。
    しかし、見返すことがおおいので記事としてメモっておこうと思います。

    style.css のコメント

    オリジナルのWPテーマを作成する場合に最初にやるのがstyle.cssの作成とそのコメントです。
    wordpressがこのコメントを読み取ってくれます。
    けっこう大事な部分です

    /*
    Theme Name: テーマのタイトル
    Author: 作成者名
    Author URI: 作成者のURL(あれば)
    Description: このテーマについての説明文
    Version: バージョンを記入(1.0とか)
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */

    上記のような感じです。
    必須は「Theme Name」のみです。
    これは、テーマを入れているフォルダと同じにしておくと良いと思います。

    /*
    Theme Name: original-thema
    */

    これだけかいとけばとりあえず動きます。

    テンプレートファイルのコメント

    固定ページや、投稿ページでテンプレートを選べるのですが、ここで認識させるには「page.php」の役割をもったファイルにコメントを書き込む必要があります。(ちなみに、アーカイブが動くURLで固定ページを作って、テンプレートファイルとして認識させればちゃんとアーカイブとして動作します。)

    <?php
    /*
    Template Name: お問い合わせテンプレート
    */
    ?>

    これを入れておけばえらべるようになります。

    以上、wpでよく使うコメント部分のメモでした。

  • 日常の自分ハック

    当てはまらない人も多いと思うんですが、
    自分自身の特徴を把握してその対策を打つのは大事だなーと思います。

    ・待ち合わせに行くのがすごく億劫で、家を出るのが時間ギリギリになる。(結果遅れる)
     →逆に2時間前とかに出ると心の負担が少ない。周りの人にも無駄に早くくる人と認識される。
      ちなみにたまに気まぐれや油断でギリギリに出ると高確率で遅れる。

    ・メールはよく考えたいので保留する
     → よくよく考えると、熟考するタイミングは来ない。とにかく即レスするようにする。
      ほっとくと放置という結果になり、相手への心象は最悪になる。

    ・電話に出るのが苦手
     → これは自分の快適な範囲が狭いのが原因。快適な範囲を増やすにはこういった抵抗を減らしていくのが一番良い。なのであえて積極的に出るようにするべき。コンフォートゾーンを増やせ。

    ・コミュ障である
     → 自分から人に話しかけるよにする。それで相手が不快になることは少ない。勉強会でも得。

    他にも思いついたら、ここに載せていきます。

  • 【2月】今月はXDとGitについて勉強する

    1月の振り返り

    先月はGoogle Apps Scriptについて勉強しました。

    https://logzitsu.tlog.work/google-apps-script-%E5%8B%89%E5%BC%B7-todo%E3%83%AA%E3%82%B9%E3%83%88/

    やることリストで残っているのは

    • チャットワークにメッセージ
    • Slackにメッセージ
    • カレンダーの登録を元に何か実行

    です。
    上の二つは、後回しでそのうちやります。カレンダーの日付で実行は、いまLINEメッセージのプログラムを実運用中なので、改善する中で実装していこうかなと思っています。
    改善したらブログ書きます。

    今月のお勉強

    XD

    XDについて勉強しておきたいと思います。
    Photoshopのほうが画像補正など一貫してできて、ええやん。と思わなくはないのだが、
    最近XDで作業をしてくる人が多い。

    職場に入ってPhotoshop使ってくださいって言われたらどうするんだろうね。しらね。

    XDで作業する場合は、写真埋め込み部分の画像加工はPhotoshopと連携して行うという考え方だ。
    もしアイコンなどがあればイラストレータとも連携する。

    • レイアウト → XD
    • 画像・イラスト・アイコン → Photoshop

    といった具合である。

    Photoshopと比べたXDの利点はいくつかある。

    • 実際にリンクを貼って動かせる
    • アニメーションも付けれる
    • つまり ワイヤー → デザイン → プロトタイプ まで一貫していける
    • 実際に動くページをweb共有できる
    • 動作が軽い
    • 操作が簡単

    こんな感じですね。

    実際使え、と言われたら多分困るのですこし勉強して慣れておきたいと思います。

    参考サイト

    ワイヤーフレーム作成、プロトタイプ、共有までを一元化! Webディレクションの現場に革命を起こした「Adobe XD」の魅力とは
    https://liginc.co.jp/398988
    概要とこんな風につかってますが載ってる。

    https://webnaut.jp/design/20170201-2011/

    UI/UXのデザイン、プロトタイプ、共有
    https://helpx.adobe.com/jp/xd/tutorials.html

    Adobeのチュートリアルがあるみたいなので、ここでビデオをみて学んでおこうかと思います。
    ビデオの感想などブログでかけたらいいなと思っています。

    Git

    クソ簡単にGitの説明をする
    https://anond.hatelabo.jp/20190203175803

    こういうちょっと誤解を招くかもしれないけど、初心者はこれだけわかればいいよ、
    は大事だと思います。
    頭いい人は、こういうの嫌いだと思うけど。

    これ読んで実際使おうと思っても困ると思うので、少し勉強しておきたいと思います。
    ほとんど一人で使ってるので、masterしか扱ったことがない。

    ツール使うと逆に難しいのはわかる。
    VS codeからGitを使うのが一番わかりやすいんじゃないかなと思います。
    githubを買収したmicrosoftのエディタなので、今後半端ない連携になると期待します。

    githubはプライベートが無料になって、3人まで共有できるので普通に使う分には全然問題のないサイトになってます。
    なのでgithubをバリバリ活用できるようになっていきたいです。

    参考

    わかばちゃんと学ぶ Git使い方入門
    https://www.amazon.co.jp/dp/4863542178/
    買おうかな

    learngitbranching
    https://learngitbranching.js.org/
    実際に触って学べるサイト

    fetchの解説
    https://eng-entrance.com/git-fetch
    https://qiita.com/usamik26/items/28be7d2c221a7a53c2c3

    いろいろ学んで、このブログにわっかりやすい解説を・・・・
    できるかなぁ・・・

    やることリスト

    • 漫画でわかる、を読む【Git】
    • ブランチやマージについて理解する【Git】
    • ブログにわっかりやすい記事を書く【Git】
    • Adobeの公式チュートリアルに目を通す【XD】
    • なんかサイトとかのワイヤーを作成してみる【XD】
  • GasでLineにグループメッセージを送るように頑張る

    GASでLINEのグループIDを確認する
    https://cyuraharuto.com/gas-line-gid-get/

    上記記事で、ラインのグループIDが確認できるみたいです。
    既存のものにコードを足したらうごかなかったので、新たにシートを作成し直しました。

    グループIDが取れたら

    function sendLINE(){
    var CHANNEL_ACCESS_TOKEN = "xxxxxx";//トークン
      var url = 'https://api.line.me/v2/bot/message/push';
      var toID = 'xxx';//上で取得したグループID
      
      var body = 'グループにメッセージ';
     
      UrlFetchApp.fetch(url, {
        'headers': {
          'Content-Type': 'application/json; charset=UTF-8',
          'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
        },
        'method': 'POST',
        'payload': JSON.stringify({
          'to': toID,
          'messages':[{
            'type': 'text',
            'text': body ,
          }]
         })
       })
    }

    これで送信できるようです。
    toのIDの部分をグループIDにすればよかったんですね。

  • Gasでgoogleカレンダーを操作してみよう

    前回の記事の続きです。
    イベントの追加は前回やりました。今回は取得・表示・利用の部分です。

    https://logzitsu.tlog.work/google%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8B%E3%82%89%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%81%AB%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E7%99%BB%E9%8C%B2/

    まず、当日のスケジュールを取得してみる

    function get_Week_Schedule(){
     // カレンダー情報を取得
      var calender = CalendarApp.getCalendarById('xxxxxxxxxx @ gmail.com');
      // 当日の予定を取得
      var schedules = calender.getEventsForDay(new Date());
      
      //当日のイベントを「全て」出力
      for (var i in schedules) {
        var title = schedules[i].getTitle();
        Logger.log(title);
      }
    }

    上記のようにループで吐き出す必要があるみたいです。
    実際使う場合は「予定がない」ときの処理も必要そうですね。

    続いて、あまり予定が多くない私ですので、先1週間の予定もいじりたいのです。

    先1週間の予定を取得してみる。

    function get_Week_Schedule(){
     // カレンダー情報を取得
      var calender = CalendarApp.getCalendarById('xx xxx xx@gmail.com');
      var date = new Date();
      
      for (var j = 0; j < 7 ; j++ ){
        //予定を取得
        date.setDate(date.getDate() + 1);
        var schedules = calender.getEventsForDay(date);
        Logger.log(date);
        
        //取得した日のイベントを全て出力
        for (var i in schedules) {
          var title = schedules[i].getTitle();
          Logger.log(title);
        }
      }
    }

    これでうまくできてんのかなー?
    明日とかの処理をしたいときは date.setDate(date.getDate() + 1);
    みたいな形でないとうまくいかないようです。

    実際に作ったもの

    作ったのは複数人で管理できるscheduleカレンダーです。
    グループのLINEに追加して管理するのを想定しています。
    *以下では、グループでは動きません

    ◆1週間のスケジュールを毎朝教えてくれる
    ◆googleフォームからスケジュールが追加できる
    ◆フォームのリンクが下についている

    //送受信トークン
    var CHANNEL_ACCESS_TOKEN = '';
    //ID
    var USER_ID = '';
    
    
    function calender() {
      
      //メッセージ
      message = "予定が追加されたワン!"
      
      //シートを取得
      var Sheet = SpreadsheetApp.getActiveSheet();
      
      //データのある一番下の行を取得
      var lastRow = Sheet.getLastRow();
      
      //各データを取ってくる
      var title  = Sheet.getRange("B" + lastRow).getValue();
      var time  = Sheet.getRange("C" + lastRow).getValue();
    
      //登録するカレンダーIDを呼び出してeventへ格納
      var event = CalendarApp.getCalendarById('じーめーる@gmail.com');
      
      //createAllDayEventでカレンダーへイベントを登録
      event.createAllDayEvent(title,time);
      
      var Month = time.getMonth()+1;
      var day = time.getDate();
      
      var postData = {
          "to": USER_ID,
          "messages": [{
            "type": "text",
            "text": message + "\n" + time.getFullYear() + "年" + Month + "月" + day  + "日" + "\n" + title ,
          }]
        };
        
        var url = "https://api.line.me/v2/bot/message/push";
        var headers = {
          "Content-Type": "application/json",
          'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
        };
        
        var options = {
          "method": "post",
          "headers": headers,
          "payload": JSON.stringify(postData)
        };
        var response = UrlFetchApp.fetch(url, options);
    }
    
    
    function get_Week_Schedule(){
      
     // カレンダー情報を取得
      var calender = CalendarApp.getCalendarById('じーめーる@gmail.com');
      var date = new Date();
      var schedule = [];
      
      schedule.push("今日の予定");
      var schedules = calender.getEventsForDay(date);
      for (var i in schedules) {
          var title = schedules[i].getTitle();
          schedule.push("◆"+title);
        };
      
      for (var j = 0; j < 7 ; j++ ){
        //予定を取得
        date.setDate(date.getDate() + 1);
        var schedules = calender.getEventsForDay(date);
        //Logger.log(date);
        var month = date.getMonth() + 1;
        var dateT = ["日","月","火","水","木","金","土"];
        //if(schedules[j]){
        schedule.push("\n" + month + "月"+ date.getDate() +"日("+ dateT[date.getDay()] +")の予定");
          //};
        
        //取得した日のイベントを全て出力
        for (var i in schedules) {
          var title =  schedules[i].getTitle();
          schedule.push("✨"+title);
          Logger.log("✨"+title);
        }
      }
      
      schedule.push("\n\n新しい予定はここから追加するワン!\nhttps://docs.google.com/forms/d/e/xxxxxxxxxxxxxx/viewform?usp=sf_link");
      var message = "1週間の予定をお伝えするワン!!!\n";
      var message2 = schedule.join("\n");
     
        var postData = {
          "to": USER_ID,
          "messages": [{
            "type": "text",
            "text": message + "\n" + message2,
          }]
        };
        
        var url = "https://api.line.me/v2/bot/message/push";
        var headers = {
          "Content-Type": "application/json",
          'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
        };
        
        var options = {
          "method": "post",
          "headers": headers,
          "payload": JSON.stringify(postData)
        };
        var response = UrlFetchApp.fetch(url, options);
    }

    わりと単純ですが、結構便利なんじゃないかなと思います。
    雑な記述があるけど、動いちゃうんだからいいよね!

    ユーザーIDが自分のものだと、グループでは動きません!

    以下の記事を参考にグループIDを取得してください

    GASでLINEのグループIDを確認する
    https://cyuraharuto.com/gas-line-gid-get/

    USER_IDを取得したものに差し替えればいいです。

  • googleフォームからカレンダーにスケジュールを登録してみる【Gas】

    事前準備

    最初にスプレッドシートを作成しましょう。

    メニューから、フォーム、およびスクリプトエディタを起動します。

    フォームの作成

    フォームはこんな感じのものを作成しました。

    エディタのトリガーにフォーム送信時を設定しましょう。
    functionは動かしたいものにしてください。上記ではスクリプト名をsendmailになっていますが、これから作成するプログラムの名前にしておくと良いです。

    プログラムを書いていく

    それでは、実際のプログラムを書いていきます。

    フォームを扱うにあたっては、下に新たな行が追加されていく仕組みなので、これをうまく利用する必要があります。

    //現在のシートを取得
    var Sheet = SpreadsheetApp.getActiveSheet();
      
    //データのある一番下の行を取得
    var lastRow = Sheet.getLastRow();

    このような便利な取得方法があるので、うまく活用していきましょう。

    カレンダーの追加

    細かく情報を入れるとめんどくさい部分もあるので、終日の予定として追加するようにしてみます。

    function calender() {
    
      //登録するカレンダーIDを呼び出してeventへ格納
      var event = CalendarApp.getCalendarById('xxxxxxxxxxxx@ gmail.com');
      
      //イベントのタイトル
      var title = '初めてのおつかい';
      
      //イベント日をdayへ格納
      var day = new Date('2019/2/31');
      
      //createAllDayEventでカレンダーへイベントを登録
      event.createAllDayEvent(title,day);
      
    }

    これでいけます。IDはgmailアドレスを入れてください。
    他の人のカレンダーいじれるの???とおもってためしてみたら、googleカレンダー画面で「カレンダーを追加」からメールに共有リクエストを送って、共有許可側で管理権限まで与えれば他のIDを指定してスケジュールを追加できました。

    組み合わせる

    フォームで送った内容をうまく利用するとこんな感じになります。

    function calender() {
      
      //シートを取得
      var Sheet = SpreadsheetApp.getActiveSheet();
      
      //データのある一番下の行を取得
      var lastRow = Sheet.getLastRow();
      
      //各データを取ってくる
      var title  = Sheet.getRange("B" + lastRow).getValue();
      var time  = Sheet.getRange("C" + lastRow).getValue();
    
      //登録するカレンダーIDを呼び出してeventへ格納
      var event = CalendarApp.getCalendarById('xxxxxxx @ gmail.com');
      
      //createAllDayEventでカレンダーへイベントを登録
      event.createAllDayEvent(title,time);
      
    }

    これでok。トリガーをしっかりフォーム送信時に「calender」が起動するようにすればOKです。
    次回は、登録されたことをライン通知したり、今日と、1週間の予定を毎朝お知らせしてくれるプログラムを作成してみたいと思います。

    https://logzitsu.tlog.work/gas%E3%81%A7google%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/
  • シートを開いたらGasを実行する

    シートを操作するタイプのスクリプトはこれにしておくと便利かもしれませんね。セルの色を変えるとかね。

    こうしてやると、シートを立ち上げた時に動きます。
    他には、編集時・変更時も選べます。
    スプリプトに合うものを選んでみてください。

  • facebookにアップした動画をダウンロードする方法

    ちょっと必要だったので、調べました。
    プライベートな自分の動画をダウンロードするのに活用してください。

     https://fbdown.net/download.php

    ここに動画のシェアURLを入れるとダウンロードできます。
    公式サービスではないので、なくなる可能性があります。

  • youtubeを文字書き起こしに利用する方法

    googleドキュメントの音声入力機能便利ですね。
    リアルタイムで書き起こししたい場合はこちらを利用してください。

    Google音声入力が便利すぎる!?Googleドキュメント無料ソフトの使い方【パソコン、スマホ】 
    https://www.blog-support.com/entry/2017/06/05/220907

    しかし、すでに録音されているものを文字起こしできたらすごく便利ですよね

    音声をyoutubeにアップしよう!

    音声をというか、アップロードするには動画の方が便利ですね。
    特に理由がなければ、動画形式で記録を取っておいた方が良いと言うことです。
    pcで録音するときも、画面収録などにして同時に画面を取っておくといいです。
    スマホの場合はムービー撮影ですね。
    mp3のデータしかないよーと言う場合は、動画編集ソフトでmp4などの動画形式に変更すれば問題ないです。

    データが用意できたらyoutubeにアップしちゃいましょう!非公開でも問題ないです。

    アップ完了&字幕ができるまでひたすら待つ

    字幕データができるのには時間がかかります。
    こちらは一度試して報告したいと考えています。
    試した。

    2分24秒の動画の場合

    2:20 動画アップ開始
    2:21~ 処理完了 再生可能
    2:30~ 字幕表示可能

    2分45秒の動画データで、アップ処理開始から10分程度でした。

    1時間14分の動画の場合

    3:35 アップ開始
    3:45ぐらい 視聴可能
    4:25 ぐらい未
    5:00 ぐらい未
    5:50 字幕表示可能

    アップ作業から、2時間15分でした。

    つきっきりで見ていると、けっこうやきもきする時間かと思いますので、
    忙しい仕事に役に立たないかもしれません。

    アップ処理だけしておいて、短ければ1時間後に確認する
    長ければ一晩放置みたいな感じが良いかと思います。


    文字起こしデータを表示する

    まず再生ページに移動してください。
    youtubeの再生画面は、ログインしていると操作が異なります。
    なんと、ログインしていない方が情報が取り出しやすい。
    ログアウトするか、シークレットモード・ゲスト、別ブラウザなどいずれかの方法で、ログインしていない状態で利用できます。

    次に以下の通りに操作。

    すると表示されます。

    右上のメニューでタイムスタンプの表示を消せます。
    ログインしている画面だとこれができません。
    コピペした時に結構邪魔になります。

    以下コピペしたもの

    小野便利屋ラジオ #41の内容です。

    [音楽]
    こんばんわしょうだですオーナーで4へへっへこんばんはを便利ああああのイヨンエ
    はいそうですね行っないですねああ私ちょっと結構はそれっぽいんですけど
    っぽいけどそれからそうですかね今回のテーマはスレっぽいでいきたいとおもいます
    行ってみようええええっ
    ええええええ
    バッハ
    8ですねえっ私つい先日 here are the のヒアリングしてくれる
    here 対応しなきゃ
    言えなかったこれ朝一でん
    なんだけど職場に行く途中電車の中でねまあ前者な勝手にイライラせようといっぱい
    あるじゃんになる
    never でさえ枚んでしたそうマナーちょっとしたものが何か入れるギヤー
    ダルジャン
    仕方ないのにん
    ブーブそろそろそれで
    まあ対応しなきゃいけないということを忘れてたんだけど
    電車降りた時に気づけな思い出せたんだよ
    ツボあぶねぇあぶねぇあぶねぇあれば準備しなきゃえっ
    [音楽]
    ブーブーリュックが
    ないだろ
    レーザーならに置いてきちゃったのかそうは巣立とう
    可愛いね体表しなきゃいけないことを思い出したんだけどもっと対して炎聖ちゃっそう
    そうそう
    やばいね持つ上に置用と思って荷物置いたらそのままだ
    じゃあどうしたんですが大丈夫だったそれはでまあまあ大丈夫事なきを得たそう
    まあ忘れっぽいエピソードってまぁなった本当にメールしててもいいねぇ
    まあ会話しててもう目これは四六時中16自治会は磯流ししたっけ
    あーはいはいって言うけど絶対頃を思い出してねーなってよく感じるし
    うん地域になる
    あーなんだろうなぁまあ例えばでラジオやってますよ
    入っである程度濃い話をみたいなさ決めてるじゃん内容は言わないじゃんでっ俺は結構
    なんだろうそれ話だねっと思ったらあっあと真ん中であのー文章っていうかああ死ぬ
    フィッティングだ
    ブーバーン機的な曲というかあぁねあー一時期よくする
    場所がちっちゃいよ容量がね
    すぐいっぱい塗っだから多分今の投稿見ないで話したら例じゃなくてイライラする方が
    広がってるところそれじゃあダメだ次の家があるからっていうのね創造的なにー
    こぼれ茶なんだねー脳みそがねぇ
    能見とがねちょっとねーそう意識して悪いようじゃないと思うんだけど誰の一時的な
    短期的な曲の部分がね著しく弱いって人の顔とか覚えなきゃいけ
    まぁ全然ブランダ名前も名前は誕生日を覚えないっ名前もうもう
    まあそうでっ
    は的な方が入ってもらうんだな日かに興味ないんだよね
    なんかこの人こういう印象でこういうこと話しただっていうのは覚えて思ってたけど顔
    も名前も入ってその中に
    ああああだから会話してこういうこと話しましたよねって言われたら
    ああの人かってわかっでも顔が一致するどころか入ってないから
    ある話者のこの人だったんでこういう顔だったんだってやつそこで結びつく暗い記憶
    する順番というかさ
    覚えようとしているものというか興味があるものだ顔でもなければ名前でも誕生日は
    なくて多分話した内容とかがなんか俺なが印象として残ってるんだと思う
    でもそうねあの忘れポイントは本当
    友達とかでもそうなんだけどなんか1回飲んだ
    大学の友達1回飲んだじゃん
    パティん前へへっあああーーぬーっ君がメインディッシュ喋ってくれ
    いるなんで俺がねっ覚えてのって思っちゃうの
    なんでそんなのも覚えらんないなんてかまぁいいよ1回だから名前は思い出せないにし
    たら
    まあずっとしゃべってたんだから顔へ通わないでもカー名前と顔だったり
    こいつだよって大学なんとかだよって言ったらいる時に思い出すよってねーなんか
    イライラしちゃうわけよ俺は
    2種類と言わないけどナイロンタイプ人間いるわけじゃない
    でそれで大きくに中に分けると
    あのさっきブローグみたいものを選んでそれ書いてあったんだけどあのドラマ好きな
    ドラムハッとするじゃない
    で俺も好き私も好きみたいあっつするじゃんで俺もそのドラマは好きでこういうそうで
    良かったよねえっ
    向こうが青と黄の値が例えば登場人物
    あの時の a 9すごいいいこと言ったよね
    っていた時に俺ストーリーは好きで中身もちゃんと覚えてるんだけど
    登場人物の名前を覚えてないはぁはい本当に好きなのって言われることはあ
    上がるよでもストーリー完璧覚えてるしそこであのセリフにはない登場人物の心の動き
    とかが葛藤とかすごいいいなと思ったり
    っていうぐらい覚えてるんだけど名前だけ思い出せ
    別れそうでも好きなあーよく俺言っちゃあそれはぬーっニっ言っちゃ
    は俺が知ったら好きなのは別に名前とかどうでもいいので多分
    うーんそういう一印象とか心の葛藤とかストーリーが好きなんだろうと思うんだよねだ
    からその
    だらっあのなんか理解するときに名前をしっかりつけてそれでちゃんとストーリーを
    理解してパイプの人と03か
    おっきい流れとか印象で好頭いる人とってただの2違いなんだろうなと思うわけ
    天燈計算広島カープ芸人
    ハァハァやってて何回かやってるらしいんだけど
    初期の初期の方は有吉が出てる有吉が出てたらしいの母
    広島出身ないけど最近のは出てないらしいの
    それについて有吉がラジオで言ってたのはいいいい
    ひぁっアティどっちんだったりかアティ本当に好きなんだけど
    ニョキっていうだけで
    何だろうしかし知識では家庭で知識じゃなくてなんかほんと情熱
    あそうただ本当式たっていうのがある吉田氏んだから本当に思い好きなのみたいな浮い
    ちゃうから出たてないんだって
    はっはぁそういうなんだろうね
    言葉がデータとかで左右とさあ本当に号の一詳しいから好きなんだって思われがちだ
    けどか詳しいから好きともた話違うねそう
    のラーメン好きだけどってはどこどこの街のどこどこはめっちゃ美味しいからくって
    ミントはいろんな店知ってる人って言うじゃんハーツ人ってやっぱラーメン好きだなあ
    と思うけど
    多分情熱は変わらないと思う好きの母
    覚えてないだけでまあを覚えるそのポイントとか好きなポイントと格闘と違うだけで絵
    をイス情熱はねそうそう一番ディファッションそうだからあのー
    まあ普通の人はねあの電車に力忘れるとかねあれ実はしょっちゅうなんだけどそういう
    のがねおかしいって思うと思うんだけどあの多分饒舌は同じだと思うんだよね
    ああっあんっだからねそれに限って言うと俺が難航
    忘れやっぱりか悪いとかじゃなくてアティ
    情熱どこに置いなる花それは
    でもなんか最下位の話だけどさよくさあの言うじゃんお寿司屋さんいきましょうって
    言って私ちょっとあの
    はいが苦手なんですとかさネイビーが紅ポカくるやるべきでとかそういう人さパターン
    の人はさ
    a 人生の半分損して利用とかさ早い食ったことないの何が嫌いなのとかって聞く人
    いるじゃんいる姉
    そうあれは別にどうでもいいじゃんそんな流しとけば何よりもリュックを忘れちゃう
    よく忘れちゃうと言う忘れっぽさとばさ
    今来た道がかわかんないで戻れないとかの方向音痴とかさ
    それはダッチで半分損してるよね
    人生を
    そうかなやるじゃいっ調べるわけじゃそのたびにその街その場所へ行ったらさ
    うんでも記憶力ある人とかさ
    何だろうこうコーン茶ない人がさ
    2にサーっていけば時間もかからねえさーんけど
    遊べばそこにコンビニあったからそこで何買おう確かにね
    でもない人はさ調べてさこっち取っちゃっけナーってさ
    ねっで結局遠回りしたりせだけど
    ねうんっ
    何が言いたいかっていうとでも情熱は一緒だと自分は列は一緒ってないんですよね
    今日それでしょ困ったらそれを使うでしょ
    たしかにこう方向音痴
    [音楽]
    かつバスれっぽい俺はだいぶ損してる気はするんだけど
    だけど
    なんか俺すごく運に助けられていて奉公人関しては周りに覚えてくれる人がいるから別
    にいいかなと思ってて
    忘れっぽいことに関しては病気かなって思うくらい忘れるんだけどこれ
    傭兵と次のないようなここで集合ねこれやろうねって言ったことかお
    あのメールでやりとりして
    そう内容を見返しても思い出せないとか
    こんなやりとりしてたんであるんだよね
    それはやばいんだけどリュックはそれでも再訪としても
    携帯落としても
    全部無傷で持ってくるのでうんいいねそう
    ものすごい改装としてなくしているんだけど全部無傷で優しい人たちに拾われている
    うまく出来てんだろうね夜中そういうね俺あれ
    ちゃんとそういう人たちには
    変にペナルティがないように着想そうみたいなそれでマイクだって米たいリュックとか
    出て来なかったらさーん
    辛いでしょ辛いねぇこれ本当に年に1回あるかないかぐらいだもあって俺パブ亡くした
    のって言ったら
    ポケットモンスターの中蔵ゲームボーイドア
    じゃあ俺のほうがいろいろなくしているは忘れっぽくないけどそうなんかねそうよく
    なく済んだけどね家の中でも

    みんなどうしてるんだろうねぇ
    なくすってさー
    結構痛いよねー
    いえなかでよくスマホーなくなる
    もうなんか水雷出してこない俺発送俺さー最近指や置き人のねはいはい畑指輪をね
    ちょっとイヤになるかも
    いざつけようと思ったらないはいこれどこでよくありがと入れる外してそのままとか
    さー
    はいもう異名キュウリ車やついろんなあった人にさあオリビア車ねイベじゃないって
    送ったんだけど結局俺
    ピアノ中にあったんだけどすげーライダーしてたのもその時でなくなんだよ5を言って
    んじゃん俺アクセサリー家はなるアクセサリー系とかあーなんかね広
    興味があるものだとやっぱりショックだよねうーんでも
    財布もんスマホもリュックも
    全然曲に朝昼だと思う
    どうせ戻ってくるだろう俺中であるんでちょっとなめてるそれはそれを持ったらもう
    ダメだ
    慣れちゃったんだよね俺この時間慣れちゃダメこんだけで100%帰ってくるっ
    あー亡くした警察行ってみようが出てきた
    しかもうあの体がないからそれに対して
    南ここあんまり食わせれないんだよね周りの方が焦るからそれを静める方にこう
    集中しちゃう
    さあ忘れっぽいじゃん俺様平和さこう誕生日とか覚えてるじゃん
    今までの彼女の誕生日って全部落ちたりする今までの

    彼女じゃなくても好きな子も含めてとかあ覚えてる
    あんたネス中学校はさせずらにそんなちょ
    誕生日時にしなかったけど高校からのは全部覚えてる
    好きな子とかもすごいなぁ
    売り切れほんとなんかさすごいなあともうみんな
    何だろうねぇでも付き合った記念日何日とかさ
    みんな覚えてるじゃん覚えてるねそういうのどうやるの
    何だろうなぁ顔を見た循環4桁が出てくんだよね
    その
    何何それやってあのあれなんか生まれ月からなんか組んで受けてちっちゃ
    全然ある数字が得意なわけでもないわけよそうだね好きなわけではないどちらた文系な
    んだけどなんかなんだろうな
    もうその好きだから祝ってあげたいっていうのがあるんでのための俺ん中でああそっか
    前押せば言ってだぞそれ
    そもそも誕生日がアレだから関心がないんだよね
    他の自分にはあー人にまぁそこの差だよ
    俺は人が好きで祝いたいし祝われたいっていうアイプだから必然的に覚えちゃう
    なるほどでそういうところだと思うんだよねそういうことか
    なんかさカッコ覚えた誕生日思い出せないって生まれなんだよねこれ
    カッコ覚えたようだから今まで好きだった人と感情とかの誕生日で1回覚えたはずなん
    だけど
    まるで思い出せないよね
    選んで忘れないでいられるんだろうと思うだからなんだろうね
    みどりの日とかさ体育の日っていつって言ってもわかんないのは神田は神田
    でしょ俺もわかんないのいつだか
    けど
    たぶん何だろう近づいてきたらさ
    思い思い出すというかあの意識するじゃん
    ハイラインに5月何日はみどりの日へとかさあこどもの日でーとかさーああこれなん
    だろうねぇ
    背に数字が好きとかじゃないんだけど時期になると4月になると握手がと相手も誕生日
    店見てよおっ
    神谷姫うーんねぇ師匠がな
    えっ
    停止して霊視者や視野ぺーさん
    何だろうなあの人ねぇあの人と同じでマジであー
    ピンクムービー馬車を出るそうだねー
    流行振られるなぁあれは仕事としてさまー
    ナチュラルできるほんとすげーわ
    全然を出せないしながらもう秘書とかつけたらいいんじゃない秘書
    [音楽]
    ブーブー
    でもいおい今を最も翔太軍勢もマジでうん何か
    名前だったり誕生日もそうだけど
    何だろうなちょっとそういうのを覚えられない人を募集するオレはこのラジオで
    a 好きだけど誕生日覚えられないとかそういう人募集する
    だからそう友達でに3人いるけど
    常に持ってるもんね
    気も常にうーんたの彼女の情報とか
    俺が教えた情報を忘れないように
    それってさー
    なんかなんだろうねでも頭はいいの
    歩い何度もやなんかそのその人を愛するための努力としても取れるけど
    なら頑張って覚えられと思うわけねー
    そう
    [音楽]
    ブーブー何なの
    カーン
    全2種として踊ってるじゃないか
    でもその分何かでさあ2わけじゃんたぶんあのなんてくれて俺の多分強いところはなん
    かこう
    機関とか何かそういう部分が狂ってるとこだと思う
    スペック
    なんかこう何から得意とかじゃなくて
    なんかこうなんかをやろうっていう時にこうあんまり悩ま話から
    ああ
    楽観的にまあそうだね重たいほどとしてあんまりだにいろんなことを捉えねー
    うーん
    そうだねああああ
    あんまり
    なんか何言われても別にいいと思うでしょ
    どういうことだから結構人の一人の人があーだこーだ言ってもターン
    麻生いてあるんだなぐらいでさ味傷ついた比較
    悩んだりしないでしょまあそうだねえ
    そういうふうに思ってるんだなこの人はそうそうそうまだあれでもあのすごい嫌いな人
    がこれをけちょんぐちょん言ってきたら
    支えムカつくよ
    こんな奴にと思っている二さすがに
    でもまぁ基本的には俺逆だな嫌いな人が入ってきてもどうでもいいと思っちゃう
    マジかどうでもいい人が言ってきたら
    どうでもいいわいいなあーもうほんとだなってやつ
    コイツ嫌いってああ
    ずっと制度なかったんだよねー
    は離島高校23年でねそういう書く人になっちゃった
    術ちゃった東京という街ですれた
    特許という街ですレタスれたあ
    パティスれた
    いきパティポロ a ダミーほしいと薄れパティマース見てくださっ位
    四季伸ばした忘れっぽい家はらんないよさはいな441142一定まとってくださ
    今んとこどうなんだろうねこれね学んだよ全部物じゃねぇん
    なんか打撲してるよねうんここ盛り上がった後傘なんかダメだったって感覚がなくて
    全体的に暖房
    福寿海行ったらちょっと海の水がぬるっとしてる感じで受けずああああああっっていう
    感じでちょっとあれだなーっていう感じ
    サンダルねーまあ何かしゃべってるんだけどお互い
    結構喋れてるって言うけど別に意識して喋ってるかじゃないんだけど多分
    まあ編集頑張ってありがとうございましたさあさあ
    もの原理やラジオいかがでしたでしょうかそれではまた次回
    サンルーフ王立任ぐうううう
    [音楽]

    https://www.youtube.com/watch?v=HD9A210n3_s&index=42&list=PLAC_8bcLPwYFleA8_F8VeO_BlDnUOZ17X

    どうでしょうか。
    そのままでは使えませんが、一から書き起こすより数段楽ではないでしょうか。

    もしかして、あれが できるんじゃない?の話

    字幕データにはタイムスタンプが入ってますので、
    動画のスクショと組み合わせるとブログ記事的なものが出来上がるのでは?
    と思っています。

    プログラミング、セミナー、使い方解説
    なんかは結構いい感じのコンテンツになるのではないか
    と思ってます。
    だれか作るの手伝って。

    実際にためしてみました。

    検証の結果、非公開でも問題ありませんでした。

    https://youtu.be/EYK1gRyLyHQ

    youtube を文字書き起こしに利用する方法
    ルールドキュメントの音声入力機能便利ですね
    リアルタイムで書き起こしたい場合はこちらを利用してください
    しかしすでに録音されているものを文字起こしできたらすごく便利ですよね
    音声を youtube にアップしよう
    音声号というかアップロードするには動画の方が演技ですね
    特に理由がなければ動画形式で記録を取っておいた方が良いということです
    ec を録音する時も
    画面収録などにして同時に画面を取っておくと良いです
    の場合は日撮影ですね
    m b see ので確か内容という場合は
    動画編集ソフトで mp 4などの
    動画形式に変更すれば問題ないです
    データを用意できたら
    youtube に up しちゃいましょう
    公開でも問題ないです
    官僚をしますができるまでひたすら待つ
    字幕データができるには時間がかかります
    こちらはいちど試して報告したいと考えています
    文字おこしデータを表示する
    まず再生ページに移動してください
    youtube の再生画面はログインしていると操作が異なります
    なんとログインしていない方が情報が取り出しやすい
    ログアウトするかシークレットモードゲスト別ブラウザなどいずれかの方法でログイン
    していない状態でいようできます
    次に以下のとおりに操作
    すると表示されます
    右上のメニューでタイムスタンプの表示を受けせます
    にしている状態だとこれができません
    コピペしたときに結構邪魔になります
    以下コピペしたものです
    の便利粗塩#41の内容です
    どうでしょうか
    そのままでは使えませんが力書き起こすより数段楽ではないでしょうか
    もしかしてあれができるんじゃないの話
    字幕データにはタイムスタンプが入っていますので動画の付く姓と組み合わせると
    ブログ記事にもの的なものができあがるのではと思っています
    ラミングしみんな使い方と解説などなんかは結構いい感じのコンテンツになるのでは
    ないかと思っています
    誰か作るのってつだって

  • GasでLineメッセージを送ってみる

    参考にした記事

    Google Apps ScriptでLINE BOTつくったら30分で動かせた件
    https://qiita.com/hakshu/items/55c2584cf82718f47464

    デベロッパーアカウントを作ろう

    デベロッパーページでアカウント作ったり、チャネルを作ったり。

     https://developers.line.biz/ja/

    ここでアカウントをつくらなきゃいけないみたい。
    こーゆーのがめんどくさい。

    参考記事をみながら、
    プロバイダとチャネルをなんとか作成してください。
    作ったbotと友達登録しましょう。

    「返信内容に答えてくれる」

    これをやりたければ以下の記事。

    https://yuilog.xyz/linebot_gas

    「一方的にメッセージを送る」

    自分がやりたかったのはこちら。
    両方も当然できるでしょう。最初はこっちの方が単純でいいかな。
    汎用性はなくなるが、その分自分専用なメッセージを設定できますね。

    Google Apps ScriptでPushメッセージのLINE Botを作る。
    https://qiita.com/tetrapod117/items/0e3a9caf846ea11b688a

    上記記事のコードほぼそのままで申し訳ないんですけど、以下のようになります。

    //送受信トークン
    var CHANNEL_ACCESS_TOKEN = 'xxxxxx';
    //ID
    var USER_ID = 'xxxxxx';
    
    function pushMessage() {
      var postData = {
        "to": USER_ID,
        "messages": [{
          "type": "text",
          "text": "ちーっす",
        }]
      };
    
      var url = "https://api.line.me/v2/bot/message/push";
      var headers = {
        "Content-Type": "application/json",
        'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
      };
    
      var options = {
        "method": "post",
        "headers": headers,
        "payload": JSON.stringify(postData)
      };
      var response = UrlFetchApp.fetch(url, options);
    }

    トークンとIDが必要みたいですね。

    ちょこっと改造して使えるプログラムにしてみる。

    まず、毎朝メッセージを送るようにしてみます。

    スクリプトエディタのメニューで
    編集 > 現在のプロジェクトのトリガー
    をクリック

    こんな感じでトリガーを設定しておくと毎朝「ちーっす」って言ってくれます。
    やったぜ。

    曜日ごと言うことを変えてみる

    これだけでもちょっとした目ざましになると思いますが、
    曜日で言うことを変えてみましょう。

    こんなシートを作ります。

    見ての通りゴミ出しについて教えてくれるようにしてます。
    当然内容は自由です。日付や、天気予報、ニュースなどもシートを工夫するだけで組み込めると思います。

    //トークン
    var CHANNEL_ACCESS_TOKEN = '';
    //ユーザID
    var USER_ID = '';
    //メッセージの記載されたスプレッドシートのURLを入れます
    var sheetURL = '';
    
    function pushMessage() {
      
      //曜日を取得
      var date = new Date ();
      //月>0,火>1,水>2,木>3,金>4,土>5,日>6 (たぶん)
      var dayOfWeek = date.getDay();
      
      var Sheet = SpreadsheetApp.getActiveSheet();
      var text;
      
      //switch文のほうが多分いいけど
      if(dayOfWeek == 0){
        text = Sheet.getRange("B2").getValue();
      }else if(dayOfWeek == 1){
        text = Sheet.getRange("B3").getValue();
      }else if(dayOfWeek == 2){
        text = Sheet.getRange("B4").getValue();
      }else if(dayOfWeek == 3){
        text = Sheet.getRange("B5").getValue();
      }else if(dayOfWeek == 4){
        text = Sheet.getRange("B6").getValue();
      }else if(dayOfWeek == 5){
        text = Sheet.getRange("B7").getValue();
      }else if(dayOfWeek == 6){
        text = Sheet.getRange("B8").getValue();
      }
      
      Logger.log(dayOfWeek + text );
     
      var postData = {
        "to": USER_ID,
        "messages": [{
          "type": "text",
          "text": text + "\n" + sheetURL,
        }]
      };
    
      var url = "https://api.line.me/v2/bot/message/push";
      var headers = {
        "Content-Type": "application/json",
        'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
      };
    
      var options = {
        "method": "post",
        "headers": headers,
        "payload": JSON.stringify(postData)
      };
      var response = UrlFetchApp.fetch(url, options);
    }

    if文の部分があまりスマートではないですけど、大目にみてください。

    スプレッドシートのURLを入れてますが、これはメッセージがおかしいな?変えたいな?と思った時のため、すぐ編集できるようにリンクを入れています。

    これはゴミ出しですけど
    好きなテレビ番組の放送時間とか
    繰り返しではないけど、忘れちゃいけない予定とか
    ちょこちょこ編集できていいんじゃないかと思います。

    ちょっと運用して、何か面白いことを思いついたらまた反映してみたいと思います。

    その他参考にした記事

    https://inside.dmm.com/entry/2017/12/19-dmmlabotech-adventcalender-_GAS

    LINEのBot開発 超入門(前編) ゼロから応答ができるまで 
    https://qiita.com/nkjm/items/38808bbc97d6927837cd

  • Gasでメールを送信する

    参考にした公式ビデオ。

    字幕をONにして、自動翻訳の日本語をONにすると良いです。
    海外の動画ってあまり積極的にみてなかったけど、自動翻訳あればなんとなく内容がわかるし、そもそもコードは英語だから結構使えるかもしれないなーと感じました。

    メールを送信してみる

    スプレッドシートからスクリプトエディタを作ってください、
    セルの内容をメールするプログラムです。

    上記のようなシートを作ってください。

    function sendemail() {
      var Sheet = SpreadsheetApp.getActiveSheet();
      var subject = Sheet.getRange("A2").getValue();
      var body = Sheet.getRange("B2").getValue();
      var recipient = Sheet.getRange("C2").getValue();
      MailApp.sendEmail(recipient, subject, body);
    }
    

    スクリプトエディタには上記のようなプログラムを書き込む。
    シートから情報を取り出して、sendmailの引数に当ててるだけです。

    ひえ・・・・超簡単!

    動かす時に、動作の許可が入りますので、許可してあげてください。

    毎朝送信してみる(定期実行)

    試しに毎朝メールを送るようにしてみます。
    編集 > 現在のプロジェクトのトリガー

    右下のトリガーの追加ボタンをクリックする

    こんな感じで設定します。ちゃんと動くか結果は知らん。
    翌朝動きました!

    内容が変わらないのはつまらないので、
    天気予報などにしてみる。

    tenki.jpからの情報を取得してみます。

    A2セル

    =IMPORTXML("https://tenki.jp/","//title")

    B2セル

    =IMPORTXML("https://tenki.jp/","//*[@id='forecast-map-wrap']/div[4]")

    と書き換えます。
    関数だけでかなりの工夫ができちゃいますね。
    番組表を取ってくるとかもうまくやるとできるかも。

  • Google Apps Scriptの制限について調べてみた

    便利な便利なGasですが、やはり制限があります。
    でもわりとゆるい感じもします。

     https://developers.google.com/apps-script/guides/services/quotas

    プログラムあたりでなく、アカウントあたりらしいです。
    割ときつそうなのは、スプレッドシートやドキュメントの作成数が1日250個までみたいです。
    あと、Emailも100通しか送れない。

    URL Fetchに関してはけっこうゆるいかな、と思いました。
    かなり頻繁に大量に情報を集めるようなプログラムは結構きついのかもしれません。

    ビジネスアカウントだと上限が緩くなりますね。さすが有料。

    最近つくったプログラムでも、ドキュメントを作成してOCRを行なっているので、画像がフォルダ内に250以上あるともうアウトです。
    むしろURL Fetchのほうが緩かった。

    この辺も意識してプログラムを作っていこうと思います。

  • うさぎの肉食が目撃された件について

    今回は普段の記事とは趣を変えて、
    ちょっと気になった記事についていろいろ調べてみました。

    うさぎの肉食が目撃された

    【動画】カメラは見た! 実は肉食系でもあるノウサギ

    https://natgeo.nikkeibp.co.jp/atcl/news/19/011600036/

    こんな記事がありました。リンク先では動画も見れます。

    ファンタジーの世界では度々みられる設定ですね。

    ワンピースでは(ラパーン)

    「アルミラージ」という架空の生き物もいますね。
    (一角のツノをもつ、うさぎに似た肉食の獣)

    アルミラージ wikipedia

    一角の生き物といえば、ユニコーンですね。
    今はツノの生えた馬として表現されがちですが、本来はサイに似たすでに絶滅した動物で「毛サイ」のような生き物だったという説があります。
    サイだったら、気性が荒くて処女だけが近づけるみたいな設定も納得が・・・・
    この話は今回とは全然関係無いのでここで終わります。

    うさぎは肉も食うようです。
    全然ファンタジーじゃなかった。

    草食に特化した動物であるのは間違い無いですが、肉も食べるということですね。草食動物が肉を食うのは人間の飼育下でも自然でもたびたび目撃されているようです。

    うさぎがキャットフードを食べた
    https://www.rabbittail.com/s/qa/detail/6511/L3MvcWEvY2F0ZWdvcnkvMi8zMS8

    小鳥を食べる鹿

    ひよこを食べる牛

    人間でも、たまに変なもの食べる人がいますからね。
    異食症と呼ぶそうです。

    https://edmm.jp/49272/

    妊娠してる時に変わったものを食べたくなるとかあるみたいですし、案外自然なことなのかもしれません。
    うさぎに関しても、メスの妊娠時によく肉食が見られるというコメントをしているのが見られました。

    普通なら「完全草食動物だから食べません」
    っていうのが模範解答でしょうね?

    でも期待外れの回答かもしれませんが実際は結構たべますよ!
    代表的なのは、メスうさの「子喰い」です
    育てられないと判断した時は食べてしまいます。
    また妊娠期間~授乳期間も食べます
    この時期は、犬や猫と一緒に飼っていれば経験するかもしれませんが
    ラビットフードなんんて目もくれず、ドックフードやキャットフードを
    むさぼります。

    でもオスウサは殆ど食べないですね。

    https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1384159918

    そんなもんなのかもしれません。

    食性を変えて生き残った生き物

    本来肉食だけど、草を食べている生き物知ってますか?

    パンダです。

    見た目クマですもんね。肉を食べそうです。

    でも、体が草食にあってないみたいです。

    【5月20日 AFP】ジャイアントパンダは200万年間、主にタケを食べ続けてきたにもかかわらず、その消化器官は草食に適合していないとの研究結果が19日、発表された。この研究結果から、パンダが「進化のジレンマ」に陥っていることがみえてくるという。
     米国微生物学会(American Society for Microbiology)のオンラインジャーナル「mBio」に発表された論文によると、今回の研究では、ジャイアントパンダ45頭を対象に1年間にわたる調査が行われた。その結果、パンダが「他の草食動物とは完全に差別化された」消化器系を持っていることが明らかになったという。

     論文の要約では、ジャイアントパンダが祖先である雑食性のクマの腸内バクテリアをいまだに保持していることが説明され、また「他の草食動物は、繊維質の植物を効率的に分解するための解剖学的に分化した消化器系への進化を成功させているが、パンダの消化管は、典型的な肉食動物のものだ」と記されている。そして、このことが「この草食動物の共進化適応度にマイナスの影響を及ぼす可能性がある」と指摘された。

    http://www.afpbb.com/articles/-/3049175?ctm_campaign=txt_topics

    でも積極的に肉を食べたがらないのは確かみたいですね。
    飼育下で与えられれば肉を食べるが、狩をするようなことはしない。

    てな感じみたいです。

    うさぎに関しても、冬に食べるものがなければ肉を食べるぞ!
    それが(1000年とかのレベルで)続けば体質が変化していくぞ!

    という感じなのかもしれません。

  • Google Apps Script 勉強「やることリスト」

    https://logzitsu.tlog.work/gasgoogle-apps-script%E3%82%92%E5%8B%89%E5%BC%B7%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E6%80%9D%E3%81%86/

    ぱらぱらーっといろんな記事を読んだり、ちょっと試してみたりして
    少し概要が掴めてきました。

    ためしたり、実現したいことがちらほら出てきたのでここに挙げておきます。
    *TODOリストをGasで制作する訳ではない。

    TODOリスト

    出力をためす

    HTMLであれば「サイト上に表示する」というのが代表的な方法ですがGASが得意な方法がいくつかあるようなのでそれを試してみたいと思っています。

    スプレッドシートだけでも計算とか文の処理とかはすごく簡単にできるので、まずそこを把握しておくとどんなことに使えるかが見えてくるのではないかと感じています。
    計算結果を以下の手段で出力できます。

    トリガーを試す

    スクリプトエディタ画面から実行ボタンを押すとスクリプトが実行できます。
    また、関連付けたスプレッドシートにボタンを描画して、そのボタンをクリックで実行することも可能です。(これはすごく簡単だった)

    他にも、時間で定期的に実行する手段があるみたいなのでこれも試してみたいと思います。
    また、Googleカレンダーと連携して、スケジュールを元に実行することも可能みたいですね。
    これも試しておきたい。

    差分を検出する(diff)

    これが実現できると、もしかしていろんなことができるんじゃないかと思っている。
    方法をいろいろ調べないとですけど、いずれ実現したいなと思っています。
    その後、それを利用してなにかべんりな仕組みを作って見たいと考えています。

  • OCR自動化システム 試作

    一枚二枚なら下記事のやり方で。

    https://logzitsu.tlog.work/%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%99%82%E3%81%AB%E4%BE%BF%E5%88%A9%E3%80%82%E7%94%BB%E5%83%8F%E5%86%85%E6%96%87%E5%AD%97%E3%82%92%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AB/

    画像をテキストに変換する仕組み。
    googleドキュメントでもだいぶ楽なんだけど、Gasで試作して見た。

    試作版

    function get_ocr() {
      
      var lastRow = SpreadsheetApp.getActiveSheet().getLastRow();
      for(var i = 3; i <= lastRow; i++) {
      
      //画像にアクセス
      
      //Basic認証
      var sheetID = i;
      var sheetID1 = "B" + sheetID;
      var sheetID2 = "D" + sheetID;
      var sheetID3 = "E" + sheetID;
      var domain = SpreadsheetApp.getActiveSheet().getRange("B1").getValue();//取得URL
      var fileURL = SpreadsheetApp.getActiveSheet().getRange(sheetID1).getValue();
        
      var user = "hoge";
      var pass = "huga";
      var options = {
        "headers" : {"Authorization" : " Basic " + Utilities.base64Encode(user + ":" + pass)},
        "muteHttpExceptions": true
      };
    
      var file = UrlFetchApp.fetch(fileURL, options);
      var blob = file.getBlob();
      var name = "【文字起こし】" + fileURL;
    
      var file = {
        title: name,
        mimeType: 'image/png',
        parents:  [{"id": "XXXXXXXXXX"}]//フォルダのIDを入れる
      };
      
      var option = {
        ocr: true
      }
      
      file = Drive.Files.insert(file, blob, option);
      var doc = DocumentApp.openByUrl(file.embedLink);
      var body = doc.getBody().getText();
      var docID = doc.getId();
      var docUrl = "https://docs.google.com/document/d/" + docID + "/edit";
      
      //docファイルの操作
      var docFile = DocumentApp.openById(docID); //ドキュメントを取得
      var docText = docFile.getBody().getText()
      Logger.log(docFile.getName()); //ドキュメントタイトルをログに表示
      Logger.log(docText); //ドキュメントの内容をログに表示
      Logger.log(docUrl);
      
      SpreadsheetApp.getActiveSheet().getRange(sheetID2).setValue(docText);
      }
      
    }

    ループで処理してるけど、ちょっと高性能すぎるというか・・・
    もっと単純にまとめたいなーと思いました。

    上記はネット上の画像を取得してくる仕組みにしたのだけれど、画像URLが画一的でなくてエラーがおおくなってしまった。

    特定のgoogledriveフォルダに入れた画像を文字認識 & スプレッドシートにリストアップ
    の方が使いやすいかな、とおもいました。
    上のプラグラムで利用しているfetchはめちゃくそ便利ですが、
    回数制限があるらしいので。

    改善版(ドライブフォルダ参照)

    function get_ocr2() {
      
      var folderID = "xxxxxxxxxxx"; //文字起こし元画像のを入れるドライブのID
      
      var files = DriveApp.getFolderById(folderID).getFiles();
      for(var i = 0; files.hasNext(); i++) {
        var file = files.next();
        
        Logger.log(file);
        
        var sheetID = i + 1;
        var sheetID1 = "A" + sheetID;
        var sheetID2 = "B" + sheetID;
        var sheetID3 = "C" + sheetID;
        
        var blob = file.getBlob();
        var name = file.getName();
        
        var file = {
          title: name,
          mimeType: 'image/png',
          parents:  [{"id": folderID}]
        };
        
        var option = {
          ocr: true
        }
        
        file = Drive.Files.insert(file, blob, option);
        var doc = DocumentApp.openByUrl(file.embedLink);
        var body = doc.getBody().getText();
        var docID = doc.getId();
        var docUrl = "https://docs.google.com/document/d/" + docID + "/edit";
        
        //docファイルの操作
        var docFile = DocumentApp.openById(docID); //ドキュメントを取得
        var docText = docFile.getBody().getText();
        
        SpreadsheetApp.getActiveSheet().getRange(sheetID1).setValue(name);
        SpreadsheetApp.getActiveSheet().getRange(sheetID2).setValue(docText);
        SpreadsheetApp.getActiveSheet().getRange(sheetID3).setValue(docUrl);
       
      }
      
    }
    • フォルダに画像をがばっといれる
    • 上記スクリプトを実行
    • スプレッドシートに書き起こし文字と、ドキュメントファイルのURLが記載されていく

    このほうが安定性高くていい感じです。
    そういう業務が多い方は活用してみてください。
    名刺の画像とかで試すと超いいかもです。

  • Gas(google apps script)を勉強しようと思う

    node.jsなどについて調べてたり、その他自動化処理について調べているとたびたび目に入るGasです。

    gmailや、スプレッドシート、googleカレンダーなどを操作するプログラムを組むものです。
    思いの外いろいろなことができそうなので、空いた時間にちょこちょこ勉強してみようと思います。
    gasを勉強するにあたって、学べるサイトを集めて見ました。

    ドットインストール

    Google Apps Script入門 (全20回) 
    https://dotinstall.com/lessons/basic_google_apps_script_v2

    いつも隣にITのお仕事

     https://tonari-it.com/category/google-apps-script/
    関連コンテンツが充実している。
    一通りやってみたい。

    Google Apps Script 入門(qiita記事)

     https://qiita.com/t_imagawa/items/47fc130a419b9be0b447

    GoogleAppsScript(GAS)を使用した業務効率化事例集(qiita記事)

    https://qiita.com/yabaiwebyasan/items/703e5a1868a8ea2b7b3e

    公式ビデオ

     https://developers.google.com/apps-script/guides/videos
    英語がわかればめちゃくちゃ習得早いんじゃね・・・

    カグア

     http://www.kagua.biz/tag/google-apps-script
    なかなかに情報が充実しています。

    Gasについて簡単にまとめる

    少し勉強してわかったことなどをメモしておきます。
    Gasとは、googleのサービスで使えるスクリプト言語です。
    基本はJavascriptで、専用の命令があり、使えるというのが特徴です。

    Gasができることは、Googleサービスの操作です。
    普段は手動で行なっていることを、プログラミングで行うと、以下のようなメリットがあります。

    • 日々繰り返す作業をほぼやらなくてよくなる。
    • さらに、ミスもすくない。
    • googleのサービスを横断的に利用できる
    • かなり高機能なプログラムが割と手軽に作れる

    こんな感じです。
    googleはいろんなサービスをやってるので
    スプレッドシートで情報をまとめグラフにしてメール送信。
    というような、複合的な作業が自然に行えるのが特徴みたいです。

    情報をネットから集めてくることも可能です。
    最近AI的な機能がぽっと搭載されていたりするので、そういうのもうまいこと利用するとかなり手軽に美味しいプログラムが作れてしまう。

  • Win32-OpenSSH gitlab.comに接続、cloneしたいときにハマったことと対処法

    概要

    Win10で、Win32-OpenSSHを使ってgitlab.comにSSH接続し、gitを使いたく、設定したときにハマった。

    基本は以下を参考にさせていただき設定
    https://qiita.com/MegaBlackLabel/items/e825babfdc1b7fffec96

    普通は動くが、SSH接続する際入力する『 ssh -T gitlab.com 』の” .com ”を省略したく、~/.ssh/config/ の内容をアレンジしたことで大変な事になった。

    起こったこと

    ~/.ssh/config/ の内容を以下に変更。

    Host gitlab
      User git
      Hostname gitlab.com
      IdentityFile ~/.ssh/秘密鍵  //秘密鍵の名前はちゃんと入れてね。
      IdentitiesOnly yes

    gitlab.comへのSSH接続は成功。
    だがクローンしようとすると、

    git@gitlab.com: Permission denied (publickey).

    とエラーが。

    調べると『ssh-add ~/.ssh/秘密鍵』するといいと出てくるが、それだと~/.ssh/config/ に秘密鍵の場所覚えてもらった意味ないじゃん…

    解決法

    ~/.ssh/config/ の内容を以下に変更。

    Host gitlab gitlab.com
      User git
      Hostname gitlab.com
      IdentityFile ~/.ssh/id_rsa_for_gitlab
      IdentitiesOnly yes

    Host に gitlab.com がないとダメみたいです。
    これで
    SSH接続する際に入力する『 ssh -T gitlab.com 』の” .com ”を省略し、ちゃんとcloneできました。

  • はじめて、転職エージェントを利用してみた!

    転職エージェントってなに?

    転職を支援している会社の社員さんです。
    人材と会社をつなぎ合わせるお仕事です。

    自分のスタンス

    就職活動が世界で一番嫌い。(かもしれない)

    基本的にめんどくさがりだし、
    自分の職種だと「ポートフォリオ」ってものを用意しなきゃいけなかったりするのもひとつハードルになってました。

    メリット① エージェントさんはお仕事なので、
    頑張って動いてくれる。

    フリーランスでちゃらんぽらんやってる身には、
    「まー決まんなくてもなんとかなるかー」ぐらいの気持ちだったりしますが(ひどい)

    エージェントさんは本業なわけですごくしっかり動いてくれます。

    そういう風になると、ちゃらんぽらんしてもいられないので、しっかりやろうと思って来ます。
    しかし、やはりエージェントさんも決まれば就職した会社から、エージェントさんの会社へお金が入るわけなので、気に病む必要はないです。
    お互いwin winの関係でうまいこと立場を利用しあって、いい感じのところに決めていきましょう。

    メリット② 第三者の目としての役割

    採用活動にはいろいろには決まりがあって、
    やっちゃいけないこと、やるべきことがあるわけです。
    そういうアドバイスがもらえます。
    また、自分の場合、

    • 「こんな履歴書でいいのか」→ いやダメだろう
    • 「こんなポートフォリオでいいのか」 → いやダメだろう
    • じゃあ直すか →(最初に戻る)

    という停滞ループに陥るタイプです。

    第三者の目を通すと、
    「特に問題ないです!こちらで応募します!」
    で、停滞ループが終了します。
    これは非常に建設的ですね。実際書類も通った。

    でも実際出すとなると、気になるところが出てきたので
    手を加えましたけどね。
    これはわりといい影響じゃないかと思います。

    メリット③ ガンガン応募してくれる

    基本的には自己評価が低い自分。

    自分では、あまりレベルの高いところにはだしませんが、
    エージェントさんは気にせず応募して行きます。

    ダメ元で出しても書類審査落ちになるだけだからね。
    自分で出してると結構落ち込むけど、そういうダメージも少し軽減できます。

    あと、自分じゃやらないようなペースで出すから、面接の予定がバシバシ入る。
    今企業にいるわけじゃないので、平日に入りまくって疲れた。

    「もう面接受けたくないー」、というモチベーションで決めたいと思いました。
    (後ろ向きエネルギーの前向きな利用)

    直接連絡しちゃいけなくて、エージェントさんを介して会社とやり取りするわけですが、それはそれで楽です。

    実質動いた期間は2ヶ月くらいかな。
    非常に効率的に決まった感じがします。

    「就職活動にちゃんと取り組んだことがないコンプレックス」の解消

    そんなコンプレックスあるんかいなと思うかもしれませんが、
    あります。自分です。

    わりと将来のプランとか考えたくない人なんですけど、
    そういったものに取り組まざるを得なかったのでいい経験になったかなと思います。

    最終的には自分でも納得いく仕事に決められたので非常に良かったのではないかと思います。

    転職エージェントなんて、多分普通だったら使わないタイプなんですが、知り合いづてで利用してしみたらなかなかよかったです。
    もう新卒採用からこの仕組み利用した方がいいような気がする。

    転職、就職に後ろ向きな人ほど意外と使うといい影響があるかもしれませんよ!

    ということで、会社員としてこれから頑張っていこうと思います。

  • ブログのデザインをなんとかしよう!という意思表示な記事

    このブログですが、とにかく気楽に、細かいことは気にしねぇ!
    という運用方針のもとやっております。

    その通り、書きたいことをきままに書いていますので、企画が頓挫したりよくゴミ記事を排出します。

    それでも、たまに気合いを入れてちゃんと書いた記事はたまに自分も見に来ており、その都度手を加えているものも稀にあります。

    幸いなことに、大人気ブログには足元にも及びませんが、アクセス数も「あーそれなりに増えてきたなぁ」と思う程度には増えてきております。

    アクセス数関連でやっとモチベーションが上がってきたのです。
    そうなってくると、過去の恥ずかしい記事が消したい・・・とかはなくそのまま放置するとして、有用な記事が読みやすかったり、使いやすかったりした方がいいよなぁと思ってきました。

    いわゆる、閲覧者のUXを意識したいと!そう思い始めました。

    ブログのデザインなんざ、情報が手に入ればよかろう?と思ってはいますが、それでも使いやすいように少しづつ手を加えていこうと思っています。

    方針

    • 回遊率を増やす(他記事への誘導)
    • 記事をわかりやすく、読みやすく(これは内容もそうですし、画像も見やすくしなきゃですし、文字の大きさやスペースに気を使いたい)
    • アクセス数(やその他)を上げることを目的とする

    こんなかんじでしょうか。
    出来るだけ数字を見ながらいじっていきたいと思います。
    ごちゃごちゃしてる感じも好きなので、そのへん見極めたい。

    終わり

  • 個別記事用のスタイルを置いておくよ

    記事内の装飾って、リセットCSSでうち消したのを戻していくような作業で、
    ほんの少しだけ虚無感を感じなくもない。
    ということで置いておきます。
    結構フォントの大きいレイアウトなのでその辺は調整してください。
    てゆーか全体的に調整して使ってください。

    /* 個別記事アイテムのスタイル */
    .article-item p{
        font-weight: 500;
        margin-top: 20px;
        margin-bottom: 40px;
        font-size: 18px;
        line-height: 1.6;
    }
    .article-item img{
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
    border:2px solid #ddd;
    }
    .article-item h1{
        margin-top: 60px;
        margin-bottom: 20px;
        font-size: 30px;
        font-weight: 700;
        color: #be0008;
    }
    .article-item h2{
        margin-top: 60px;
        margin-bottom: 20px;
        font-size: 28px;
        font-weight: 700;
        color: #be0008;
    }
    .article-item h3{
        margin-top: 60px;
        margin-bottom: 20px;
        font-size: 26px;
        font-weight: 700;
        color: #be0008;
    }
    .article-item h4{
        margin-top: 60px;
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: 700;
        color: #be0008;
    }
    .article-item h5{
        margin-top: 60px;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 700;
        color: #be0008;
    }
    .article-item h6{
        margin-top: 60px;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 700;
        color: #be0008;
    }
    .article-item table{
        background: #fff;
        border: 1px solid #ccc;
        font-weight: 500;
        width: 100%;
        margin-top: 30px;
    }
    .article-item table th,.article-item table td{
        border: 1px solid #ccc;
        padding: 10px;
    }
    .article-item table th{
        font-weight: 700;
        background: #ddd;
    }
    .article-item pre {
        background: #8d8c8c;
        color: #fff;
        padding: 20px;
        margin-top: 30px;
        font-weight: 500;
        letter-spacing: 0.05em;
        line-height: 1.3;
    }
    
    .article-item blockquote {
        background: #eee;
        padding: 20px;
        margin-top: 30px;
    }
    .article-item blockquote p{
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 16px;
        color: #6c6c6c;
    }
    .article-item blockquote:before{
        content:"”";
        display: block;
        color: #6c6c6c;
        font-size: 30px;
    }
    .article-item blockquote:after{
        content:"”";
        display: block;
        text-align: right;
        color: #6c6c6c;
        font-size: 30px;
    }
    .article-item dl{
        margin-top: 30px;
        font-size: 18px;
    }
    .article-item dl dt{
        font-weight: 700;
        margin-bottom: 10px;
    }
    .article-item dl dd{
        margin-left: 30px;
        font-weight: 500;
        margin-bottom: 25px;
        line-height: 1.6;
    }
    .article-item ol,.article-item ul{
        margin-bottom: 30px;
        margin-left: 20px;
        margin-top: 30px;
        font-weight: 500;
        font-size: 18px;
    }
    .article-item ol li,.article-item ul li{
        margin-bottom: 15px;
    }
    .article-item ol{
        list-style-type: decimal;
    }
    .article-item ul{
        list-style-type:disc;
    }
    .article-item strong {
        background: #fcff00;
        font-weight: bold;
        padding: 3px 10px;
    }
    .article-item em {
        font-weight: bold;
        font-size: 120%;
    }