STUDY MEMO

勉強した内容をアウトプットしていきます。

adobeのインストールエラー対処

creative cloudが使えなくなったので、再インストールしようとしたが、以下のエラーが表示された。

Image from Gyazo

考察

702エラーは権限の不足が原因ということらしい。
エラー対処の方法はディスクユーティリティでアクセス権を修復するように書いてあるが、
Sierra 以降の macOS でアクセス権の修復を手動で行う方法 (フリーソフト OnyX を使う方法) - Macにスイッチしました
でも記載されているように最近のMacOSにはfirstaidで自動で修復されるようになったようで、
公式で記載されているエラー解消ができなかった。
firstaidしてもダメ、再起動してもダメ。

同様のエラーがあったというのをtwitterで見かけたが、adobeに相談してもAppleに相談するように、とのこと。
twitterの主はそれを信じず、自己解決したそう。
そこへ解決法が記載されていたのでそれを使用してみたところ、解決できた。

問題はアクセス権限が不足しているということ。
private/tmpはファイルの一時保管場所とのことで、インストール時にpermission deniedが出る時はここのアクセス制限がおかしくなっている時、らしい。

hituzi-ando.hatenablog.com

MacOSのアップデートの際にrootでオーバライドされてしまうようになってしまったという記事を見たことがあるのでそれが原因かもしれない。

対処法

$ sudo chmod 1777 /private/tmp

sudo:rootユーザー権限が必要なコマンドを実行。
※同じような用途のコマンドに「su」があるが、実行時rootのパスワードが必要となる。
chmod:ファイルやディレクトリのアクセス権(パーミッション)を変更
1777:すべてのユーザがファイルおよびディレクトリを作成書き込みを行えるようになり、しかし、作成したファイルやディレクトリを削除出来るのは所有者だけとうパーミッション

参考

【 sudo 】コマンド――スーパーユーザー(rootユーザー)の権限でコマンドを実行する:Linux基本コマンドTips(68) - @IT

今さら聞きづらい「ファイルパーミッション」について (フェンリル | デベロッパーズブログ)

chmod? chown? よくわからんって人のための、ファイル権限系まとめ - Qiita

【Linux初心者向け】スティッキービットとは?と設定方法

< Node.js > twitter API v2のツイート取得

環境設定

You will need to have Node.js installed to run this code. All Node.js examples use needle as the HTTP client, which needs to be npm installed. For OAuth with user context requests, you'll need to install the got and oauth-1.0a packages.

npm install needle  
npm install got  
npm install oauth-1.0a  

参考:GitHub - twitterdev/Twitter-API-v2-sample-code: Sample code for the Twitter API early access endpoints (Python, Java, Ruby, and Node.js).

コード

const needle = require('needle');

// The code below sets the bearer token from your environment variables
// To set environment variables on macOS or Linux, run the export command below from the terminal:
// export BEARER_TOKEN='YOUR-TOKEN'
const token = process.env.BEARER_TOKEN

const endpointUrl = "https://api.twitter.com/2/tweets/search/recent";

async function getRequest() {
  // Edit query parameters below
  // specify a search query, and any additional fields that are required
  // by default, only the Tweet ID and text fields are returned
  const params = {
    'query': 'from:アカウント名 -is:retweet -is:reply', //リツイートとリプライを除く
    // 'tweet.fields': 'author_id'
  }

  const res = await needle('get', endpointUrl, params, {
    headers: {
      "User-Agent": "v2RecentSearchJS",
      "authorization": `Bearer ${token}`
    }
  })

  if (res.body) {
    return res.body;
  } else {
    throw new Error('Unsuccessful request');
  }
}

(async () => {

  try {
    // Make request
    const response = await getRequest();
    console.dir(response, {
      depth: null
    });

  } catch (e) {
    console.log(e);
    process.exit(-1);
  }
  process.exit();
})();

参考

GET /2/tweets/search/recent | Twitter Developer

Twitter-API-v2-sample-code/recent_search.js at master · twitterdev/Twitter-API-v2-sample-code · GitHub

<JavaScript> for文、while文

