アラフィフおやじログ

AWSの APPSync を使う前に GraphQL のお勉強をしようと思い、 Appolo + TypeScript を使って実験をしてみた。弱っちいので相変わらずコピペの権化みたいな感じになっています。 queryとmutationとsubscriptionがあるとかいうのはなんとなくは分かったものの、どうやって使うかはこれから試行錯誤ですかな・・・ ◆環境構築 1.nodeの仮想環境インストール $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash $ echo 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm' $ source ~/.bashrc $ nvm ls-remote $ nvm install stable $ nvm install --lts --latest-npm $ nvm alias default 'lts/*' $ nvm current v18.17.1 2.Appoloほか環境構築 $ mkdir graphql-server-example && \ cd graphql-server-example && \ mkdir configs && \ mkdir data && \ touch index.ts && \ touch configs/resolver.ts && \ touch configs/query.graphql && \ touch configs/schema.graphql &...

 tinyMCE というライブラリがあったので、それを使って WordPress みたいなエディタを作成してみました。JavaScriptオンリーで作成しています。あとライブラリ類は全部ローカルに落とし込んでいるのでネットにつながらない環境でも利用することができます。 簡易な検索機能と、その他ファイルの閲覧のみの機能も備えてみました。 javascriptはシロート並みなので当然ながら ChatGPT にほとんど作成してもらってます。まぁ弱っちいのでそうなります。そのうち淘汰されるんだろうなと感じながら日々生きてます。 tinyMCEを制御している主要なjsのみ掲載しときます。後はGitHubのコード見てください。弱っちいのでもっといい書き方あるよとか教えていただけると幸いです。 // オリジナルHTMLを保持する let originHtml = ''; const initialConfig = { selector: '#editor', language: 'ja', language_url: './langs/ja.js', branding: false, plugins: 'link image code codesample table lists media visualblocks wordcount preview save textpattern', textpattern_patterns: [ { start: '*', end: '*', format: 'italic' }, { start: '**', end: '**', format: 'bold' }, { start: '#', format: 'h1' }, { start: '##', format: 'h2' }, { start: '###', format: 'h3'...

 上司から何かあるとすぐに マトリクス表 で考えろと言われるので、マトリクス表を手動で作っていたけど、これ規模が拡大してくると絶対ミスるよなと思い、Googleスプレッドシートで自動生成してくれるものを準備した。 なんか最近こういうの多い・・・・。 同じ文字列だと数字の1を立ててくれて総当たりみたいなことはできるようにはしています。 なので、総当たりみたいな感じのことをしたときは同じものが当たらない様にはしてくれます。 ■GASコード function matrix() { const SHEET_URL = SpreadsheetApp.getActiveSpreadsheet().getUrl(); const ss = SpreadsheetApp.openByUrl(SHEET_URL); const cs = ss.getSheetByName('マトリクス図検討'); const START_ROW = 3; const VERTICAL_COL = 1; const SIDE_COL = 2; const SHEETNAME_CELL = 'B1' const matrix = createMatrix(cs) // write spreadsheet const sheetname = getsheetName(cs,SHEETNAME_CELL) writeSheet_matrix(ss,matrix,sheetname,VERTICAL_COL); } function createMatrix(sheet) { const rangeA = sheet.getRange("A3:A").getValues(); // A4から最終行までの値を取得 const rangeB = sheet.getRange("B3:B").getValues(); // B4から最終行までの値を取得 const numRowsA = rangeA.filter(String).length; // A列の値が入力されている行数を取得 const numRowsB = rangeB.filter(String).length...

前回から4か月空きました・・・。 ネタがないというところと仕事に忙殺されて時間がなくて、ブログに割く余力がありませんでした。久しぶりにGoogleAppScriptネタです。   テストケースの洗出しで デシジョンテーブル を作成する必要が出てきて、 GIHOZ を使えれば簡単に作成できるものの、そういうテストツールにはお金を出してくれない環境なので、何とかできないか考えてみた。最初はEXCELで何とかしようと考えてVBAでデシジョンテーブル作成してくれる まんまのもの があったものの欲しかったものと違う。 会社では Googleスプレッドシート を使っているのでまぁ関数をコピペするだけで何とかできないかと思ったものの、そもそもEXCELですらVBAを使ってやっておられるくらいなのでそういう関数もなく。自分は頭悪いのでそういう内容も思いつかず GAS 使って何とかするしかないよなということで探しましたが見つからず・・・・。困り果てていたところでpythonで デシジョンテーブル作成されている方 がいらっしゃってそこでアイデアコピペでググりましたよ。 フルコピペでGAS作成しました。まぁ意図通りのができたのでめでたしめでたしです。 ■GASコード function myFunction() { const SHEET_URL = SpreadsheetApp.getActiveSpreadsheet().getUrl(); const ss = SpreadsheetApp.openByUrl(SHEET_URL); const cs = ss.getSheetByName('デシジョンテーブル検討'); const START_ROW = 3; const CONDITION_COL = 1; const ACTION_COL = 2; const SHEETNAME_CELL = 'B1' // conditional partial generation const TRUE_MARK = 'Y'; const FALSE_MARK = 'N'; const packet = {}; let combinationSubtract = 2; ...

 タイトルのまんまです。 以前、EXCELで似たようなこと をしていたのでGASではどうするのかなぁと思ってやってみました。まぁほとんど丸パクリです。とりあえず、また使うかもしれないので自分用にメモです。しかしGASでGoogleDriveのファイル一覧嘗め回そうとすると3分かかってしまう。数が多いと6分制限に引っかかるのでこれでは使えない。せいぜい100ファイルとか数が少ないところで使う分にはいいけどダイナミックな場合は何回かに分割してやらないと少し厳しいかもしれない。 ◆GAS //設定値取得 const SHEET_URL = SpreadsheetApp.getActiveSpreadsheet().getUrl(); const ss = SpreadsheetApp.openByUrl(SHEET_URL); const SETTING_SHEET = ss.getSheetByName('設定') const TARGET_FOLDER_ID = SETTING_SHEET.getRange('B2').getValue(); const SAVE_FOLDER_ID = SETTING_SHEET.getRange('B3').getValue(); const SAVE_FILE_NAME = SETTING_SHEET.getRange('B4').getValue(); const SAVE_SHEET_NAME = SETTING_SHEET.getRange('B5').getValue(); function writeSheet(values, labels, sheetUrl, sheetname, width) { /* スプレッドシートに書き出し */ try { if (values.length > 0) { // シートを追加する let spreadSheet = SpreadsheetApp.openByUrl(sheetUrl); let sheet = set_sheet(sheetUrl,sheetname); // 1行目だけヘッダ追加 let he...

#2020/12/30追加 スレッドを取得してくるように改修、</pre>と</div>の箇所があるので全角になっているからそこは書き換えないといけない。 いい加減、Git使おうよオレ氏、、、。そして100行ほど膨れ上がりました。 過去分の Slack の投稿を一覧したいと思って、 Googleスプレッドシート に出力する GAS を仕方なく書いた。色々と癖が強かったのとAPIが古い奴のサンプルしかなかったので仕方なく自分でいろんなとこからコピペしたつぎはぎスクリプトです。 350行ほどです。後、手動でぶっこ抜くところあったので色々と元のシートにパラメータ埋め込んでます。へっぽこなので相変わらずセンスないコードです。 ◆GAS //固定設定値 const SHEET_URL = SpreadsheetApp.getActiveSpreadsheet().getUrl(); const ss = SpreadsheetApp.openByUrl(SHEET_URL); const SETTING_SHEET = ss.getSheetByName('設定') const ARCHIVE_URL = SETTING_SHEET.getRange('B2').getValue(); const OLDEST = SETTING_SHEET.getRange('B3').getValue(); const LATEST = SETTING_SHEET.getRange('B4').getValue(); const CHANNEL_SHEET = '対象チャンネル' const FILE = SETTING_SHEET.getRange('B5').getValue(); const OUTFILE = SETTING_SHEET.getRange('B6').getValue(); const OUTFOLDER = SETTING_SHEET.getRange('B7').getValue(); /* SlackAPI操作 */ //APIトークン const API_TOKEN = PropertiesServic...

 タイトルのまんまです。ちょっと仕事でラクしたいなと思って GAS にて準備しましたが、もう少し考えないといけない部分とかあったけど、基本部分は応用で使えそうなので置いておきます。 カレンダーに登録されている当日の予定をすべて引っこ抜いてきて日付名のシートをつけて出力するという内容です。シート出力済みの制御とか考えてなくて、1日1回スケジューラで実行する予定でしたが、ほかにも考えないといけないことが出てきたので少し考え直し中 ほとんど参考サイトのコピペですけどね。 ■ソースコード //カレンダーIDとスプレッドシートのURLを指定 const CALENDAR_ID = 'XXX'; const SHEET_URL = "https://docs.google.com/spreadsheets/d/XXXXX/edit#gid=X"; function main() { //カレンダー取得用日付設定 const n = 1; const d = new Date(); const todayStartTime = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0); const nd = d.setDate(d.getDate() + n, d.setHours(0), d.setMinutes(0), d.setSeconds(0)); const todayEndTime = new Date(nd); const nextdayEndTime = new Date(n2d); //カレンダーからタスク取得 const todayTasks = getCalendarEvents(todayStartTime, todayEndTime); const nextdayTasks = getCalendarEvents(todayEndTime, nextdayEndTime); //スプレッドシート書き出し const sheetname = todayStartTime.getFullYear() + '-' + t...

色々とあって strAPI という Headless な CMS を試してみたいという話が某所で起こったので、まぁ頑張ってください。ローカルで試すんですよねぇ。と思っていたら。 なんか何人かで検証したいのでみんなが触れるところに入れられないかという話があったんでサクッとサーバ立てることにしました。まぁいつも通り AWS の EC2 構成です。 ひとまずは最小構成で構わないとのことなので t3 で行こうと思ったら間違って t3a でAMI展開しちゃいました。 では、お約束の手順となります。ほぼコピペのみでやってます。先人の偉大な方々に感謝です。調べたサイトでみんな npm でやってて、 yarn でやってる人がまったくいなかったので困りました。(自分がゴミレベルなだけだからかもしれませんが、、、 ■手順 1.事前準備 # ホスト名設定 $ sudo hostnamectl set-hostname starapisv # アップデート(パッチ類適用) $ sudo apt -y update $ sudo apt -y upgrade # ubuntuユーザをwww-dataグループに追加 $ sudo usermod -aG www-data ubuntu 2.ミドルウェア類設定 # nginxインストール $ sudo apt-get -y install nginx $ nginx -v nginx version: nginx/1.14.0 (Ubuntu) # node,npmインストール(nパッケージで導入) $ sudo apt install -y nodejs npm $ sudo npm install n -g $ sudo apt install -y nodejs npm $ sudo npm install n -g $ sudo n stable $ sudo apt purge -y nodejs npm $ node -v v12.14.0 $ npm -v 6.13.4 $ exec $SHELL -l # yarnインストール $ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - $ echo "...

前回 の投稿で日本語開発環境までは整えたけど ここから開発環境の構築が必要になってくるんですねぇ。 で、どういう環境が必要かというと今のところは 以下のとおりです。 ・GitHub ・Node.js ・HerokuCLI では始めます。 1.エディタの準備 　vimをインストールします。 　VSCodeを使えればいいんでしょうけど。重そうなのでvimです。 $ sudo apt-get install vim $ sudo update-alternatives --config editor 2.Gitインストール   お約束です。これがないと始まりません。が公式は脆弱性があるバージョンですと!?    ここ の手順に沿って非公式リポジトリからインストールします。 $ sudo apt-get install apt-file $ sudo apt-file update $ sudo apt-file search add-apt-repository $ sudo apt-get install software-properties-common $ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get upgrade $ sudo apt-get install git 3.Node.jsインストール   これも ここ のサイトのまんまインストール $ git clone https://github.com/creationix/nvm.git ~/.nvm $ source ~/.nvm/nvm.sh $ nvm install 8.11.1 4.HerokuCLIインストール 　今回の開発で必要なので入れます。 $ wget -qO- https://cli-assets.heroku.com/install-ubuntu.sh | sh $ heroku --version 環境構築までは手間取ったもののあとはUbuntuなので かなり先人の知恵の蓄積があるのでそこまでトラブらなかった。 Pytho...

HandsonTableでEXCELチックなもの を作ろうとして 去年ごにょごにょしてたけど。まとまった時間がようやく取れたので ひとまずのことはできるようにした。 特にセルに色を付けた状態を保存する箇所は何とか 実装させたくて色々と調べたものの分からず。強引な方法で 解決してます。 枠線とかメニューの日本語化はコンテキストメニュー周りで 問題が出てるみたいでへっぽこの自分では手に負えないので 断念。まぁそれ以外は何とか動くんでこれにて完成？ってことで しかしVisualStudioCodeは結構軽くて便利だったりする。 そんな使いこなしていないけど 以下JSのソース、HTMLとCSSはまんま /*refer http://my-waking-dream.blogspot.jp/2013/12/live-search-filter-for-jquery.html http://ja.stackoverflow.com/questions/20343/handson-table%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E9%96%8B%E7%99%BA http://qiita.com/do_m_gatoru/items/b0f8d1d18b7037e5cba2 http://stackoverflow.com/questions/28309993/anyway-to-filter-rows-with-handsontable http://jsfiddle.net/awyjnbj6/ http://stackoverflow.com/questions/40552974/handsontable-header-search-input-text-is-cleared-intermittently-on-scroll http://stackoverflow.com/questions/33173850/how-do-i-format-the-column-headers-in-handsontable https...

前回 はHandsonTableで色々と実験してみて色々と宿題が残ってました。 その改良を色々と試みてきたわけですがなかなかうまくいかない・・・。 宿題の解決についてはひとまずはできたものもあります。 まだまだ先は長いなぁ。EXCELがいかに偉大かが身にしみました。 それと 質問サイト のご回答のおかげで何とかここまでこぎつけたこと非常に感謝します。 やはり英語やプログラムの地力が不足していることを痛感させられます。 頑張らねば。 ◆残課題リスト 　・検索にヒットしたレコードのみをレコード表示する。 　・検索条件クリアしたらそのデータを再表示する。 　・検索ヘッダー領域を固定する。   　→何とか今回実現、最後の検索ヘッダーがサイズ依存なので少しあれですが 　・着色した色データを保存する。 　・列の枠サイズを取得して保存する。 　・行のサイズを取得して保存する。   　→取りあえず値を取得するところまでは何とかできた。後はこれをどうやって 　　  JSON化してうまくローカルストレージに保存するか。んでどうやって 　　 呼出し時に効率的に反映するか。 　・コメントの内容を取得して保存する。 　　→色々と調べてみたけれどもメソッド自体が動かないのでどうしようもない。 ●HTML ＜!DOCTYPE html＞ ＜html＞ ＜head＞ ＜title＞Handsontable - サンプル＜/title＞ ＜script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"＞＜/script＞ ＜script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.29.1/handsontable.full.min.js"＞＜/script＞ ＜script src="sample06.js"＞＜/script＞ ＜link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontabl...