LANG SELRCT

コードを書く場所

2018年1月31日水曜日

setValuesでセルに関数を入力したい


setFormula() を使えばセル参照もできますが
setValue() を使いたいケースがあったので実現する方法を探してみました

indirect関数を使うと実現できました
range.setValue('=indirect("A"&row())');


比較のために以下のコード.gsでsetFormulaとsetValueを試してみます
  •   var setB = rangeB.setFormula("=A1");
  •   var setC = rangeC.setValue('=indirect("A"&row())');
  •   var setD = rangeD.setValue('="A"&row()');



コード.gs
function set_formula(){
  var sh = SpreadsheetApp.getActiveSheet();
  var rangeB = sh.getRange(1, 2)
  var rangeC = sh.getRange(1, 3);
  var rangeD = sh.getRange(1, 4);
  rangeB.setFormula("=A1");
  rangeC.setValue('=indirect("A"&row())');
  rangeD.setValue('="A"&row()');
}
意訳
この機能がやること
シートを取得して
B1セルを指定して
C1セルを指定して
D1セルを指定して
B1セルに =A1 を入れて
C1セルに =indirect("A"&row())を入れて
D1セルに="A"&row()を入れる



コード.gs実行結果


B1とC1はセル参照ができてD1はセル参照ができないようでした


参考

ドキュメント エディタ ヘルプ / INDIRECT
https://support.google.com/docs/answer/3093377

2018年1月30日火曜日

文字列をUTF16に変換する


漢字を16進数にする方法を調べている時に
その前処理としてUTF16にする方法を試した時の覚書です

「亜」をUTF16にしてみると 20124 になる



コード.gs
function get_utf16(str){
  var str = "亜";
  var utf16 = [];
  for(var i = 0; i < str.length; i++){
    utf16.push(str.charCodeAt(i));
  }
  Logger.log(utf16);
}
意訳
この機能がやること
文字列を指定して
UTF16の結果を入れる配列を用意して
文字列がサロゲートペアの場合は2回繰り返す処理にして
文字列をUTF16にして配列に追加して

追加した配列をログに出す








文字列の「あ」をサロゲートペアの「𠮟」にして実行すると
以下のようにペアでログに出る



関連記事
文字列→UTF16→16進数→文字列に変換する
文字列⇔UTF16⇔16進数の相互変換をする(サロゲートペア対応)


参考

String.prototype.charCodeAt()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt

2018年1月29日月曜日

スプレッドシートからtext/plainファイルを作ってGoogleドライブに保存する


こういうスプレッドシートを


TEXTファイルにしてGoogleドライブに保存する
(保存したファイルを開いた画面↓)


コード.gsの

SS_URL:保存したいシートがあるスプレッドシートのURL
FOLDER_ID:保存先のフォルダのID
FILE_NAME:保存したいファイル名

は任意で設定して下さい



コード.gs
function save_to_drive_csv() {
  var data = get_values();
  create_file(data);
}

function get_values() {
  var ss_url = "SS_URL";
  var ss = SpreadsheetApp.openByUrl(ss_url);
  var sheet = ss.getSheets()[0];
  var last_row = sheet.getLastRow();
  var values = sheet.getRange("A1:B" + last_row).getValues();
  var data = "";
  for(var i = 0; i < values.length; i++){
   data += values[i] + "\r\n";
  }
  return data;
}

function create_file(data) {
  var content_type = "text/plain";
  var file_name = "FILE_NAME";
  var blob = Utilities.newBlob("", content_type, file_name)
  var file = blob.setDataFromString(data, "utf-8");
  var drive = DriveApp.getFolderById("FOLDER_ID");
  drive.createFile(file);
}
意訳
この機能がやること
get_values()を実行して
返ってきた値をcreate_fileに渡す


この機能がやること
スプレッドシートのURLを指定して
開いて
先頭のシートを取得して
データが入っている最終行を取得して
A1:Bの範囲のデータを取得して
行ごとのデータを入れる変数を用意して
dataという入れ物を用意して
行ごとのデータを改行を付けてつなげる

行毎に改行が入ったdataを返す


この機能がやること
content_typeを設定する
ファイル名を設定する
Blob objectを作成して
dataと文字コードを渡し
指定したフォルダに
ファイルを作成する



Arrange


以下のコード2.gsは上記コード.gsの応用で
常用漢字の一覧をテキストファイルにしたくて書いたコードです

すべてを一行で取得すると横長になって見にくいので
50語毎に改行を入れて一行は " "+ で囲んで結合しています
そして最後に前後を" "で囲んでいます

参考:wikipedia 常用漢字一覧

亜から腕はUnicodeとは漢字の順番の異なるSHIFT-JISの順番のため
正規表現で[亜-腕] で範囲選択すると範囲外になる常用漢字が含まれない
なのですべてを含むためにすべてを書き出してみる

ちなみにUTF16にして並べ替えて先頭と末尾で範囲をつくると
[一-𠮟]
で常用漢字は網羅できそうです(範囲内にあるそれ以外の漢字も含まれる)


コード2.gs
function save_to_drive_plain() {
  var data = get_values();
  create_file(data);
}

function get_values() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  var last_row = sheet.getLastRow();
  var values = sheet.getRange("A1:A" + last_row).getValues();
  var data = "";
  for(var i = 0; i < values.length; i++){
    if((i+1) % 50 === 0 ){
      data += values[i] + '"+' + "\r\n" + '"';
    }else{
      data += values[i];
    }
  }
  var result = '"' + data + '"';
  return result;
}

function create_file(data) {
  var content_type = "text/plain";
  var file_name = "常用漢字一覧";
  var blob = Utilities.newBlob("", content_type, file_name)
  var file = blob.setDataFromString(data, "utf-8");
  var drive = DriveApp.getFolderById("FOLDER_ID");
  drive.createFile(file);
}


先頭のシート1のA列に常用漢字を用意して

save_to_drive_plain() を実行すると
Googleドライブの指定したフォルダに以下のようなテキストでファイルが作成されます