for文

let fruits = ["banana", "apple", "lemon"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

実行結果

$ node test.js
banana
apple
lemon

while文

無限ループ

while (true) {
  console.log("hello");
}

条件を満たしたら終了

while (true) {
  var num = Math.random();
  console.log("hello");
  if (num > 0.98) //0.98より大きい数字が出たらbreak
    break;
}

<JavaScript> 関数

構文

function 関数名(引数){
  処理
};

関数名(引数);で、{}内の処理が呼び出される。

引数有りの場合

function num(a) {
  console.log(a);
}
num(1);

実行結果

$ node test.js
1

引数なしの場合

function num() {
  console.log(1);
}
num();

実行結果

$ node test.js
1

引数が複数の場合

function sum(a, b) {
  console.log(a + b);
}
sum(1, 2);

実行結果

$ node test.js
3

関数の返り値を変数に代入

関数の中で処理した結果を取得したい場合は返り値を指定することが可能。 その場合はreturnで返り値を指定する。
return以降に記載した処理は実行されない。

function sum(c, d) {
  return (c + d);
}

let result = sum(1, 2);
console.log(result);

実行結果

$ node test.js
3

参考

JavaScript初心者がNode.jsでTwitterのBotを作って遊べるようになるための本 | 中野 仁 | 工学 | Kindleストア | Amazon

<JavaScript> 配列

配列

配列の宣言と要素の挿入。
要素は添字で呼び出せる。

let array = [1, 2, "str", {}];

console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
console.log(array[3]);
$ node test.js
1
2
str
{}

配列の追加

後ろから追加するのは.push()メソッド、
前から追加するのは.unshift()メソッド

pushメソッドの場合

let array = [1, 2, "str", {}];
console.log(array);
array.push(3);
console.log(array);

実行結果

$ node test.js
[ 1, 2, 'str', {} ]
[ 1, 2, 'str', {}, 3 ]

unshiftメソッドの場合

let array = [1, 2, "str", {}];
console.log(array);
array.unshift(3);
console.log(array);

実行結果

$ node test.js
[ 1, 2, 'str', {} ]
[ 3, 1, 2, 'str', {} ]

要素を削除

後ろから追加するのは.pop()メソッド、
前から追加するのは.shift()メソッド

pop()メソッド

後ろの要素を削除

let array = [1, 2, "str", {}];
console.log(array);
array.pop();
console.log(array);

実行結果

$ node test.js
[ 1, 2, 'str', {} ]
[ 1, 2, 'str' ]

shift()メソッド

前の要素を削除

let array = [1, 2, "str", {}];
console.log(array);
array.shift();
console.log(array);

実行結果

$ node test.js
[ 1, 2, 'str', {} ]
[ 2, 'str', {} ]

配列の任意の値を変更

位置を指定して代入する。

let array = [1, 2, "str", {}];
console.log(array);
array[0] = 5;
console.log(array);

実行結果

$ node test.js
[ 1, 2, 'str', {} ]
[ 5, 2, 'str', {} ]

参考

Array.prototype.push() - JavaScript | MDN

Array.prototype.unshift() - JavaScript | MDN

Array.prototype.pop() - JavaScript | MDN

Array.prototype.shift() - JavaScript | MDN

<JavaScript> オブジェクト

オブジェクト

オブジェクトの生成は{}で任意のプロパティの組を囲むことで定義する。
オブジェクトの後に「.キー」または「[]」のなかにキーを記載することでプロパティの値にアクセスできる。
また、プロパティの削除はdeleteを使用することで実施できる。

test.js

let obj = {
  "fruits": "りんご",
  "vegetables": "きゅうり"
};

// オブジェクトの後に.キーを置く
console.log(obj.fruits);
// オブジェクトの後[]をおいて、[]のなかにキーを置く
console.log(obj["vegetables"]);


// プロパティの削除
delete obj["fruits"];
console.log(obj.fruits);

実行結果

$ node test.js
りんご
きゅうり
undefined

プロパティの存在を確認

in演算子を使う場合

in演算子は、指定されたプロパティが、指定されたオブジェクトに存在する場合trueを返す。

let obj = {
  "fruits": "りんご",
  "vegetables": "きゅうり"
};

let key = "fruits";
// let key = "bana";
if (key in obj) {
  console.log("true");
} else {
  console.log("false");
}

実行結果

$ node test.js
true
// let key = "bana"の時はfalseになる。

Object.prototype.hasOwnProperty()を使う場合

hasOwnProperty() メソッドは、オブジェクトが指定されたプロパティを持っているかどうかを示す。

let obj = {
  "fruits": "りんご",
  "vegetables": "きゅうり"
};

console.log(obj.hasOwnProperty("fruits"));
console.log(obj.hasOwnProperty("bana"));

実行結果

$ node test.js
true
false

プロパティの保護

例えconstで指定していても、プロパティが修正されてしまうことがある。
それを防ぐためにはObject.freeze()メソッドを使用する。 Object.freeze()メソッドはオブジェクトを凍結し、凍結されたオブジェクトは変更できなくなる。
オブジェクトを凍結すると、新しいプロパティを追加したり、既存のプロパティを削除したりすることができなくなり、既存のプロパティに対する列挙可否、構成可否、書き込み可否の変更ができなくなり、既存のプロパティの値が変更できなくなる。

let obj = {
  "fruits": "りんご",
  "vegetables": "きゅうり"
};

Object.freeze(obj);

obj.fruits = "hi";
console.log(obj);

実行結果

$ node test.js
{ fruits: 'りんご', vegetables: 'きゅうり' }

無名関数の要素化

オブジェクトは名前のない関数(無名関数)を要素化できる。

// オブジェクトの宣言
const o = {
};

o["function"] = function () {
  console.log("well done")
};
o.function();
console.log(o);

実行結果

$ node test.js
well done
{ function: [Function (anonymous)] }

参考

in - JavaScript | MDN

Object.prototype.hasOwnProperty() - JavaScript | MDN

Object.freeze() - JavaScript | MDN

< Node.js > プログラムの実行時間を取得する

console.time()とconsole.timeEnd()を併用することで、
この2つに挟まれたプログラムの実行時間を計測することができる。

console.time('timer name')
//ここの処理をタイマーで測定
let sum = 0;
for(let i = 0; i<10000; i++){
  sum += Math.random()
}
//
console.timeEnd('timer name');

実行

$ node test.js
timer name: 0.876ms

参考

console.time() -> Console.time() - Web API | MDN
console.timeEnd() -> console.timeEnd - Web API | MDN
Math.random() -> Math.random() - JavaScript | MDN

スプレットシートのショートカット一覧

スプシのショートカットの備忘録。
引用は
Google スプレッドシートのキーボード ショートカット - パソコン - ドキュメント エディタ ヘルプ

一般的な操作一覧

列を選択 Ctrl+Space
行を選択する  Shift+Space
すべて選択 ⌘+A, ⌘+shift+space
元に戻す    ⌘+Z
やり直す    ⌘+Y, ⌘+shift+Z, fn+F4
検索  ⌘+F
検索と置換 ⌘+shift+H
範囲へコピー  ⌘+return
下方向へコピー   ⌘+D
右方向へコピー   ⌘+R
保存(すべての変更はドライブに自動的に保存されます)  ⌘+S
開く  ⌘+O
印刷  ⌘+P
コピー   ⌘+C
切り取り    ⌘+X
貼り付け    ⌘+V
値のみ貼り付け   ⌘+shift+V
一般的なキーボード ショートカットを表示  ⌘+/
新しいシートを挿入 shift+fn+F11
コントロールを非表示  Ctrl+Shift+F
入力ツールのオン、オフ(ラテン系以外の言語のスプレッドシートで使用可)   ⌘+shift+K
入力ツールを選択    ⌘+option+shift+K
メニューを検索   option+/


セルの書式設定

太字   ⌘+B
下線  ⌘+U
斜体  ⌘+I
取り消し線 option+shift+5
中央揃え    ⌘+shift+E
左揃え   ⌘+shift+L
右揃え   ⌘+shift+R
上枠線を適用  option+shift+1
右枠線を適用  option+shift+2
下枠線を適用  option+shift+3
左枠線を適用  option+shift+4
枠線を削除 option+shift+6
外枠線を適用  option+shift+7, ⌘+shift+7
リンクを挿入  ⌘+K
時刻を挿入 ⌘+shift+;
日付を挿入 ⌘+;
日付と時刻を挿入    ⌘+option+shift+;
表示形式を小数に設定  control+shift+1
表示形式を時刻に設定  control+shift+2
表示形式を日付に設定  control+shift+3
表示形式を通貨に設定  control+shift+4
表示形式をパーセンテージに設定   control+shift+5
表示形式を指数に設定  control+shift+6
書式をクリア  ⌘+\


スプレッドシートの操作

行の先頭に移動    fn+←
シートの先頭に移動 ⌘+fn+←
行の末尾に移動   fn+→
シートの末尾に移動 ⌘+fn+→
アクティブセルまでスクロール  ⌘+delete
次のシートに移動    option+↓
前のシートに移動    option+↑
シートリストを表示 option+shift+K
ハイパーリンクを開く  option+return
データ探索を開く    option+shift+X
サイドパネルに移動 ⌘+option+., ⌘+option+,
スプレッドシートからフォーカスを外す  control+⌘+shift+M
合計機能に移動(セル範囲を選択している場合)  option+shift+Q
ポップアップにフォーカスを移動(リンク、ブックマーク、画像)  control+⌘ を押しながら E、P
フィルタ処理したセルのプルダウン メニューを開く  control+⌘+R
変更履歴を開く   ⌘+option+shift+H
図形描画エディタを閉じる    ⌘+esc, shift+esc


メモやコメントの編集

メモを挿入、編集 shift+F2
コメントを挿入、編集  ⌘+option+M
コメントのディスカッション スレッドを開く   ⌘+option+shift+A
現在のコメントを入力  control+⌘ を押しながら E、C
次のコメントに移動 control+⌘ を押しながら N、C
前のコメントに移動 control+⌘ を押しながら P、C


メニューの操作

[ファイル] メニュー  control+option+F
[編集] メニュー   control+option+E
[表示] メニュー   control+option+V
[挿入] メニュー   control+option+I
[書式] メニュー   control+option+O
[データ] メニュー    control+option+D
[ツール] メニュー    control+option+T
挿入メニューを開く ⌘+option+= (セルを選択している場合)
削除メニューを開く ⌘+option+-(セルを選択している場合)
[フォーム] メニュー(スプレッドシートがフォームにリンクされているときに表示)  control+option+M
[アドオン] メニュー control+option+N
[ヘルプ] メニュー    control+option+H
[ユーザー補助機能] メニュー(スクリーン リーダーのサポートの有効時に表示)   control+option+A


シートメニュー

(コピーの作成、削除などのシート操作)    option+shift+S
コンテキスト メニュー ⌘+shift+\


行と列の追加や変更

行を上に挿入   ⌘+Option+=(行を選択している場合), control+option+I、R
行を下に挿入  control+option+I、B
列を左に挿入  ⌘+option+=(列を選択している場合), control+option+I、C
列を右に挿入  control+option+I、O
行を削除    ⌘+option+-(行を選択している場合), control+option+E、D
列を削除    ⌘+option+-(列を選択している場合), control+option+E、E
行を非表示 ⌘+option+9
行を再表示 ⌘+shift+9
列を非表示 ⌘+option+0
列を再表示 ⌘+shift+0
行または列をグループ化   option+shift+→
行または列のグループ化を解除  option+shift+←
グループ化した行または列を展開   option+shift+↓
グループ化した行または列を折りたたむ  option+shift+↑


数式の使用

すべての数式を表示  Ctrl+~
配列数式を挿入   ⌘+shift+return
拡張した配列数式を折りたたむ  ⌘+E
数式ヘルプを表示、非表示(数式の入力時)    shift+fn+F1
数式ヘルプの全表示、コンパクト表示(数式の入力時) fn+F1
絶対参照、相対参照(数式の入力時) fn+F4
数式結果のプレビューを切り替え(数式の入力時)   fn+F9
数式バーをサイズ変更(上下に移動) control+option+↑ または control+option+↓


スクリーン リーダーのサポート

スクリーン リーダーのサポートを有効にする
Google スプレッドシートでスクリーン リーダーを使用する方法の詳細    ⌘+option+Z
点字サポートを有効にする    ⌘+option+H
列を読み上げる   ⌘+option+shift+C
行を読み上げる   ⌘+option+shift+R


他のスプレッドシートのショートカットを使用したいとき

ヘルプ

キーボードショートカット

"スプレッドシートの互換ショートカットを有効にする"をオンにする

<twitter> bearer token生成について

bear token

一般的に使用されている認証方法。

公式doc↓

ベアラートークンを使用すると、開発者はOAuth 2.0のコア機能の1つであるTwitter APIを使用するためのより安全なエントリーポイントを持つことができます。 ベアラートークンを使用する認証は、アプリケーション単独認証とも呼ばれます。ベアラートークンとは、cURLコマンドのようなスクリプトを使用して生成する、形式の指定されていないバイト配列のことです。ベアラートークンは、開発者ポータルにあるアプリの設定のキーとトークンのセクションから取得することもできます。この機能についての詳細は、OAuthの公式ドキュメントに記載されています。

生成法

$ curl -u 'API key:API secret key' --data 'grant_type=client_credentials' 'https://api.twitter.com/oauth2/token'

API key:customer api
API secret key:customer api secret key

公式HP

ベアラートークンの使用 | Docs | Twitter Developer

参考

Twitter APIで使うBearer Tokenの取得方法 - Qiita

<twitter> node.jsでのtwitter情報取得

twitter.js

var Twitter = require('twitter');

var client = new Twitter({
  consumer_key: '',
  consumer_secret: '',
  access_token_key: '',
  access_token_secret: ''
});

client.get('search/tweets', { q: 'twitterアカウント名' }, function (error, tweets, response) {
  console.log(tweets);

});
$ node twitter.js

取得情報

{
  statuses: [
    {
      created_at: '',
      id: ,
      id_str: '',
      text: '',
      truncated: false,
      entities: [Object],
      metadata: [Object],
      source: '<a href="https://mobile.twitter.com" rel="nofollow">Twitter Web App</a>',
      in_reply_to_status_id: null,
      in_reply_to_status_id_str: null,
      in_reply_to_user_id: null,
      in_reply_to_user_id_str: null,
      in_reply_to_screen_name: null,
      user: [Object],
      geo: null,
      coordinates: null,
      place: null,
      contributors: null,
      is_quote_status: false,
      retweet_count: 0,
      favorite_count: 3,
      favorited: false,
      retweeted: false,
      lang: 'ja'
    }
  ],
  search_metadata: {
    completed_in: ,
    max_id: ,
    max_id_str: '',
    next_results: '',
    query: 'twitterアカウント名',
    refresh_url: '',
    count: ,
    since_id: ,
    since_id_str: ''
  }
}

<Ruby on Rails> rails routesの対話型のフィルタリングツール peco

pecoとは

シンプルな対話型のフィルタリングツール。 grepと異なり、入力しながら検索することができる。

公式の説明文

peco can be a great tool to filter stuff like logs, process stats, find files, because unlike grep, you can type as you think and look through the current results.

↓DeepLでの翻訳 grepと違って、考えながらタイプして、現在の結果を見ることができるので、pecoは、ログ、プロセス統計、ファイルの検索などのフィルタリングに最適なツールです。

ツールの導入

macでは、homebrewを使用してinstallする。

$ brew install peco

使用方法

以下のコマンドを入力。

$ rails routes | peco

すると、以下のようにroutingが検索できる。 Image from Gyazo

参考

Railsのルーティング早見方法 (peco) - Qiita GitHub - peco/peco: Simplistic interactive filtering tool

<Ruby on Rails> rails serverを立ちあげてページを表示した時に画面左上に出てくる表示について

背景

rails serverを立ち上げてページを開くと、左上にprofiler-resultの表示が出ていた。
これは何かということと、非表示方法を記載する。

Image from Gyazo

profiler-resultを出すgem

gem 'rack-mini-profiler', '~> 2.0'

公式での記載

Middleware that displays speed badge for every html page. Designed to work both in production and in development.
Features
・Database profiling - Currently supports Mysql2, Postgres, Oracle (oracle_enhanced ~> 1.5.0) and Mongoid3 (with fallback support to ActiveRecord)
・Call-stack profiling - Flame graphs showing time spent by gem
・Memory profiling - Per-request memory usage, GC stats, and global allocation metrics

↓DeepLでの翻訳
HTMLページごとにスピードバッジを表示するミドルウェア。本番環境でも開発環境でも動作するように設計されています。

特徴 ・データベースのプロファイリング - 現在、Mysql2、Postgres、Oracleoracle_enhanced ~> 1.5.0)、Mongoid3(ActiveRecordへのフォールバックをサポート)をサポートしています。 ・コールスタックプロファイリング - gemの使用時間を炎のグラフで表示します。 ・メモリプロファイリング - リクエストごとのメモリ使用量、GC スタット、グローバルアロケーションメトリクス

