ショートカット：CSVファイルを読み込んでランダムにクイズを出題する
iOS13から標準で入っているショートカットアプリで暗記したいことをマルバツクイズ形式で出題してくれるショートカットを組みました。 記録。
以下からDLできます。
CSVは以下の5列。 (別の暗記アプリで使用するつもりで作ったCSVを流用してます、、。)
- Title
- Question
- Correct
- Wrong
- Memo
使用しているのは「Question」「Correct」「Memo」のみです。 そのため「リストから項目を取得」の時に指定してある数値が2,3,5となっています。
項目名も別に必要ないのでつまり
- 問題
- 答え
- 解説・メモ
の3項目あれば十分です。
修正が必要な箇所は「CSVのソース」「CSVのどの列を取得するか」「何問出すか」くらいかと思います。
完全に自分用なため雑なまとめ方ですが、ショートカットはまだまだ情報が少なく似通ったものしかでてこなかったのでブログに残しておきます。
ひとつ注意点として、問題はランダムで出題されますが、被ります。
リスト化して順に出すなど被らない方法もありそうですが私的にはそこまで困ってないのでそのままです。
もっと効率の良い書き方はありそう。 あと、問題数を最初に選べるようにしようかな、、とうっすら思ったまま何もしていないためちょっと無駄になっている箇所もあります。
CSVの取得は以下のブログを参考にしました。
BrowserSyncがreloadされない
問題
Gulp4にてpugやらsassやらをコンパイル。
Reloading Browsers...の表記があるのに、reloadされない。
[20:42:27] Starting 'compilePug'... [20:42:28] Starting 'reload'... [20:42:28] Finished 'reload' after 356 μs [20:42:28] Finished 'compilePug' after 792 ms [20:42:28] Starting 'reload'... [20:42:28] Finished 'reload' after 4.2 ms [Browsersync] Reloading Browsers...
原因
pugファイルに body タグがなかった。
てっとり早くテストしたかったがために最低限のコードで終わらせていたのが原因でした。
参考：
・bodyタグがないと動かない
・linkの指定がうまくいっていない
・パスの先頭に./が必要
gulp4を使用してpugとsassをビルド、BrowserSyncでライブプレビューをする
はじめに
こんにちは、ogrestです。
今回の記事内容はタイトルの通りです。
pugとsassを自動コンパイル、BrowserSyncを使用してのライブプレビューをしたかったのですが、gulp4向けの記事が少ない。
そもそもgulp自体使用したことがなかった＆JS知識に自信が無いのでいくつかのQiita記事を参考に、なんならコピペで使ってやろうと思っていたのですが、エラーを吐いてしまったのでもう一度調べ直して書き直しました。
環境
macOS Catalina v10.15.7
- Node.js v12.16.1
- npm v6.14.8
npm init済みの前提で進めます。
参考サイト
基本gulp4の記事です。
以下二つを参考に、sass、pugのビルドに成功。
コードをほとんどそのまま流用させていただきました。
ここの二つでgulpの概要、gulp4の書き方を覚えました。
以下の二つサイトはBrowserSyncの参考に。
こちらの記事はgulp4と書かれていますが、推奨されていない書き方(gulp.taskを使用している)のようです。
ただ複数のモジュールを使用しているため、gulp初心者の身としては大変参考になります。
こちらの記事の一番下にgulp4で推奨されているgulp.taskを使用した記述が紹介されています。
上記サイトを参考に記述してもBrowserSyncが一度しかリロードされなかったため以下を参考にdoneを追加。 qiita.com
npmのインストール
モジュールのローカルインストール(プロジェクト下だけで使用できるインストール方法)を行います。
gulp-sass、gulp-pug、browser-syncのインストール
npm install -D gulp gulp-sass gulp-pug browser-sync
プロジェクト直下にgulpfile.jsを作成
プロジェクトの直下にgulpfile.jsを作成します。
gulpに関するタスクはこのファイル内に記述します。
ディレクトリの構成参考
root/ ┣━src/ ┃ ┣━scss ┃ ┗━pug ┣━dist/ ┃ ┣━css ┃ ┗━html ┣━package.json ┗━gulpfile.js
gulpfile.jsの記述
const {src, dest, watch} = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");
const pug = require("gulp-pug");
const browserSync = require("browser-sync");
var paths = {
'root': '.',
'scss': 'src/scss/',
'css': 'dist/css/',
'pug': 'src/pug/',
'html': 'dist/coding'
}
// Sassのコンパイル
const compileSass = () =>
// style.scssファイルを取得
src(paths.scss + '**/*.scss')
.pipe(
sass({
outputStyle: "expanded"
})
)
.pipe(dest(paths.css));
// Pugのコンパイル
const compilePug = () =>
src(paths.pug + "**/*.pug")
.pipe(
pug({
pretty: true
})
)
.pipe(dest(paths.html));
// Sass,Pugファイルの監視
const watchSrcFiles = () => {
watch(paths.pug + '**/*.pug', compilePug);
watch(paths.scss + '**/*.scss', compileSass);
}
// Browser Sync
const taskServer = () =>
browserSync.init({
server: {
//ルートディレクトリの指定
baseDir: paths.root,
index: "index.html",
}
});
const reload = (done) => {
browserSync.reload();
done();
}
watch(paths.html + "**/*.html", reload);
watch(paths.css + "**/*.css", reload);
exports.default = () =>
watchSrcFiles ();
taskServer();
最後の5行、書き出しの部分はもっと簡潔な書き方がありそうなのですが(series,parallelあたり？)
私には書けなかったのでこのままで。。
gulpタスクを実行
npx gulp
ctrl+Cで終了できます。
少し見づらいですが、sassが書き換えられるたびにページが自動リロードされています。
さいごに
これまではconcurrentlyを使用してpugとsassを自動コンパイルしていました。
が、node-sassがv12にしてからエラーを吐き、まともに使用できなくなったり
単純にビルドまでの時間が長く不満だったこともあり今回glup4を導入しました。
素晴らしい記事のおかげですんなりと導入でき満足です。
browserSyncも導入したので今後はより快適に開発できそうです。
windowsのプロキシ環境下でnpm installをするとエラーが出る。
目次
はじめに
こんにちは、ogrestです。
普段家ではMac使いなのですが、職場ではwindowsになり、さらにプロキシ環境下での作業が初めてだったため原因もわからず無駄に時間を過ごしてしまったためメモを残しておきます。
やりたかったこと
- pugとsassをgulpを使用して自動コンパイルさせる。
Node.jsインストールして、npm initでpackageファイルを作成して、モジュールをインストール、で躓きました。
参考： qiita.com
エラー内容
443のエラーがでた。
Error: connect ETIMEDOUT XXX.XX.XXX.XXX:443
プロキシ？？？？みたいなレベルだったので調べて出てくるコマンドをアドレスだけ変えて実行しても案の定エラー。
解決方法
参考：(引用の引用になってしまってますが。。)
プロキシ環境下のネットワークで、コマンドプロンプトからのHTTP/HTTPS接続がうまくいかない時があります。これはIEのオプションで設定したプロキシ設定は、そのままではコマンドプロンプトに反映されないため、です。
つまりはプロキシサーバーを経由してnpm installをする場合、事前にプロキシ設定が済んでいてもコマンドプロンプトに反映されないと。謎。
そもそもインターネットに繋がってない、とかならわかるんですけども、、。謎仕様だね。
なのでnpmの設定にプロキシについて記述してあげればOK。
ただ、ほとんどのサイトでは設定するサーバーなどをhttp://proxy.hogehoge.com:XXXXやhttp://プロキシサーバアドレス:ポートなどと書いてあって知識ゼロだとよくわからず。
結論としてはIDとパスが設定されているプロキシサーバーだったためそれらが必要ということでした。以下のページで気がついた。。
参考： qiita.com
>npm config set proxy http://<userid>:<password>@<server-address>:<port> >npm config set https-proxy http://<userid>:<password>@<server-address>:<port>
以上を設定して、無事npm installができました。
長かったー！
リネームアプリshupapanを使えなくなったためrenameコマンドを使うことにした
目次
32bitアプリのShupapan(リネームアプリ)はCatalinaでは使用できない
こんにちは、ogrestです。
長らくCatalinaへのアップデートを拒んでいたのですが、iPadをマルチディスプレイにしたすぎて勢いでアップデートしてしまいました。
まんまと困ることが出てきています。
中でもどうしても困ってしまったのがファイルのリネームに愛用していたShupapanが使用できなくなってしまったこと。
どうやらCatalinaから32bitのアプリは非対応になってしまった模様。
Shupapan公式サイトによると64bitへの対応はしないとのこと。
今後リリース予定のMacOSで32ビットアプリのサポートが終了となるため、MacOSでのサポートが終了次第動作しなくなります。あらかじめご了承ください。 申し訳御座いませんが、どこかのタイミングで他社製の新しいソフトウエアに切り替えていただければ幸いです。
一応Mac OSにはファイルの一括変更機能があり、文字列の置き換えや連番も可能です。アプリを使わずともこれで事足りる方も多いでしょう。
ただ、今回私がしたかったことは連番かつ4桁に揃えること。これはアプリを使用しないと実現できません。
意外にも希望の桁数で連番にできるアプリを探すことに苦労し、いくつか試す中でやっと出会えたのがShupapanでした。
Shupapanが使えないのは困る。でも使えないのが現実。
ということで複数アプリを試しましたがしっくりこず、renameコマンドを使用することにしました。
renameコマンドとは？
名前の通りファイルのリネームができるコマンドです。
ターミナルに直接コマンドを打ち込み実行することでリネームができます。
Linuxにはデフォルトであるコマンドらしいのですが、Macには無く、同じ名前の似たものがHomebrewにあるためそちらを利用します。
renameのインストール
Homebrewを使用するためインストールしていない方はHomebrewのインストールを済ませてから以下のコマンドを打ってください。
brew install rename
以上でrenameコマンドが使用可能になりました。
renameの使い方
連番をつける
※-Xは拡張子保護。付けないとsample_001.pngとしたいところ、sample_001になる。
連番ファイルを作成する
data_1.png data_2.png data_3.png ...
rename -N ...1 -X -e '$_ = "data_$N"' *.png
桁数をそろえて連番をつける
data_001.png data_002.png data_003.png ...
rename -N 001 -X -e '$_ = "data_$N"' *.png
スタート時の数は指定可能。
rename -N 005 -X -e '$_ = "data_$N"' *.png
文字列の置き換え
※「*」はフォルダ内の全てのファイルを参照します
基本の置き換え
rename -s hello bye *
helloをbyeに、hogeをhugaに置き換え
複数同時も可能。
rename -s hello bye -s hoge huga *
prefixを付ける
先頭にsample_を付ける
rename -A sample_ *.png
suffixを付ける
末尾に.htmlを付ける
rename -a .png *
末尾から文字列を消す
rename 's/.csv$//' *
最後に
正規表現が使用できるので、慣れている方はそちらを使ってもスムーズかもしれません。
使えるコマンドはドキュメントに書いてあります
めちゃくちゃ便利なコマンドなのでそのうち全てのコマンドを紹介しようと思ってます。とりあえずは忘備録に。
以下参考にしたQiita
ルーティングについて
久々にRailsを触ったら色々忘れていたので過去にメモしていたものと合わせて基本的なルーティングのおさらいです。
目次
rake routes(rails routes)
設定されているルーティングを確認するコマンド。 これを書くために調べていて知ったのですが、現在がrakeがrailsに置き換えられていっているそうなのでrails routesを使う方が良い模様。 とりあえずこのコマンドでルートの確認をする。
$ rake routes
もしくは
$ rails routes
http://localhost:3000/rails/info/
にアクセスしても一覧が見れる。この方が見やすい。
※rails sでサーバーに接続している状態の時に限ります
※URL的にはhttp://localhost:3000/rails/info/routesが正しいのですが上記のURLにアクセスしても自動的に同じページが表示されます。
ルーティングの設定(基本)
📁config/routes.rb
Rails.application.routes.draw do この中に記述 end
Rails.application.routes.draw do root "contents#index" get "contents/new" => "tweets#new" post "contents" => "tweets#create" end
《root》サイトトップのページを指定
以上のように記述している場合
http://localhost:3000 にアクセスするとcontentsアクションのindexメソッドが実行。
/coutents/newにアクセスすると、contentsアクションのnewメソッドが実行。
/coutents/createだとcontentsアクションのcreateメソッドが実行。
※ビューはそれらに対応したファイルが表示される。
/contents/newにアクセス→/app/views/contents/new.html.erbなど
resources
先のように記述していくと、記述量が増え管理が大変なためresourcesを使ったルーティングが推奨されている模様。 resourcesを使うと7つのルーティングが一括で生成されます。 必要なルーテイングのみを指定することも可。(必要のないアクションを指定することもできる。)
📁config/routes.rb
Rails.application.routes.draw do resources :contents resources :users, only: [:index, :show] end
contentsアクション→7つ全て一括生成 usersアクション→indexとshowのみ生成
$ rake routes
Prefix Verb URI Pattern Controller#Action
contents GET /contents(.:format) contents#index
POST /contents(.:format) contents#create
new_content GET /contents/new(.:format) contents#new
edit_content GET /contents/:id/edit(.:format) contents#edit
content GET /contents/:id(.:format) contents#show
PATCH /contents/:id(.:format) contents#update
PUT /contents/:id(.:format) contents#update
DELETE /contents/:id(.:format) contents#destroy
users GET /users(.:format) users#index
user GET /users/:id(.:format) users#show
resource
resourcesと同じに見えますが複数形か単数形か、です。 これらふたつには明確な違いがあります。 - indexアクションが含まれない - URI Patternにidを含まない 以上の２点です。
Rails.application.routes.draw do resource :users end
$ rake routes
Prefix Verb URI Pattern Controller#Action
POST /users(.:format) users#create
new_user GET /users/new(.:format) users#new
edit_user GET /users/edit(.:format) users#edit
user GET /users/(.:format) users#show
PATCH /users/(.:format) users#update
PUT /users/(.:format) users#update
DELETE /users/(.:format) users#destroy
もちろんもっと書き方があるし、私自身使っているので今後まとめたい。
flex boxについて(その2)
目次
はじめに
flex boxについてまとめています。
以下の記事の続きです。
前回はflex boxの基本的な使い方と、親要素に指定できるプロパティについてまとめました。
今回は子要素に指定できるプロパティについてまとめます。
子要素に指定できるプロパティ
これから紹介するプロパティに関して、親要素にdisplay: flex;が指定されていることが必須条件。
order ・・・ 子要素の順番
orderを指定することで子要素を並び替えられる。
初期値は0。マイナスの値も指定可能です。
.a { order: 1; } .b { order: 2; } .c { order: -1; }
どのサイトをみても分かりづらかったのですが、子要素がいくつあろうと全ての子要素の初期値は0です。
たとえば以下のように一つ目の子要素にorder:1;を指定した場合、他の子要素は0なのでその後ろに移動します。
flex-grow ・・・ 子要素の伸びる比率
親要素にスペースが余っている場合、子要素をどの程度伸びるかを指定できます。
初期値は0。マイナス値は使用できません。
.a { flex-grow: 1; } .b { flex-grow: 2; } .c { flex-grow: 3; }
flex-growの計算方法は、指定した数値の合計で、あまりのスペースを割っているようです。
目で見てわかる範疇でもなさそうなので、感覚をつかんで確認しながら使うしかないかなーという印象。
flex-shrink ・・・ 子要素の縮む比率
flex-growとは逆でスペースが無く、全ての子要素が入りきらない場合にどの程度縮めるかを指定できます。
初期値は1。マイナス値は使用できません。
.a { flex-shrink: 1; } .b { flex-shrink: 2; } .c { flex-shrink: 3; }
このあたりは計算方法がなかなかややこしいので試しながら使って行くしかなさそう。
flex-boxの計算について、2016年の記事ですが以下のブログにわかりやすく書かれていました。
flex-basis ・・・ 子要素のベースとなる横幅を指定
widthに近いイメージです。
初期値はauto。pxや%の指定も可能です。
.a { flex-basis: auto; } .b { flex-basis: 100px; } .c { flex-basis: 80%; }
flex ・・・ flex-grow、flex-shrink、flex-basisをまとめて指定
.a { flex: 2 1 20%; }
align-self ・・・ 子要素の垂直方向の位置
align-itemsよりこちらが優先される。
| 名前 | 説明 |
|---|---|
| auto(初期値) | 親要素の align-items の値を継承 |
| stretch | 親要素の高さ、または一番コンテンツの多い子要素に合わせる |
| flex-start | 上揃え |
| flex-end | 下揃え |
| center | 中央揃え |
| baseline | ベースラインで揃える |
以上です。
まだ細かい仕様など、書けていないものもあるのでそちらもいつかまとめたいですね。