結果
"亜哀挨愛曖悪握圧扱宛嵐安案暗以衣位囲医依委威為畏胃尉異移萎偉椅彙意違維慰遺緯域育一壱逸茨芋引印因咽姻"+
"員院淫陰飲隠韻右宇羽雨唄鬱畝浦運雲永泳英映栄営詠影鋭衛易疫益液駅悦越謁閲円延沿炎怨宴媛援園煙猿遠鉛塩"+
"演縁艶汚王凹央応往押旺欧殴桜翁奥横岡屋億憶臆虞乙俺卸音恩温穏下化火加可仮何花佳価果河苛科架夏家荷華菓"+
"貨渦過嫁暇禍靴寡歌箇稼課蚊牙瓦我画芽賀雅餓介回灰会快戒改怪拐悔海界皆械絵開階塊楷解潰壊懐諧貝外劾害崖"+
"涯街慨蓋該概骸垣柿各角拡革格核殻郭覚較隔閣確獲嚇穫学岳楽額顎掛潟括活喝渇割葛滑褐轄且株釜鎌刈干刊甘汗"+
"缶完肝官冠巻看陥乾勘患貫寒喚堪換敢棺款間閑勧寛幹感漢慣管関歓監緩憾還館環簡観韓艦鑑丸含岸岩玩眼頑顔願"+
"企伎危机気岐希忌汽奇祈季紀軌既記起飢鬼帰基寄規亀喜幾揮期棋貴棄毀旗器畿輝機騎技宜偽欺義疑儀戯擬犠議菊"+
"吉喫詰却客脚逆虐九久及弓丘旧休吸朽臼求究泣急級糾宮救球給嗅窮牛去巨居拒拠挙虚許距魚御漁凶共叫狂京享供"+
"協況峡挟狭恐恭胸脅強教郷境橋矯鏡競響驚仰暁業凝曲局極玉巾斤均近金菌勤琴筋僅禁緊錦謹襟吟銀区句苦駆具惧"+
"愚空偶遇隅串屈掘窟熊繰君訓勲薫軍郡群兄刑形系径茎係型契計恵啓掲渓経蛍敬景軽傾携継詣慶憬稽憩警鶏芸迎鯨"+
"隙劇撃激桁欠穴血決結傑潔月犬件見券肩建研県倹兼剣拳軒健険圏堅検嫌献絹遣権憲賢謙鍵繭顕験懸元幻玄言弦限"+
"原現舷減源厳己戸古呼固股虎孤弧故枯個庫湖雇誇鼓錮顧五互午呉後娯悟碁語誤護口工公勾孔功巧広甲交光向后好"+
"江考行坑孝抗攻更効幸拘肯侯厚恒洪皇紅荒郊香候校耕航貢降高康控梗黄喉慌港硬絞項溝鉱構綱酵稿興衡鋼講購乞"+
"号合拷剛傲豪克告谷刻国黒穀酷獄骨駒込頃今困昆恨根婚混痕紺魂墾懇左佐沙査砂唆差詐鎖座挫才再災妻采砕宰栽"+
"彩採済祭斎細菜最裁債催塞歳載際埼在材剤財罪崎作削昨柵索策酢搾錯咲冊札刷刹拶殺察撮擦雑皿三山参桟蚕惨産"+
"傘散算酸賛残斬暫士子支止氏仕史司四市矢旨死糸至伺志私使刺始姉枝祉肢姿思指施師恣紙脂視紫詞歯嗣試詩資飼"+
"誌雌摯賜諮示字寺次耳自似児事侍治持時滋慈辞磁餌璽鹿式識軸七𠮟失室疾執湿嫉漆質実芝写社車舎者射捨赦斜煮"+
"遮謝邪蛇勺尺借酌釈爵若弱寂手主守朱取狩首殊珠酒腫種趣寿受呪授需儒樹収囚州舟秀周宗拾秋臭修袖終羞習週就"+
"衆集愁酬醜蹴襲十汁充住柔重従渋銃獣縦叔祝宿淑粛縮塾熟出述術俊春瞬旬巡盾准殉純循順準潤遵処初所書庶暑署"+
"緒諸女如助序叙徐除小升少召匠床抄肖尚招承昇松沼昭宵将消症祥称笑唱商渉章紹訟勝掌晶焼焦硝粧詔証象傷奨照"+
"詳彰障憧衝賞償礁鐘上丈冗条状乗城浄剰常情場畳蒸縄壌嬢錠譲醸色拭食植殖飾触嘱織職辱尻心申伸臣芯身辛侵信"+
"津神唇娠振浸真針深紳進森診寝慎新審震薪親人刃仁尽迅甚陣尋腎須図水吹垂炊帥粋衰推酔遂睡穂錘随髄枢崇数据"+
"杉裾寸瀬是井世正生成西声制姓征性青斉政星牲省凄逝清盛婿晴勢聖誠精製誓静請整醒税夕斥石赤昔析席脊隻惜戚"+
"責跡積績籍切折拙窃接設雪摂節説舌絶千川仙占先宣専泉浅洗染扇栓旋船戦煎羨腺詮践箋銭銑潜線遷選薦繊鮮全前"+
"善然禅漸膳繕狙阻祖租素措粗組疎訴塑遡礎双壮早争走奏相荘草送倉捜挿桑巣掃曹曽爽窓創喪痩葬装僧想層総遭槽"+
"踪操燥霜騒藻造像増憎蔵贈臓即束足促則息捉速側測俗族属賊続卒率存村孫尊損遜他多汰打妥唾堕惰駄太対体耐待"+
"怠胎退帯泰堆袋逮替貸隊滞態戴大代台第題滝宅択沢卓拓託濯諾濁但達脱奪棚誰丹旦担単炭胆探淡短嘆端綻誕鍛団"+
"男段断弾暖談壇地池知値恥致遅痴稚置緻竹畜逐蓄築秩窒茶着嫡中仲虫沖宙忠抽注昼柱衷酎鋳駐著貯丁弔庁兆町長"+
"挑帳張彫眺釣頂鳥朝脹貼超腸跳徴嘲潮澄調聴懲直勅捗沈珍朕陳賃鎮追椎墜通痛塚漬坪爪鶴低呈廷弟定底抵邸亭貞"+
"帝訂庭逓停偵堤提程艇締諦泥的笛摘滴適敵溺迭哲鉄徹撤天典店点展添転塡田伝殿電斗吐妬徒途都渡塗賭土奴努度"+
"怒刀冬灯当投豆東到逃倒凍唐島桃討透党悼盗陶塔搭棟湯痘登答等筒統稲踏糖頭謄藤闘騰同洞胴動堂童道働銅導瞳"+
"峠匿特得督徳篤毒独読栃凸突届屯豚頓貪鈍曇丼那奈内梨謎鍋南軟難二尼弐匂肉虹日入乳尿任妊忍認寧熱年念捻粘"+
"燃悩納能脳農濃把波派破覇馬婆罵拝杯背肺俳配排敗廃輩売倍梅培陪媒買賠白伯拍泊迫剝舶博薄麦漠縛爆箱箸畑肌"+
"八鉢発髪伐抜罰閥反半氾犯帆汎伴判坂阪板版班畔般販斑飯搬煩頒範繁藩晩番蛮盤比皮妃否批彼披肥非卑飛疲秘被"+
"悲扉費碑罷避尾眉美備微鼻膝肘匹必泌筆姫百氷表俵票評漂標苗秒病描猫品浜貧賓頻敏瓶不夫父付布扶府怖阜附訃"+
"負赴浮婦符富普腐敷膚賦譜侮武部舞封風伏服副幅復福腹複覆払沸仏物粉紛雰噴墳憤奮分文聞丙平兵併並柄陛閉塀"+
"幣弊蔽餅米壁璧癖別蔑片辺返変偏遍編弁便勉歩保哺捕補舗母募墓慕暮簿方包芳邦奉宝抱放法泡胞俸倣峰砲崩訪報"+
"蜂豊飽褒縫亡乏忙坊妨忘防房肪某冒剖紡望傍帽棒貿貌暴膨謀頰北木朴牧睦僕墨撲没勃堀本奔翻凡盆麻摩磨魔毎妹"+
"枚昧埋幕膜枕又末抹万満慢漫未味魅岬密蜜脈妙民眠矛務無夢霧娘名命明迷冥盟銘鳴滅免面綿麺茂模毛妄盲耗猛網"+
"目黙門紋問匁冶夜野弥厄役約訳薬躍闇由油喩愉諭輸癒唯友有勇幽悠郵湧猶裕遊雄誘憂融優与予余誉預幼用羊妖洋"+
"要容庸揚揺葉陽溶腰様瘍踊窯養擁謡曜抑沃浴欲翌翼拉裸羅来雷頼絡落酪辣乱卵覧濫藍欄吏利里理痢裏履璃離陸立"+
"律慄略柳流留竜粒隆硫侶旅虜慮了両良料涼猟陵量僚領寮療瞭糧力緑林厘倫輪隣臨瑠涙累塁類令礼冷励戻例鈴零霊"+
"隷齢麗暦歴列劣烈裂恋連廉練錬呂炉賂路露老労弄郎朗浪廊楼漏籠六録麓論和話賄脇惑枠湾腕"