非表示方法

邪魔なので非表示にしたい。
参考のqiitaに記載されている方法もあるが、option + pで非表示にもできる。

参考

rack-mini-profilerの計測結果がWebページに表示しないようにする - Qiita

GitHub - MiniProfiler/rack-mini-profiler: Profiler for your development and production Ruby rack apps.

<VS code> htmlの自動補完に対する、head要素とbody要素の行調節とインデント調整

現状

基本設定にて、format on saveにチェックをつけてsave時に自動整形をするように設定している。

Image from Gyazo

変更したい点

以下の2点を変更したい。
・headとbodyの前後に1行入らないようにしたい
・またheadとbodyの要素にインデントを入れたい

現状↓
Image from Gyazo
理想↓
Image from Gyazo


方法

command + shift + pを押して、コマンドパレットを開き、
preferences: open settings(JSON)を選択し、settings.jsonを開く。
Image from Gyazo

settings.jsonに以下を追記する。

"html.format.extraLiners": "",
"html.format.preserveNewLines": false,
"html.format.indentInnerHtml": true,


それぞれの設定について

html.format.extraLiners

html.format.extraLiners: List of tags that should have an extra newline before them.

タグの前にextraな改行を入れるべきタグのリストということだが、これだとどういうことなのかよくわからないので、設定の窓でextralinersを検索したところ、以下のように結果が出てきた。
Image from Gyazo


