最近のAdminテンプレートについてまとめてみた
最近管理画面を作成することが多くなってきたので、Admin系のテンプレートがどのくらいあるか調べてみました！
AdminLTE
=> デモページ
=> ダウンロードページ
=> npm
Star数 23000超え・・・！
超有名ですね。ウィジェットやテーブルなどの管理画面に必要なアイテムもほとんど揃っていて使い勝手最高です。CSSとか考えなくても問題ありません。
そして無料！尊いですね。有料版にするともっといろいろなテンプレートが使えるみたい。
ただ、Bootstrapが3系なのが欠点かなって感じです。早く4系にしてほしい・・・。
有料版ではbootstrap4も出ているみたいです。
ちょいちょいcommitはあるけれど、開発も少し遅くなってきてます。
CoreUi
=> デモページ
=> npm
=> github
Star数は6200くらい。
非常に美しいBootstrap4系の管理画面テンプレートです。
一通りの管理画面に必要なウィジェットが揃っています。
なによりCoreUiの一番の利点はReact、Angular、vueなどの様々なjsのライブラリと組み合わせて動かすことが出来ます。
=> Reactのドキュメント
=> Vueのドキュメント
npmでも最新のコードが配信されているので最高感ありますね・・・！
結構新しい方のライブラリで開発も盛んのようです。
Adminator
=> デモページ
=> github
Star数 900ほど。
かなり新し目の管理画面テンプレート。真っ白で字も小さくて確認しやすいです。
こちらもBootstrap4がベースになっているそう。
【2018年最新版】GoogleのAuthTokenとRefreshTokenまで取得する方法
かなりハマってしまったので、備忘録も兼ねています。
GoogleCloudPlatformでAPIを設定するまで（前提）
まずGoogleCloudPlatformにログインします。 cloud.google.com
ログインしている場合、右上のコンソールからダッシュボードにいけます。
サイドバーの「APIとサービス」の「ダッシュボード」に入ります。入ると「APIとサービス」のダッシュボードの中までいけます。
必要なAPIを有効にします。
今回は、AnalyticsReportingAPIを有効にしてみます。ヘッダーの検索ボックスから必要なAPIを検索しましょう。
再び、「APIとサービス」に戻り、「認証情報」でTokenを作成していきます。
認証情報を設定する
今回はOauth2クライアントIDを使用して、APIを叩くこととします（基本的なことはOauth2クライアントで出来ます）
認証情報 > 認証情報を作成 > OauthクライアントID に進みます
アプリケーションの種類は「ウェブアプリケーション」を選択します。
承認済みのリダイレクト URI には本来ならばOauth2ログイン後のリダイレクト先を入れるのですが、今回はバッチサーバーやローカルからAPIをアクセスすることを前提としているので、適当に入れます。
僕はいつもGoogleのトップページ(つまり、 https://www.google.co.jp/ )を入れています。こちらのリダイレクトURLも保存しておきます。
作成するとクライアントIDとクライアントシークレットが表示されたモーダルが表示されていると思います。 その二つをコピーして控えておきます。
必要なAPIのScopeを調べる
次に必要なAPIのscopeを調べます。scopeとはそのAuthTokenがアクセスできる権限のことです。 scopeは以下のURL先で必要なモノを見つけましょう。
OAuth 2.0 Scopes for Google APIs | Google Identity Platform | Google Developers
URLをコピーしておきましょう。 今回の場合は、GoogleAnalyticsAPIを叩く想定なので、 https://www.googleapis.com/auth/analytics をコピーしておきます。
認証コードを作成する
さて、コピペしたものを一覧化すると、
- リダイレクトURL
- クライアントID
- クライアントシークレット
- scopeのURL
です。 上記の情報からURLを生成します。
https://accounts.google.com/o/oauth2/auth
?client_id=[クライアントID]
&redirect_uri=[リダイレクトURL]
&scope=https://www.googleapis.com/auth/analytics (使用するscopeのURL)
&response_type=code
&approval_prompt=force
&access_type=offline
↓
生成したURLをブラウザに貼り付けて、アクセスすると、Googleの認証画面が出てきますので、APIをアクティベートしたメールアドレスで許可してあげましょう。
許可すると以下のようなURLでリダイレクトURLを設定したページにアクセスされているはずです。
[リダイレクトURL]?code=xxxxxxxxxxxxxx
この code= 以下の文字列がリフレッシュトークンに必要な認証コードです。こちらを保存しておきます。
リフレッシュトークンを生成する
curlで取得する場合
これも、もう結構色々なブログで書かれていますが
curl -d client_id=[クライアントID] -d client_secret=[クライアントシークレット] -d redirect_uri=[リダイレクトURL] -d grant_type=authorization_code -d code=[認証コード] https://accounts.google.com/o/oauth2/token
を叩きます。
Postmanで取得する場合
Postmanとは
GUIのWeb API開発ツール。結構便利なのでおすすめ。特にPostmanはAPIを叩く設定を保存しておけるのでGoogleの認証周りを保存しておくと、使いまわせて便利です☆（ゝω・）vｷｬﾋﾟ => Postmanをもっと詳しく知りたい方はこちら
Postmanを使用するときには以下のような設定でOK。
content-typeをx-www-form-urlencodedに設定するのがポイントですね。
叩くとjsonが返ってきて、
{ "access_token" : "xxxxxxx", "token_type" : "Bearer", "expires_in" : 3600, "refresh_token" : "xxxxxxxxxxxxxx" }
こちらで取得できたリフレッシュトークンと、前に取得したクライアントIDとクライアントシークレットを使用すると、OAuth2.0でログインする処理を実装することができます。
まとめ
いかがだったでしょうか。結構Googleのauth認証って面倒くさいですよね。 このブログは備忘録のためにまとめておいたものですが、お役に立てれば幸いです！
お手軽にAPIを叩けるツール「Postman」を使ってみた
Postmanとは
curl コマンドを毎回叩くのも面倒ですよね。前の叩いたクエリとか設定とか覚えていないし....。
でもPostmanというツールはそのような煩雑な作業を一掃してくれます。
Developing APIs is hard Postman makes it easy
とあるように、APIをとても簡単に叩くことができるツールです。 そもそもテストクライアント用みたいですが、普通にちょっとしたAPIを叩くこともできます。
導入方法
上のリンク先からダウンロードしてきて、インストールするだけ！簡単。 サインインはしなければならないようで、Googleアカウントがあれば、サクッと登録できます。メールアドレスだけでも登録できます。
Postmanの使い方
開くとUIこんな感じ。イケてる。
早速、APIを叩いてみようと思います。
お天気Webサービス仕様 - Weather Hacks - livedoor 天気情報というサービスのお天気情報を取得をしてみます。
http://weather.livedoor.com/forecast/webservice/json/v1?city=$CITY_ID なので、
http://weather.livedoor.com/forecast/webservice/json/v1?city=400040 でAPIを叩けます。
ヘッダーにURLを入れて
Sendを押すと、値がjson形式で返ってきています。
json以外にも、xmlやhtmlなど好きな形式で整形もしてくれます。
HeaderやCookieも設定できます。
使って見た所感
ものすごく使いやすいです。しばらく使っていますが無料版で十分だと思います。
何より使いやすいのが、投げたクエリを保存することができる点です。 GoogleのOauthTokenを取得など、投げるのが面倒臭いクエリを保存しておくと、とても便利です。
【Rails】postしたzipを展開して処理をする方法
[:contents] Ruby on Railsでフロント側からzipファイルを送信して、サーバー側で展開して保存するというような処理を行いたかったのですが、結構ハマったり悩んでしまったので、書き残します。 ※今回はzipファイルの中に画像が入っている想定です。
zipをPostするまで
View側でPostできるようにする
= form_tag(create_item_by_zip_path(@hoge), multipart: true) do input type='file' name='zip_file' multiple=true accept=".zip" button type='submit' zipから作成
これで create_item_by_zip_path に .zip 拡張子だけPost出来るようになりました。
zipファイルを展開する
rubyzipを入れる
まずzipファイルを展開するためのライブラリを入れます。
Gemfileに追記して bundle install
gem 'rubyzip'
もしくは、
gem install rubyzip
をして、 rubyzip をインストールします。
zipを展開して保存するまで
zipfile = params[:zip_file] Zip::File.open(zipfile.path) do |zip| zip.each do |entry| ext = File.extname(entry.name) # 隠しファイルやゴミファイルは無視 next if ext.blank? || File.basename(entry.name).count(".") > 1 # テンポラリファイルを開く Tempfile.open([File.basename(entry.to_s), ext]) do |file| begin # 一時ファイルを作成 entry.extract(file.path) { true } # モデルを作成 image = Image.create!(source: file) ensure # 終わったらclose file.close! end end end
以上でpostしたzipファイルを展開して、処理する方法でした。一時ファイルはガベージコレクションのタイミングで自動的に削除されるようです。
【Rubyメモ】配列の要素で最初と最後だけ特別な処理をする
配列の最後だけ特別な処理をしたかったり、逆に処理したくない時がたまにありますが、自分の中でもなんとなく書いていたのでまとめてみます。
配列の中で最初と最後だけ処理をする
each_with_indexを使う
array = [1, 2, 3, 5, 8, 13] array.each_with_index do |num, index| if index == 0 puts "最初の処理" end if index == array.size - 1 puts "最後の処理" end puts num end
色々調べてみましたが、基本的にはこのやり方以外なさそうです。
なお、Enumeratorクラスに with_index メソッドが使えるとのことなので、 array.each.with_index でも可。
配列の中で最初と最後だけ処理をしない方法
each_with_indexを使う
array = [1, 2, 3, 5, 8, 13] array.each_with_index do |num, index| next if index == 0 || index == array.size - 1 puts num end
こちらも、each_with_index を使うのが良いみたいです。最初と最後の要素のときだけ next を使用します。
おまけ
最後の要素だけ処理をしない、というのに限り良さそうな方法を見つけました。
単純にeachを書くと
array = ['a', 'b', 'c', 'd'] str = "" array.each_with_index do |obj, index| str += (obj + ', ') if index < array.size - 1 end puts str # => 'a, b, c, d'
こんな感じでしょうか。
injectを使う
array = ['a', 'b', 'c', 'd'] puts array.inject('') do |str, obj| str + ', ' + obj end # => 'a, b, c, d'
inject メソッドを使用します。結構難しいメソッドですが、コツを掴むとめちゃくちゃ使いやすいです。
inject(初期値) do |メモ変数, 配列item| って感じです。
イテレーターのブロックの前回の戻り値がメモ引数に毎回格納されます。
よって間になにかを挟む系の処理はこれで基本はできます。
よくありますが、改行を含む文字を手軽に<br>に変換したい！というのもこの通り。（join使えというツッコミは無しで）
text.split('\n').inject{|e, n| e + '<br>' + n}.html_safe