一行で出したい場合

コード3.gs
function save_to_drive_plain() {
  var data = get_values();
  create_file(data);
}

function get_values() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  var last_row = sheet.getLastRow();
  var values = sheet.getRange("A1:A" + last_row).getValues();
  var data = "";
  for(var i = 0; i < values.length; i++){
   data += values[i];
  }
  return data;
}

function create_file(data) {
  var content_type = "text/plain";
  var file_name = "常用漢字一覧(一行)";
  var blob = Utilities.newBlob("", content_type, file_name)
  var file = blob.setDataFromString(data, "utf-8");
  var drive = DriveApp.getFolderById("FOLDER_ID");
  drive.createFile(file);
}

save_to_drive_plain() を実行すると
Googleドライブの指定したフォルダに以下のようなテキストでファイルが作成されます

結果
亜哀挨愛曖悪握圧扱宛嵐安案暗以衣位囲医依委威為畏胃尉異移萎偉椅彙意違維慰遺緯域育一壱逸茨芋引印因咽姻員院淫陰飲隠韻右宇羽雨唄鬱畝浦運雲永泳英映栄営詠影鋭衛易疫益液駅悦越謁閲円延沿炎怨宴媛援園煙猿遠鉛塩演縁艶汚王凹央応往押旺欧殴桜翁奥横岡屋億憶臆虞乙俺卸音恩温穏下化火加可仮何花佳価果河苛科架夏家荷華菓貨渦過嫁暇禍靴寡歌箇稼課蚊牙瓦我画芽賀雅餓介回灰会快戒改怪拐悔海界皆械絵開階塊楷解潰壊懐諧貝外劾害崖涯街慨蓋該概骸垣柿各角拡革格核殻郭覚較隔閣確獲嚇穫学岳楽額顎掛潟括活喝渇割葛滑褐轄且株釜鎌刈干刊甘汗缶完肝官冠巻看陥乾勘患貫寒喚堪換敢棺款間閑勧寛幹感漢慣管関歓監緩憾還館環簡観韓艦鑑丸含岸岩玩眼頑顔願企伎危机気岐希忌汽奇祈季紀軌既記起飢鬼帰基寄規亀喜幾揮期棋貴棄毀旗器畿輝機騎技宜偽欺義疑儀戯擬犠議菊吉喫詰却客脚逆虐九久及弓丘旧休吸朽臼求究泣急級糾宮救球給嗅窮牛去巨居拒拠挙虚許距魚御漁凶共叫狂京享供協況峡挟狭恐恭胸脅強教郷境橋矯鏡競響驚仰暁業凝曲局極玉巾斤均近金菌勤琴筋僅禁緊錦謹襟吟銀区句苦駆具惧愚空偶遇隅串屈掘窟熊繰君訓勲薫軍郡群兄刑形系径茎係型契計恵啓掲渓経蛍敬景軽傾携継詣慶憬稽憩警鶏芸迎鯨隙劇撃激桁欠穴血決結傑潔月犬件見券肩建研県倹兼剣拳軒健険圏堅検嫌献絹遣権憲賢謙鍵繭顕験懸元幻玄言弦限原現舷減源厳己戸古呼固股虎孤弧故枯個庫湖雇誇鼓錮顧五互午呉後娯悟碁語誤護口工公勾孔功巧広甲交光向后好江考行坑孝抗攻更効幸拘肯侯厚恒洪皇紅荒郊香候校耕航貢降高康控梗黄喉慌港硬絞項溝鉱構綱酵稿興衡鋼講購乞号合拷剛傲豪克告谷刻国黒穀酷獄骨駒込頃今困昆恨根婚混痕紺魂墾懇左佐沙査砂唆差詐鎖座挫才再災妻采砕宰栽彩採済祭斎細菜最裁債催塞歳載際埼在材剤財罪崎作削昨柵索策酢搾錯咲冊札刷刹拶殺察撮擦雑皿三山参桟蚕惨産傘散算酸賛残斬暫士子支止氏仕史司四市矢旨死糸至伺志私使刺始姉枝祉肢姿思指施師恣紙脂視紫詞歯嗣試詩資飼誌雌摯賜諮示字寺次耳自似児事侍治持時滋慈辞磁餌璽鹿式識軸七𠮟失室疾執湿嫉漆質実芝写社車舎者射捨赦斜煮遮謝邪蛇勺尺借酌釈爵若弱寂手主守朱取狩首殊珠酒腫種趣寿受呪授需儒樹収囚州舟秀周宗拾秋臭修袖終羞習週就衆集愁酬醜蹴襲十汁充住柔重従渋銃獣縦叔祝宿淑粛縮塾熟出述術俊春瞬旬巡盾准殉純循順準潤遵処初所書庶暑署緒諸女如助序叙徐除小升少召匠床抄肖尚招承昇松沼昭宵将消症祥称笑唱商渉章紹訟勝掌晶焼焦硝粧詔証象傷奨照詳彰障憧衝賞償礁鐘上丈冗条状乗城浄剰常情場畳蒸縄壌嬢錠譲醸色拭食植殖飾触嘱織職辱尻心申伸臣芯身辛侵信津神唇娠振浸真針深紳進森診寝慎新審震薪親人刃仁尽迅甚陣尋腎須図水吹垂炊帥粋衰推酔遂睡穂錘随髄枢崇数据杉裾寸瀬是井世正生成西声制姓征性青斉政星牲省凄逝清盛婿晴勢聖誠精製誓静請整醒税夕斥石赤昔析席脊隻惜戚責跡積績籍切折拙窃接設雪摂節説舌絶千川仙占先宣専泉浅洗染扇栓旋船戦煎羨腺詮践箋銭銑潜線遷選薦繊鮮全前善然禅漸膳繕狙阻祖租素措粗組疎訴塑遡礎双壮早争走奏相荘草送倉捜挿桑巣掃曹曽爽窓創喪痩葬装僧想層総遭槽踪操燥霜騒藻造像増憎蔵贈臓即束足促則息捉速側測俗族属賊続卒率存村孫尊損遜他多汰打妥唾堕惰駄太対体耐待怠胎退帯泰堆袋逮替貸隊滞態戴大代台第題滝宅択沢卓拓託濯諾濁但達脱奪棚誰丹旦担単炭胆探淡短嘆端綻誕鍛団男段断弾暖談壇地池知値恥致遅痴稚置緻竹畜逐蓄築秩窒茶着嫡中仲虫沖宙忠抽注昼柱衷酎鋳駐著貯丁弔庁兆町長挑帳張彫眺釣頂鳥朝脹貼超腸跳徴嘲潮澄調聴懲直勅捗沈珍朕陳賃鎮追椎墜通痛塚漬坪爪鶴低呈廷弟定底抵邸亭貞帝訂庭逓停偵堤提程艇締諦泥的笛摘滴適敵溺迭哲鉄徹撤天典店点展添転塡田伝殿電斗吐妬徒途都渡塗賭土奴努度怒刀冬灯当投豆東到逃倒凍唐島桃討透党悼盗陶塔搭棟湯痘登答等筒統稲踏糖頭謄藤闘騰同洞胴動堂童道働銅導瞳峠匿特得督徳篤毒独読栃凸突届屯豚頓貪鈍曇丼那奈内梨謎鍋南軟難二尼弐匂肉虹日入乳尿任妊忍認寧熱年念捻粘燃悩納能脳農濃把波派破覇馬婆罵拝杯背肺俳配排敗廃輩売倍梅培陪媒買賠白伯拍泊迫剝舶博薄麦漠縛爆箱箸畑肌八鉢発髪伐抜罰閥反半氾犯帆汎伴判坂阪板版班畔般販斑飯搬煩頒範繁藩晩番蛮盤比皮妃否批彼披肥非卑飛疲秘被悲扉費碑罷避尾眉美備微鼻膝肘匹必泌筆姫百氷表俵票評漂標苗秒病描猫品浜貧賓頻敏瓶不夫父付布扶府怖阜附訃負赴浮婦符富普腐敷膚賦譜侮武部舞封風伏服副幅復福腹複覆払沸仏物粉紛雰噴墳憤奮分文聞丙平兵併並柄陛閉塀幣弊蔽餅米壁璧癖別蔑片辺返変偏遍編弁便勉歩保哺捕補舗母募墓慕暮簿方包芳邦奉宝抱放法泡胞俸倣峰砲崩訪報蜂豊飽褒縫亡乏忙坊妨忘防房肪某冒剖紡望傍帽棒貿貌暴膨謀頰北木朴牧睦僕墨撲没勃堀本奔翻凡盆麻摩磨魔毎妹枚昧埋幕膜枕又末抹万満慢漫未味魅岬密蜜脈妙民眠矛務無夢霧娘名命明迷冥盟銘鳴滅免面綿麺茂模毛妄盲耗猛網目黙門紋問匁冶夜野弥厄役約訳薬躍闇由油喩愉諭輸癒唯友有勇幽悠郵湧猶裕遊雄誘憂融優与予余誉預幼用羊妖洋要容庸揚揺葉陽溶腰様瘍踊窯養擁謡曜抑沃浴欲翌翼拉裸羅来雷頼絡落酪辣乱卵覧濫藍欄吏利里理痢裏履璃離陸立律慄略柳流留竜粒隆硫侶旅虜慮了両良料涼猟陵量僚領寮療瞭糧力緑林厘倫輪隣臨瑠涙累塁類令礼冷励戻例鈴零霊隷齢麗暦歴列劣烈裂恋連廉練錬呂炉賂路露老労弄郎朗浪廊楼漏籠六録麓論和話賄脇惑枠湾腕