"直前に改行を 1 つ入れるタグの、コンマで区切られたリストです。null は、既定値の head, body, /html を表します。"ということらしい。


試しに、改行を無くした状態にして"html.format.extraLiners": nullを設定し、保存してみたら以下のような挙動になった。
Image from Gyazo


この3つのタグのリストを消すため、""で空欄を設定すると、改行されなくなる、らしい。
"html.format.extraLiners":""に設定し、挙動を同様に確認したところ、改行されなかった。
Image from Gyazo


html.format.preserveNewLines

html.format.preserveNewLines: Whether existing line breaks before elements should be preserved.

html.format.preserveNewLineは、要素の前にある既存の改行を保持するかどうかを設定する。
ここでfalseにすることで改行を保持しないように設定することができる。
よって、htmlの自動補完で入力された空行を保持しない=空行を削除することができる。


html.format.indentInnerHtml

html.format.indentInnerHtml: Indent and sections.

html.format.indentInnerHtmlは、headとbodyのsectionをインデントするかどうかを設定。
trueにすることで、headとbodyにインデントを入れられる。
Image from Gyazo


結果

全て設定したのち、自動補完でhtmlを出し保存をすると、headとbodyに対してもしっかりインデントが入ってることがわかる。
Image from Gyazo


参考文献

Visual Studio Codeのフォーマッタを自分好みに設定してみる。 | TECHSCORE BLOG HTML Programming with Visual Studio Code