参考

Class Utilities

2018年1月28日日曜日

正規表現で文章から全角英数字と記号を抜き出したい /[!-~]+/g



文字列の中から全角英数字と記号を取得したくて調べて書いたコードです

今回書いた全角英数字と記号だけを抜き出す正規表現

 /[!-~]+/g



コード.gs
function get_fullwidth(){
  var str = "abcABC123#abcABC123?かなカナカナ仮名]ひらがなカタカナカタカナ漢字}⼀市ヶ谷代々木";
  var pattern = /[!-~]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
全角英数字と記号のパターン
一致するものを探して
ログに出す








参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Halfwidth and Fullwidth Forms

正規表現で文章から全角記号を抜き出したい /[!-/:-@[-`{-~、-〜”’・]+/g


文字列の中から全角記号を取得したくて調べて書いたコードです
(すべての全角記号は網羅できていない)

Unicode表の中で全角記号はここからここまでという範囲はないため
それらしき範囲とそこから漏れた”’・を追加

 /[!-/:-@[-`{-~、-〜”’・]+/g



コード.gs
function get_symbols(){
  var str = "abcABC123#abcABC123?かなカナカナ仮名]ひらがなカタカナカタカナ漢字}⼀市ヶ谷代々木";
  var pattern = /[!-/:-@[-`{-~、-〜”’・]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
全角記号のパターン
一致するものを探して
ログに出す







参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Halfwidth and Fullwidth Forms

正規表現で文章から半角記号を抜き出したい /[!-\/:-@[-`{-~]+/g


文字列の中から半角記号を取得したくて調べて書いたコードです

今回書いた半角記号だけを抜き出す正規表現

/[!-\/:-@[-`{-~]+/g



コード.gs
function get_symbols(){
  var str = "abcABC123!bcABC123?かなカナカナ仮名!ひらがなカタカナカタカナ漢字?⼀市ヶ谷代々木";
  var pattern = /[!-\/:-@[-`{-~]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
半角記号のパターン
一致するものを探して
ログに出す







[!-\/:-@[-`{-~] の内訳は?


Controls and Basic Latin の中で
記号(以下のハイライトした範囲)を指定しています
!から/
:から@
[から`
{から~

!から/ は 素直に書くと !-/ ですが
/ はそのまま書くと正規表現を閉じてしまいます
\ (後に続く文字が特別な意味を保つ場合にそれを無効にするエスケープ記号)を書くことで文字列の / としています


参考

Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Controls and Basic Latin
http://www.unicode.org/charts/PDF/U0000.pdf

正規表現で文章から半角英数字と記号を抜き出したい /[!-~]+/g


文字列の中から半角英数字と記号を取得したくて調べて書いたコードです

今回書いた半角英数字と記号だけを抜き出す正規表現

/[!-~]+/g



コード.gs
function get_halfwidth(){
  var str = "abcABC123!bcABC123?かなカナカナ仮名!ひらがなカタカナカタカナ漢字?⼀市ヶ谷代々木";
  var pattern = /[!-~]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
半角英数字と記号のパターン
一致するものを探して
ログに出す






参考

Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Controls and Basic Latin
http://www.unicode.org/charts/PDF/U0000.pdf

正規表現で文章から全角英数字を抜き出したい /[a-zA-Z0-9]+/g



文字列の中から全角英数字を取得したくて調べて書いたコードです

今回書いた全角英数字だけを抜き出す正規表現

/[a-zA-Z0-9]+/g



コード.gs
function get_alphanumeric_fullwidth(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[a-zA-Z0-9]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
全角英数字のパターン
一致するものを探して
ログに出す







参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Halfwidth and Fullwidth Forms
http://www.unicode.org/charts/PDF/UFF00.pdf

正規表現で文章から半角英数字だけを抜き出したい /[a-zA-Z0-9]+/g


文字列の中から半角英数字を取得したくて調べて書いたコードです

今回書いた半角英数字だけを抜き出す正規表現

/[a-zA-Z0-9]+/g



コード.gs
function get_alphanumeric(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[a-zA-Z0-9]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
半角英数字のパターン
一致するものを探して
ログに出す







参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Basic Latin (ASCII)

正規表現で文章から全角数字を抜き出したい /[0-9]+/g


文字列の中から全角数字を取得したくて調べて書いたコードです

今回書いた全角数字だけを抜き出す正規表現

/[0-9]+/g



コード.gs
function get_numeric_fullwidth(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[0-9]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
全角数字のパターン
一致するものを探して
ログに出す







参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Halfwidth and Fullwidth Forms
http://www.unicode.org/charts/PDF/UFF00.pdf

正規表現で文章から全角英字(大文字)を抜き出したい /[A-Z]+/g


文字列の中から全角英字(大文字)を取得したくて調べて書いたコードです

今回書いた全角英字(大文字)だけを抜き出す正規表現

/[A-Z]+/g



コード.gs
function get_upper_alphabet_fullwidth(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[A-Z]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
全角英字(大文字)のパターン
一致するものを探して
ログに出す







参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Halfwidth and Fullwidth Forms
http://www.unicode.org/charts/PDF/UFF00.pdf

正規表現で文章から全角英字(小文字)を抜き出したい /[a-z]+/g


文字列の中から全角英字(小文字)を取得したくて調べて書いたコードです

今回書いた全角英字(小文字)だけを抜き出す正規表現

 /[a-z]+/g



コード.gs
function get_lower_alphabet_fullwidth(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[a-z]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
全角英字(小文字)のパターン
一致するものを探して
ログに出す








参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Halfwidth and Fullwidth Forms
http://www.unicode.org/charts/PDF/UFF00.pdf

正規表現で文章から半角数字を抜き出したい /[0-9]+/g


文字列の中から半角数字を取得したくて調べて書いたコードです

今回書いた半角数字だけを抜き出す正規表現

/[0-9]+/g



コード.gs
function get_numeric(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[0-9]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
半角数字のパターン
一致するものを探して
ログに出す







参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Basic Latin (ASCII)

正規表現で文章から半角英字(大文字)を抜き出したい /[A-Z]+/g


文字列の中から半角英字(大文字)を取得したくて調べて書いたコードです

今回書いた半角英字(大文字)だけを抜き出す正規表現

/[A-Z]+/g



コード.gs
function get_upper_alphabet(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[A-Z]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
半角英字(大文字)のパターン
一致するものを探して
ログに出す








参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Basic Latin (ASCII)
http://www.unicode.org/charts/PDF/U0000.pdf

正規表現で文章から半角英字(小文字)を抜き出したい /[a-z]+/g


文字列の中から半角英字(小文字)を取得したくて調べて書いたコードです

今回書いた半角英字(小文字)だけを抜き出す正規表現

/[a-z]+/g



コード.gs
function get_lower_alphabet(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[a-z]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
半角英字(小文字)のパターン
一致するものを探して
ログに出す








参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Basic Latin (ASCII)
http://www.unicode.org/charts/PDF/U0000.pdf

正規表現で文章から半角カタカナだけを抜き出したい /[ヲ-゚]+/g


文字列の中から半角カタカナを取得したくて調べて書いたコードです

今回書いた半角カタカナだけを抜き出す正規表現

/[ヲ-゚]+/g



コード.gs
function get_halfkatakana(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[ヲ-゚]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
半角カタカナのパターン
一致するものを探して
ログに出す






Unicodeチャートの半角カタカナから
http://www.unicode.org/charts/PDF/UFF00.pdf

[ヲ-゚]

としました

ヲ は FF66 です
FF67 の ァ が先頭かと思いきや ヲ が半角カタカナの先頭のよう


文字列
var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";

から

カナ, カタカナ

だけを match を使って取得したログです





参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Halfwidth Katakana
http://www.unicode.org/charts/PDF/UFF00.pdf

正規表現で文章からカタカナだけを抜き出したい /[゠-ヿ]+/g


文字列の中からカタカナを取得したくて調べて書いたコードです

今回書いたカタカナだけを抜き出す正規表現

/[゠-ヿ]+/g



コード.gs
function get_katakana(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[゠-ヿ]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
カタカナのパターン
一致するものを探して
ログに出す




純粋にカタカナだけなら

Unicodeチャートのカタカナから
http://www.unicode.org/charts/PDF/U30A0.pdf

[ァ-ヶ]

まででよさそうですが ゠ から ヿ まで拾って

[゠-ヿ]

までとしました

ちなみに
 ゠ はダブルハイフンで wikipedia
 ヿ は「こと」の組み合わせのようです wikipedia

文字列
var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";

から

カナ, カタカナ

だけを match を使って取得したログです





参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

katakana
http://www.unicode.org/charts/PDF/U30A0.pdf

正規表現で文章からひらがなだけを抜き出したい /[ぁ-ゟー]+/g


文字列の中からひらがなを取得したくて調べて書いたコードです

今回書いたひらがなだけを抜き出す正規表現

/[ぁ-ゟー]+/g



コード.gs
function get_hiragana(){
  var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";
  var pattern = /[ぁ-ゟー]+/g;
  var result = str.match(pattern);
  Logger.log(result);
}
意訳
この機能がやること
探索対象の文字列を用意しておく
ひらがなのパターン
一致するものを探して
ログに出す




純粋にひらがなだけなら

Unicodeチャートのひらがなから
http://www.unicode.org/charts/PDF/U3040.pdf

[ぁ-ゟ]

まででよさそうですが長音の ー も一致させたくて

[ぁ-ゟー]

としました


ちなみに ゟ とは 「より」 の組み合わせらしいです wikipedia

文字列
var str = "abcABC123abcABC123かなカナカナ仮名ひらがなカタカナカタカナ漢字";

から

かな, ひらがな

だけを match を使って取得したログです





参考
Unicode 10.0 Character Code Charts
http://www.unicode.org/charts/

Hiragana
http://www.unicode.org/charts/PDF/U3040.pdf


2018年1月27日土曜日

match, exec, test, searchで文字列探索したときの違いを知りたい


以下4つを使って一致する文字列を正規表現で探してみます
  • match:見つかった文字列を返す
  • exec:見つかった文字列を返す
  • test:見つかったらtrue, 見つからなかったらfalseを返す
  • search:見つかった位置を返す

matchとexecの違いについては g をつけて試してみました



コード.gs
function get_results(){//一致した文字列が配列に返ってくる
  var str = "abc123";
  var pattern = /123/;
  var mat = str.match(pattern);
  var exe = pattern.exec(str);
  var tes = pattern.test(str);
  var sea = str.search(pattern);
  Logger.log([mat, exe,tes, sea]);
}
意訳
この機能がやること
探索対象の文字列を用意する(この中から特定のパターンに一致する文字列を探したい)
探索する文字列のパターンを用意する(正規表現で)
一致した文字列をそのまま返して
一致した文字列をそのまま返して
一致した文字列があればtrue, なければfalseを返して
一致した文字列の開始位置を返して
ログに出す







matchとexecの違いは?

var pattern = /123/;
の場合は違いはない

var pattern = /123/g;
にすると結果が異なる

matchは一致するパターンをすべて返す
execは一致するパターンを一つずつ返していく



コード.gs
function get_results() {
  var str = "abc123abc123";
  var pattern = /123/g;
  var mat = pattern_match(str, pattern);
  var exe = pattern_exec(str, pattern);
  Logger.log([mat, exe]);
}

function pattern_match(str, pattern) {
  var array = [];
  var results = str.match(pattern);
  for (var i = 0; i < results.length; i++) {
    array.push(results[i])
  }
  return array;
}

function pattern_exec(str, pattern) {
  var array = [];
  while (pattern.exec(str) !== null) {
    array.push("発見!次の探索開始位置は" + pattern.lastIndex);
  }
  return array;
}
意訳
この機能がやること
探索対象の文字列を用意する(この中から特定のパターンに一致する文字列を探したい)
探索する文字列のパターンを用意する(正規表現で)
matchで一致する結果を取得して
execで一致する結果を取得して
ログに出す


この機能がやること
結果の入れ物を用意して
strの中にpatternに一致する文字列をすべて取得する
見つけた数だけ以下を繰り返す
arrayに見つけた文字列を追加する

すべて追加されたarrayを返す


この機能がやること
結果の入れ物を用意して
strの中でpatternに一致する文字列がなくなるまで探す
見つけたら次の探索開始位置とともにarrayに追加する

すべて追加されたarrayを返す






参考

String.prototype.match() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

RegExp.prototype.exec() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

RegExp.prototype.test() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

String.prototype.search() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/search

JavaScriptで現在実行中の関数名を取得したい


arguments.callee.name でその関数名を取得できる



コード.gs
function get_function_name(){
  var name = arguments.callee.name;
  Logger.log(name);
}
意訳
この機能がやること
この機能の名前を取得して
ログに出す






補足


関数の中身を見たい

arguments.callee で現在実行中の関数の中身を取得できる




コード.gs
function get_function_code(){
  var code = arguments.callee;
  Logger.log(code);
}
意訳
この機能がやること
この機能の中身を取得して
ログに出す







参考

arguments.callee - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments/callee

evalを使ってみる


evalにはeval() - JavaScript | MDNにも書かれているように意図しないコードが実行されるリスクがあるため別の方法で実現するのが良さそうです

ここではどんなことができるのか試したコードを備忘録として書いておきます



コード.gs
function create_vars(){
  var words = ["abc", "ABC"];
  
  for (var i = 0; i < words.length; i++) {
    var str = "var word" + i + "=" + '"' + words[i] + '"';
    eval(str);
  }

  var result = [];
  for (var i = 0; i < words.length; i++) {
     result.push(eval("word" + i));
  }
  Logger.log(result)
}
意訳
この機能がやること
単語を入れた配列を用意して

単語の数だけ以下を繰り返す
var word0 = words[0];とvar word1 = words[1];を文字列で作って
それらをjavascriptのコードとして扱えるようにする


変数の値を入れる入れ物を用意して
単語の数だけ以下を繰り返す
resultにword0の値を追加して、 word1の値も追加して

ログに出す








参考

2018年1月25日木曜日

JIRA APIで特定のissueのコメントを取得したい


JIRAの特定の課題のコメントをすべて取得したくて書いたコードです


今回取得するコメント情報
  • コメントした人
  • コメントした日時
  • コメント

コード.gsの以下の変数を設定して実行すると上記の情報がログに出ます
  • ISSUE_KEY
  • SITENAME
  • LOGIN_EMAIL
  • LOGIN_PASSWORD



コード.gs
function get_comment_gs(){
  var key = "ISSUE_KEY"
  var response = get_issue(key);
  var jobj = JSON.parse(response);
  var fields = jobj["fields"]
  var comments = fields["comment"]["comments"];
  var len = comments.length;
  var concat = "";
  for(var i = 0; i < len; i++){
    var comment = comments[i]["body"];
    var created = comments[i]["created"];
    var author = comments[i]["updateAuthor"]["emailAddress"];
    created = Utilities.formatDate(new Date(created), 'Asia/Tokyo', 'yyyy/MM/dd-HH:mm:ss');
    concat += author + "\n" + created + "\n" + comment + "\n\n";
  }
  var result = [concat, len]
  Logger.log(result);
}

function get_issue(key) {
  var ISSUE_URL = 'https://SITENAME.atlassian.net/rest/api/2/issue/';
  var token = get_token();
  var options = {
    contentType: "application/json",
    headers: {"Authorization": " Basic " + token}
  };
  var url = ISSUE_URL + key;
  var response = UrlFetchApp.fetch(url, options);
  return response;
}

function get_token() {
  var id = "LOGIN_EMAIL";
  var pw = "LOGIN_PASSWORD";
  var token = Utilities.base64Encode(id + ":" + pw);
  return token;
}
意訳
この機能がやること
課題のKEYを指定する
get_issueに渡して結果を取得して
JSONをオブジェクトに変換して
fieldsを取得して
コメントをすべて取得して
コメントの数を取得して
すべてのコメントを入れる入れ物を用意して
コメントの数だけ以下を繰り返す
コメントの内容を取得して
コメントの日付けを取得して
コメントした人のemailを取得して
日付けをフォーマットして
改行を入れて結合していく

すべてのコメントとコメント数を
ログに出す


この機能がやること
issueのapiをたたくURLをISSUE_URLに入れる
get_token()からtokenを取得して
optionのオブジェクトを作る
contentType は "application/json"
headers は  {"Authorization": " Basic " + token}

urlにISSUE_URL + keyを入れて
optionを付けてデータを取得して
返す


この機能がやること
JIRAのログインに使っているemailと
パスワードを
base64Encodeでエンコードして
返す



2018年1月23日火曜日

入力欄に入力候補を表示する datalist

HTML Serviceでこういう入力欄を作る


12星座の入力候補を表示してみる




aを入力すると
aに一致するものが候補に出る



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <input type="text" list="star_signs">
    <datalist id="star_signs">
      <option value="Aries">
      <option value="Taurus">
      <option value="Gemini">
      <option value="Cancer">
      <option value="Leo">
      <option value="Virgo">
      <option value="Libra">
      <option value="Scorpius">
      <option value="Sagittarius">
      <option value="Capriconus">
      <option value="Aquarius">
      <option value="Pisces">
    </datalist>
  </body>
</html>
意訳
これはHTML5文書です


入力欄を置く
入力候補のリストを置く
候補をoptionに入れる
















2018年1月22日月曜日

文字列を折り返し表示させない white-space: nowrap


何も指定しないと文字が折り返される


white-space: nowrap を設定すると
文字が折り返されない




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
.nowrap { 
  white-space: nowrap;
}
  </style>
  </head>
  <body>
    <label>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</label>
    <br>
    <br>
    <label class="nowrap">いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</label>
  </body>
</html>
意訳
これはHTML5文書です



one_lineの
行の折り返しをしない




labelを置く


ラベルを置く → classはone_line




flexboxでブロック要素を横に並べる


このような配置の ブロック要素 <p></p> を flexbox を使って実現する

blue

green



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .flex_div {
      display: flex;
      flex-direction: row;
    }

    .flex_div > p {
      padding: 10px;
      background-color: green;
      color: white;
    }

    .flex_div > p:nth-child(1) {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="flex_div">
    <p>blue</p>
    <p>green</p>
  </div>
</body>
</html>
意訳
これはHTML5文書です



flex_divの
flexで表示する
横方向に


flex_divの中のp要素の
余白を設定
背景色を設定
文字色を設定


flex_divの中のp要素の1つめの
背景色を設定する




div要素を置く → classはflex_div
p要素を置く
p要素を置く





オブジェクトの値を取得してHTML要素の属性値に入れたい


こういうHTML要素があって
  <label id="HARE"></label>
  <label id="AME"></label>
  <label id="YUKI"></label>


それらの要素を取得して
      var hare = document.getElementById("HARE");
      var ame = document.getElementById("AME");
      var yuki = document.getElementById("YUKI");


こういうオブジェクト作って
      var obj = {
        "hare": hare,
        "ame": ame,
        "yuki": yuki
      }


別で作ったこういうオブジェクトの値を
HTML要素のid, value, name, テキストに設定したい
    var data = {
      "hare": ["はれ", "ハレ", "晴れ"],
      "ame": ["あめ", "アメ", "雨"],
      "yuki": ["ゆき", "ユキ", "雪"],
    }


このように



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <label id="HARE"></label>
  <label id="AME"></label>
  <label id="YUKI"></label>
  <script>
    document.addEventListener('DOMContentLoaded', set_data);

    var data = {
      "hare": ["はれ", "ハレ", "晴れ"],
      "ame": ["あめ", "アメ", "雨"],
      "yuki": ["ゆき", "ユキ", "雪"],
    }

    function set_data() {
      var hare = document.getElementById("HARE");
      var ame = document.getElementById("AME");
      var yuki = document.getElementById("YUKI");

      var obj = {
        "hare": hare,
        "ame": ame,
        "yuki": yuki
      }

      for (var i = 0; i < Object.keys(obj).length; i++) {
        var key = Object.keys(obj)[i];
        obj[key].setAttribute("id", key);
        obj[key].setAttribute("value", data[key][0]);
        obj[key].setAttribute("name", data[key][1]);
        obj[key].textContent = data[key][2];
      }
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


ラベルを置く → id は HARE 
ラベルを置く → id は AME
ラベルを置く → id は YUKI 

HTMLドキュメントが読み込まれたらset_dataを実行する

dataオブジェクトを用意する





この機能がやること
id が hare の要素を取得して
id が ame の要素を取得して
id が yuki の要素を取得して

dateオブジェクトと同じ key にして取得した要素を値に入れる





objのkeyの数だけ以下を繰り返す
objのkeyを一つずつ取得して → i が 0 の場合は hare
それを要素のidに設定し
dataオブジェクトからkeyに一致する値(例では配列)を取得して0番目の値を要素のvalueに設定して
同じようにnameには1番目の値を
テキストには2番目の値を設定する








HTML要素をオブジェクトに入れずに設定する場合

これを別の書き方で実現できないかと思って試したのが上記のindex.htmlです


index.html
<!DOCTYPE html>
<html>
<body>
  <label id="HARE"></label>
  <label id="AME"></label>
  <label id="YUKI"></label>
  <script>
    document.addEventListener('DOMContentLoaded', set_data);

    var data = {
      "hare": ["はれ", "ハレ", "晴れ"],
      "ame": ["あめ", "アメ", "雨"],
      "yuki": ["ゆき", "ユキ", "雪"],
    }

    function set_data() {
      var hare = document.getElementById("HARE");
      var ame = document.getElementById("AME");
      var yuki = document.getElementById("YUKI");

      hare.setAttribute("id", "hare");
      hare.setAttribute("value", data["hare"][0]);
      hare.setAttribute("name", data["hare"][1]);
      hare.textContent = data["hare"][2];
      ame.setAttribute("id", "ame");
      ame.setAttribute("value", data["ame"][0]);
      ame.setAttribute("name", data["ame"][1]);
      ame.textContent = data["ame"][2];
      yuki.setAttribute("id", "yuki");
      yuki.setAttribute("value", data["yuki"][0]);
      yuki.setAttribute("name", data["yuki"][1]);
      yuki.textContent = data["yuki"][2];
    }
  </script>
</body>
</html>



JavaScriptでオブジェクトのkeys一覧を取得したい


このようなオブジェクトがあって

var obj =
    {
      "aaa": "AAA",
      "bbb": "BBB",
      "ccc": "CCC"
    };


このようにkeysを配列で取得したい


そしてついでにオブジェクトの要素数も取得したい




コード.gs
var obj = 
    {
      "aaa": "AAA",
      "bbb": "BBB",
      "ccc": "CCC"
    };
function get_keys(){
  var keys = Object.keys(obj);
  var length = keys.length;
  Logger.log([keys, length]);
}
意訳
オブジェクトを用意しておく





この機能がやること
オブジェクトのkeyをすべて取得して
keyの数を取得して
ログに出す



参考

Object.keys()
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

指定した西暦の年末の曜日を取得する


今月の年末の日付と曜日を取得したい


このように


取得方法

  • 年末の取得
    • new Date(year, 12, 0)
      • yearの13月の1日の前日
        • 月は0から始まるので0が1月→12は13月
      • つまり翌年の1/1の前日
      • つまり今年の12/31
  • 曜日の取得
    • 日本語で全曜日を用意する
    • .getDay()で曜日番号を取得する
    • その番号の位置にある日本語の曜日を取得する



コード.gs
var SEVEN_DAYS = "日月火水木金土";
function get_yearend() {
  var year = 2018;
  var new_date = new Date(year, 12, 0);
  var date = Utilities.formatDate(new_date, 'Asia/Tokyo', 'yyyy-MM-dd');
  var day_num = new_date.getDay();
  var day = SEVEN_DAYS[day_num];
  var result = [date, day]
  Logger.log(result);
}
意訳
曜日を文字列で用意しておく
この機能がやること
西暦を指定する
来年の1/1の前日を取得して
yyyy-MM-dd形式にして
曜日の番号を取得して
SEVEN_DAYSの中から曜日を取得して
resultに入れて
ログに出す




参考

JavaScript setDate() Method
https://www.w3schools.com/jsref/jsref_setdate.asp

指定した日付けからその月末と曜日を取得する


今月の月末の日付と曜日を取得したい


このように


月末は31とは限らず
30だったり
28だったり
29だったりする


取得方法

  • 月末の取得
    • new Date(年, 月, 日) の日を 0 にすると前日を取得することを利用する
    • 来月の0日は来月の1日の前日になる
    • つまり今月の末日になる
  • 曜日の取得
    • 日本語で全曜日を用意する
    • .getDay()で曜日番号を取得する
    • その番号の位置にある日本語の曜日を取得する




コード.gs
var SEVEN_DAYS = "日月火水木金土";
function get_monthend() {
  var add = 1;
  var now = new Date();
  var this_year = now.getFullYear();
  var this_month = now.getMonth();
  var target_date = 0;
  var new_date = new Date(this_year, this_month + add, target_date);
  var date = Utilities.formatDate(new_date, 'Asia/Tokyo', 'yyyy-MM-dd');
  var day_num = new_date.getDay();
  var day = SEVEN_DAYS[day_num];
  var result = [date, day]
  Logger.log(result);
}
意訳
曜日を文字列で用意しておく
この機能がやること
当月から何ヶ月先にするか指定する(1なら翌月)
現在日時を取得する
年を取得する
月を取得
日付を0にして(0にすると1日の前日を取得する)
翌月の0日(当月の末日)を取得して
yyyy-MM-dd形式にして
曜日の番号を取得して
SEVEN_DAYSの中から曜日を取得して
resultに入れて
ログに出す




参考

JavaScript setDate() Method
https://www.w3schools.com/jsref/jsref_setdate.asp

2018年1月21日日曜日

canvasで円を描く


こういう円を描いてみる



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="360" height="240"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    var x = 100;
    var y = 75;
    var r = 50;
    var start_angle = 0;
    var end_angle = 2 * Math.PI;
    var counterclockwise = true;
    context.arc(x, y, r, start_angle, end_angle, counterclockwise);
    context.stroke();
  </script>
</body>
</html>
意訳
これはHTML5文書です


canvasを置く

canvasを取得して
2次元の描画機能を有効にして
パス(軌道)の描画を新しく始める
x座標
y座標
半径
開始角度
終了角度
反時計回り
context.arc( x座標, y座標, 半径, 開始角度, 終了角度, 時計回り)を設定して
描く





参考

HTML canvas arc() Method
https://www.w3schools.com/tags/canvas_arc.asp

列内で特定の値に一致する行番号を取得する


このような値が入ったシートを用意して

「え」の行の2列目(B列)に値を入れたい


こんなふうに

A列の中で「え」が何行目にあるのかを見つければ実現できる



コード.gs
function input_value(){
 var key = "え";
 var col = "A";
 var sh = SpreadsheetApp.getActiveSheet();  
 var row = get_row(key, col, sh);
 sh.getRange(row, 2).setValue("ここ")
}

function get_row(key, col, sh){
 var array = get_array(sh, col);
 var row = array.indexOf(key) + 1;
 return row;
}

function get_array(sh, col) {
  var last_row = sh.getLastRow();
  var range = sh.getRange(col + "1:" + col + last_row)
  var values = range.getValues();
  var array = [];
  for(var i = 0; i < values.length; i++){
    array.push(values[i][0]);
  }
  return array;
}
意訳
この機能がやること
探すテキストを指定して
探す列を指定して
シートを取得して
get_rowに渡して行番号を取得して
その行の2列目に値を入力する


この機能がやること
受け取ったシートと列をget_arrayに渡して値を配列で取得して
その中でkeywordが何番目にあるか見つけて
返す


この機能がやること
受け取ったシートでデータが入力されている最終行を取得して
受け取った列の1行目から最終行を選択して
値をすべて取得して
配列の入れ物を用意して
値の数だけ以下を繰り返す
arrayに一つずつ値を入れて

全部入った配列を返す



disabledとreadOnly


disabled と readOnly の違いを実際に書いて試してみました









この例ではsubmitを押してもどこにも送信されませんが
記事の下の方にあるコード2.gsで作ったアプリケーションに飛ばすと
送信された中身を取得することができます



disabled と readOnly の違いを個人的にまとめたもの

disabed
  • 要素を無効にする
  • 選択できない
    • ボタンやセレクトボックス等を選択不可にしたい時に使える
    • テキストエリアへの入力も無効にできる
  • formのsubmit時にnameとvalueが送信されない
  • HTML内で直接設定する場合
    • disabled または disabled="disabled"
  • JavaScriptで変更する場合
    • element.disabled = true または element.disabled = "disabled"

readOnly
  • 読み取り専用
  • 選択できる
    • テキストエリアの入力を無効にしたい時に使える
    • ボタンやセレクトボックス等は選択できる
  • formのsubmit時にnameとvalueが送信される
  • HTML内で直接設定する場合
    • readonly または readonly="readonly" 
    • readOnly でも同じ
  • JavaScriptで変更する場合
    • element.readOnly = "readonly" または element.readOnly = true
    • element.readonly だと設定できない



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <form id="form" method="get" action="URL">
    <label>readOnly</label><br>
      <input type="text" name="read" value="text1" readOnly>
      <select name="select1" readOnly>
        <option>option1-1</option>
        <option>option1-2</option>
      </select>
      <br>
      <br>
      <label>disabled</label><br>
      <input type="text" name="dis" value="text2" disabled>
      <select name="select2" disabled>
        <option>option2-1</option>
        <option>option2-2</option>
      </select>
      <br>
      <br>
      <button type="submit">submit</button>
    </form>
  </body>
</html>
意訳
これはHTML5文書です


formを置く(methodはgetでactionにはフォーム送信を受け取る側のURLを設定)
ラベルを置く
readOnlyのテキストボックスを置く
readOnlyのセレクトボックスを置く
選択肢1
選択肢2



ラベルを置く
disabledのテキストボックスを置く
disabledのセレクトボックスを置く
選択肢1
選択肢2



submitボタンを置く





送信された中身を見たい


formのsubmit時にnameとvalueが送信されるかどうか
実際に送信した際のデータの中身を見てみたい

ということで受け取ったデータを返すアプリケーションを別途作って確認してみます


手順
  1. コード.gsとは別にもう一つスクリプトファイルを作成する
  2. 以下のコード2.gsを書いて保存する
  3. 公開メニューからWebアプリケーションとして導入する
  4. 作成したアプリケーションのURLをコピーする
  5. コード.gsの action="URL" のURLにペーストする
  6. コード.gsのWebアプリケーションを開いて submit ボタンをクリックする



コード2.gs
function doGet(e) {
  var html = "<p>" + JSON.stringify(e.parameter) + "</p>";
  var xframe_option = HtmlService.XFrameOptionsMode.ALLOWALL;
  var output = HtmlService.createHtmlOutput(html).setXFrameOptionsMode(xframe_option);
  return output;         
}
意訳
この機能がやること
受け取ったパラメータをJSONに変換してp要素に入れて
XFrameOptionsModeをALLOWALLにして
HTMLを作って
返す




上記の手順1〜6を実行後
以下のような画面が表示されます


readOnlyのnameとvalueは送信されていますが
disabledのnameとvalueは送信されていないことがわかります


readOnlyの要素

<input type="text" name="read" value="text1" readOnly>
<select name="select1" readOnly>
  <option>option1-1</option>
  <option>option1-2</option>
</select>


テキストボックスの name=read で value=text1
セレクトボックスの name=select1 で デフォルトで選択されている value=option1-1
これらは送信されている


disabledの要素

<input type="text" name="dis" value="text2" disabled>
<select name="select2" disabled>
  <option>option2-1</option>
  <option>option2-2</option>
</select>


テキストボックスの name=dis で value=text2
セレクトボックスの name=select2 で デフォルトで選択されている value=option2-1
これらは送信されていない



Google Driveに保存できるファイルサイズと形式


スプレッドシートのひとつのファイルのセル数の上限は500万セル等
Googleドライブに保存できるファイルにはファイルサイズや形式が定められています


参考
Google ドライブに保管可能なファイル
https://support.google.com/drive/answer/37603?hl=ja

2018年1月20日土曜日

HTML要素を動的に作りたい(div)と子要素

JavaScriptでdivを動的に作る


このようにdivを3つ作成してその中にテキストエリアとボタンも作成するコードの例です




コード.gs
function doGet(){
 return HtmlService.createHtmlOutputFromFile('index'); 
}
意訳
この処理は以下を実行する
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <div id="main_div">
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', create_elements);

    function create_elements() {
      for (var i = 0; i < 3; i++) {
        var div = create_div(i);
        create_ta(div, i);
        create_bt(div, i);
      }
    }

    function create_div(i) {
      var main_div = document.getElementById('main_div');
      var div = document.createElement('div');
      div.setAttribute("id", "div" + i);
      main_div.appendChild(div);
      return div;
    }

    function create_ta(div, i) {
      var ta = document.createElement('textarea');
      ta.textContent = "textarea" + i;
      ta.setAttribute("id", "ta" + i);
      div.appendChild(ta);
    }

    function create_bt(div, i) {
      var bt = document.createElement('button');
      bt.textContent = "button" + i;
      bt.setAttribute("id", "bt" + i);
      div.appendChild(bt);
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


divを置く(idはmain_div)


HTMLドキュメントの読み込みが完了したらcreate_divを実行する

この機能がやること
以下の処理を3回繰り返す
create_div に i を渡して
create_ta に div と i を渡して
create_bt に div と i を渡す



この機能がやること
idがmain_divの要素を取得して
div要素を作成して
idを設定して
main_divに追加して
divを返す


この機能がやること
テキストエリアの要素を作成して
テキストを設定して
idを設定して
divに追加する


この機能がやること
ボタン要素を作成して
ボタンのテキストを設定して
idを設定して
divに追加する






関連記事

ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
HTMLでページを作る



参考

HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/