What's New Qiita

20200227のHTMLに関する記事は11件です。

  • 投稿日：2020-02-27T23:30:17+09:00

【Ruby on Rails 5】Instagram風簡易SNSアプリを作ってみよう！（Techpit教材）を終えて

Techpitの【Ruby on Rails 5】教材の感想

TechCommitさんのお年玉企画にて頂いたTechpit教材を使って、Ruby on Rails 5で簡易アプリを作成しました。
簡単ではありますが、どのようなことを学べたのか、その感想を記します。

また、当方実務経験などが全く無く、言語を独学で学んでいる程度なので、経験も知識も非常に浅いことをご了承願います。

教材に取り組む上で必要な知識

まず、【Ruby on Rails 5】instagram風簡易SNSアプリを作ってみよう！という教材は、以下の言語を使用します

  • HTML
  • CSS
  • Javascript
  • Ruby

必要条件はHTML/CSS、及びRubyの基礎知識とされています。

主な目的はRuby on Railsの流れを把握するものであり、
SNSのinstagramを参考にしたアプリ作成を進める内容となっています。

今回の教材に取り掛かるにあたって、HTMLとCSS、Rubyの基礎知識をProgateで補っています。
教材は、2回ほど繰り返し学習を行いました。

※教材内でHTML/CSSは多く使われますが、詳しい解説はありません。

教材の流れと大まかな内容

  • 環境構築
    • Mac -Homebrew
    • Windows -Cloud9
  • Railsアプリケーション作成
    • Gemインストール
    • ローカルサーバー立ち上げ
  • MVC知識
  • Bootstrap導入
  • 機能を付ける
    • サインアップ・サインイン
    • プロフィール
    • 画像投稿
    • いいね
    • コメント
  • デプロイ
    • Herokuを利用してサービス公開
  • pry-railsを用いたデバック方法

どのファイルでどのコードを記述するか、コードの意味から、詳しい情報が書いてある詳細ページのリンクも要所要所あります。

また、各項ごとに質問投稿欄があり、わからないことが運営へ質問出来るようになっていました。

全体を通しての感想

プログラミング超初心者ながら教材を終えて、感想を大きく三つあります。

  • 初心者にも作れるわかりやすさ
  • 使用する知識が多い
  • エラーに慣れてくる

初心者にも作れるわかりやすさ

アプリを作るというと難しそうだなとは思っていましたが、
一つ一つのページを作り、それを組み立てるような流れでわかりやすかったので、
進めていければアプリ作成・公開まで行うことが出来ます。

使用する知識が多い

教材内容全てを理解する、というのは、特に言語など基礎の基礎を学んだだけでは出来ませんでした。使用する言語も多い(ように感じた)ので、基礎知識しか無い段階で全て理解しようとすると相当な時間がかかると思われます。

といっても、そもそもこの教材の一番目的がRuby on Railsの流れを把握することなので、まずは流すように取り組むだけでも、大枠が見えてきます。
細かいことを知りたい時はそのページで質問するでも、リンクを参考にするでも可能なところが良かったです。

エラーに慣れてくる

私が初心者なせいかとは思いますが、教材通りにしているつもりでもどこかしらでエラーが起きて躓いてしまうことが多々ありました。

しかし自分が躓いていることは大体他の人も躓いていることが多かったので、特に各項の質問投稿欄は、同じエラーで解決した人が居たりして、非常に助けになり、また、何度かエラーを繰り返すことでエラーの直し方や着目すべきところも以前より見えるようになった気がします。

まとめ

長くなりましたが、この教材の対象者でもあるように、Ruby on Rails開発の流れをつかみたい人、アプリを作成してみたい人、特にRubyを学んでいる方にはおすすめです。

しかし感想でも触れましたが、やはり言語の面での自分の知識不足が痛かったです。
基礎知識をしっかり固めてやると、もっと入りやすいのかなと思いました。教材としては扱いやすくてとても良かったです。

アプリ作成、そしてサイトの公開まで学べるという点で、知識の色んな活用の仕方が出来るのではと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T23:25:25+09:00

リダイレクトFizzBuzz

結果表示

capture1

計算過程

capture2

リポジトリ

matoruru/redirect-fizzbuzz - GitHub

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T21:58:38+09:00

文系ガチの未経験だった僕が自力4ヶ月弱で自社開発のweb系会社で新卒内定をもらうために行ったこと

誰に読んで欲しいか

・文系新卒未経験の方
・web系の会社で働きたい方
・フリーランスでアソビタィ！！

偉そうに書きますがご容赦ください><

なぜ書くのか

実際に自分がエンジニアになりたいと思った時に情報が全くなかったから。
何をしなければいけないかが全くわからなかった。

web系で就職した人や未経験理系卒の方の情報は多少あれど文系未経験新卒でweb系エンジニアになった人の情報は全くなかったため。しかし文系卒のエンジニア志望は増えて来ていてニーズはかなりあると考えた。

自己紹介

早稲田大学文系3年生。
長所は考えた上で実際に行動にすぐに移せること。
大学生時代は酒飲み、遊び、そしてオーストラリアとニュージーランドでワーキングホリデーを行い、ガチガチの現地の環境に身を置いて生活をした。
その時に初めてテクノロジーに触れて衝撃を受け、ITに興味を少し持つ。
ものを作ってびっくりさせることが好き。

自分が行ったこと

３年生の夏

コンサル目指してサマーインターンを応募しまくるも落選落選。
→自己分析を重ねてどう考えても仕事よりノマドになって海外で自由に働きたいと強い決意。

10月前半

・週３働いていたマーケのインターンを辞め、飲み会などを減らし、未来への投資として勉強する。
・実際にprogateという初心者向けの学習サイトで月額1000円払ってHTML,CSSを２週ほどした。
　→一周2日あれば余裕
　→月額1000円はスクールと比較すればどう考えても格安
・その後実際に自分の作ってみたいサイトを5つほどアウトプットしてみる
・その後同じものでJavaScriptを学び、難しかったので5週ほどした。

10月後半

・インターンを視野にいれて重役のいる大手コンサルでの長期インターンの条件としてあげられた制作物の作成に励む。
　・課題の内容としてはとあるチャットアプリのAPIを使ったアプリ内メッセージ検索webアプリ
　・AWSを使ったデプロイまで行うよう指示される
　・文系なのでエンジニアの友人もいなかったため小学校の時の友人、MatcherというOB訪問アプリで 出会った社会人の方、前職場のエンジニアの方に再コンタクト
　・正直かなり大変でエラー１つに数日かけることもしばしば
・Vue.jsというjavascript(js)の指定が確かあったため、Udemyというオンライン学習用動画を販売するサイトを利用し、1000円で購入し、課題と同時並行で勉強した。

11月後半

課題完成し、OKが出たが人数の関係で引き伸ばされた。
→しょぼいですがもしお時間あれば見てみてください..まだまだ改良中なのでお手柔らかに..
slackのメッセージ検索アプリ

早く実務経験を積みたかったため、諦めて自分でインターンを探し始める。
この時使ったものはMatcher,キャリアバイト,Infraというサービスたち。
まずエンジニアとしての働き方などベースを知るためにMatcherで20人ほど文系未経験卒のエンジニアの方中心に話を聞いた。

12月

その後早速実務未経験でも働けそうなインターンに応募。面接させてくれた企業は3つ。
１つ目の企業には面接中に断られる。

ここでフィードバックをお願いして教えてもらったこと
・普通に企業の目線で考えるとエンジニアを雇う意味は２つ。
　❶即戦力で企業に利益をもたらすため
　❷就職するかもしれないため将来を見越した研修込みの投資として
今このページを読んでいる人はおそらく❷を狙うしかない。
だから自分はそれ以降就職してもいい会社しか応募せず、面接も本気で就活のレベルで受けた。

12月後半

ゲームメディアを運営する企業で採用された。フロントでの努力を評価されバックエンドのPHPを使ったエンジニアとして研修込みでの採用。
同時にレバテックという人材サービスを利用し就活を視野に入れて自己分析をもっと極める。

1月

長期インターン開始。
後半からは面接も平日夜に毎日受ける。
→フィードバックを最大限に生かしてPDCA回して面接の受けが良くなっていく。

2月

ついに複数の企業から内定をいただく。
現在まだ一応他の企業も見ている。

すいません。日記のような形になりました。

まとめ

就職までの時間を考えて何をすべきか逆算していくことが大事。
正直自分は実務経験ないと就職できないと思ってインターンを必死に探したが、しなくてももしかしたらよかったかもしれない。
しかしインターンをして就活しながらも現在進行形で技術に触れていることをアピールできたのは大きかった所感。

インターンを受けるにあたって大事なことは
ちゃんと就職してもいい企業で受けると互いに良くて面接ももちろん通る。

就活では
・しっかりエンジニアになりたい理由を固めることは大前提必要。

・その上でそのために実際にこんなもの作って、インターンもやっている(何かしら活動している)から私はこれからももちろんエンジニアでゴリゴリ開発していきますよ？だって書くの好きだもん！ということを伝えることが絶対に必要。

おそらく面接官が心配していることは、
❶エンジニアなりたいのはわかったけど続けれるのか。文系やめる人多いけど。
❷成長は早くて遅い経験有りのエンジニアを雇うよりも将来的に利益になるのか。
ということ。
あとは文系ならでは(?)のコミュニケーション能力を面接で抜群に発揮して内定をもぎ取りましょう！！

感想

初めてのqiita投稿でした。
ずっと前から自分が情報なくて困っていたのでこういったことを内定もらったらすぐにしたいと考えていて、それが実行できたので嬉しいです。

次回は初心者から見た簡単なIT業界やエンジニアの中の詳しい職種の特徴を発信したいと思います。
もちろんコーディングの知識もアウトプットしたいと考えてます。

お手柔らかに、意見やコメントもらえると嬉しいです！
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T21:58:38+09:00

文系ガチの未経験エンジニアだった僕が自力4ヶ月弱で自社開発のweb系会社で新卒内定をもらうために行ったこと

誰に読んで欲しいか

・文系新卒未経験の方
・web系の会社で働きたい方
・フリーランスでアソビタィ！！

偉そうに書きますがご容赦ください><
右に目次があるので興味あるとこのみピックアップできます!!

なぜ書くのか

実際に自分がエンジニアになりたいと思った時に情報が全くなかったから。
何をしなければいけないかが全くわからなかった。

web系で就職した人や未経験理系卒の方の情報は多少あれど文系未経験新卒でweb系エンジニアになった人の情報は全くなかったため。しかし文系卒のエンジニア志望は増えて来ていてニーズはかなりあると考えた。

自己紹介

早稲田大学文系3年生。
長所は考えた上で実際に行動にすぐに移せること。
大学生時代は酒飲み、遊び、そしてオーストラリアとニュージーランドでワーキングホリデーを行い、ガチガチの現地の環境に身を置いて生活をした。

なぜエンジニアになりたいか

２年生までは「MacBook=レポートを作成できる優れモノ」だったが、
ワーホリで初めてキャッシュレスというテクノロジーに触れて衝撃を受け、生活の質を劇的に変えることのできるITに興味を少し持つ。
誰かの役に立つものを作ること。喜んでもらうこと。びっくりさせることが好きだから。
あとは成長が積み上げ式でわかる。営業を２年間やっていたが状況によって結果が大きく異なる。エンジニアのスキルは昔のコード見ると明らかに質が低いのがわかる。(四ヶ月目までの今の時期だけかもしれないが)

自分が行ったこと(具体的に)

３年生の夏

コンサル目指してサマーインターンを応募しまくるも落選落選。
→自己分析を重ねてどう考えても仕事よりノマドになって海外で自由に働きたいと強い決意。

10月前半

・週３働いていたマーケのインターンを辞め、飲み会などを減らし、未来への投資として勉強する。
・実際にprogateという初心者向けの学習サイトで月額1000円払ってHTML,CSSを２週ほどした。
　→一周2日あれば余裕
　→月額1000円はスクールと比較すればどう考えても格安
・その後実際に自分の作ってみたいサイトを5つほどアウトプットしてみる
・その後同じものでJavaScriptを学び、難しかったので5週ほどした。

10月後半

・インターンを視野にいれて重役のいる大手コンサルでの長期インターンの条件としてあげられた制作物の作成に励む。
　・課題の内容としてはとあるチャットアプリのAPIを使ったアプリ内メッセージ検索webアプリ
　・AWSを使ったデプロイまで行うよう指示される
　・文系なのでエンジニアの友人もいなかったため小学校の時の友人、MatcherというOB訪問アプリで 出会った社会人の方、前職場のエンジニアの方に再コンタクト
　・正直かなり大変でエラー１つに数日かけることもしばしば
・Vue.jsというjavascript(js)の指定が確かあったため、Udemyというオンライン学習用動画を販売するサイトを利用し、1000円で購入し、課題と同時並行で勉強した。

11月後半

課題完成し、OKが出たが人数の関係で引き伸ばされた。
→しょぼいですがもしお時間あれば見てみてください..まだまだ改良中なのでお手柔らかに..
slackのメッセージ検索アプリ

早く実務経験を積みたかったため、諦めて自分でインターンを探し始める。
この時使ったものはMatcher,キャリアバイト,Infraというサービスたち。
まずエンジニアとしての働き方などベースを知るためにMatcherで20人ほど文系未経験卒のエンジニアの方中心に話を聞いた。

12月

その後早速実務未経験でも働けそうなインターンに応募。面接させてくれた企業は3つ。
１つ目の企業には面接中に断られる。

ここでフィードバックをお願いして教えてもらったこと
・普通に企業の目線で考えるとエンジニアを雇う意味は２つ。
　❶即戦力で企業に利益をもたらすため
　❷就職するかもしれないため将来を見越した研修込みの投資として
今このページを読んでいる人はおそらく❷を狙うしかない。
だから自分はそれ以降就職してもいい会社しか応募せず、面接も本気で就活のレベルで受けた。

12月後半

ゲームメディアを運営する企業で採用された。フロントでの努力を評価されバックエンドのPHPを使ったエンジニアとして研修込みでの採用。
同時にレバテックという人材サービスを利用し就活を視野に入れて自己分析をもっと極める。

1月

長期インターン開始。
後半からは面接も平日夜に毎日受ける。
→フィードバックを最大限に生かしてPDCA回して面接の受けが良くなっていく。

2月

ついに複数の企業から内定をいただく。
現在まだ一応他の企業も見ている。

すいません。日記のような形になりました。

まとめ

就職までの時間を考えて何をすべきか逆算していくことが大事。
正直自分は実務経験ないと就職できないと思ってインターンを必死に探したが、しなくてももしかしたらよかったかもしれない。
しかしインターンをして就活しながらも現在進行形で技術に触れていることをアピールできたのは大きかった所感。

インターンを受けるにあたって大事なことは
ちゃんと就職してもいい企業で受けると互いに良くて面接ももちろん通る。

就活では
・しっかりエンジニアになりたい理由を固めることは大前提必要。

・その上でそのために実際にこんなもの作って、インターンもやっている(何かしら活動している)から私はこれからももちろんエンジニアでゴリゴリ開発していきますよ？だって書くの好きだもん！ということを伝えることが絶対に必要。

おそらく面接官が心配していることは、
❶エンジニアなりたいのはわかったけど続けれるのか。文系やめる人多いけど。
❷成長は早くて遅い経験有りのエンジニアを雇うよりも将来的に利益になるのか。
ということ。
あとは文系ならでは(?)のコミュニケーション能力を面接で抜群に発揮して内定をもぎ取りましょう！！

感想

初めてのqiita投稿でした。
ずっと前から自分が情報なくて困っていたのでこういったことを内定もらったらすぐにしたいと考えていて、それが実行できたので嬉しいです。

次回は初心者から見た簡単なIT業界やエンジニアの中の詳しい職種の特徴を発信したいと思います。
もちろんコーディングの知識もアウトプットしたいと考えてます。

お手柔らかに、意見やコメントもらえると嬉しいです！
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T19:00:05+09:00

JavaScriptで外部ファイルを動的に読み込む

やったこと

JavaScriptで外部ファイルを動的に読み込みました。

var script = document.createElement('script');
script.src = "%外部ファイルのパス%";
document.head.appendChild(script);

わかったこと

パッケージ製品やフレームワークの制約で、HTMLのscript属性が設定できない場合、JavaScriptから動的に読み込むことができる。

つぎにやること

読み込んだ外部ファイルのモジュールを使用する。

メリット

クライアントサイドで実現できる範囲が広がる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T13:20:13+09:00

入力フォームであらかじめ文字を入れておきたい

入力フォームにあらかじめ文字を入れる方法です。
なんとなく忘れやすいので、共有します。

導入前

<input type="text">

placeholderを使う

<input type="text" placeholder="ここが入力欄に表示されます">

placeholderを使うと入力欄にもじが表示されます。
文字を入力すると消えます。

valueを使う

<input type="text" value="ここが入力欄に表示されます">

valueを使うと入力欄にあらかじめ入力された状態になります。
文字を入力しても消えません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T13:20:13+09:00

入力フォームに文字を表示させたい

入力フォームに文字を表示させる方法です。
なんとなく忘れやすいので、共有します。

導入前

<input type="text">

placeholderを使う

<input type="text" placeholder="ここが入力欄に表示されます">

placeholderを使うと入力欄に文字が表示されます。
文字を入力すると消えます。

valueを使う

<input type="text" value="ここが入力欄に表示されます">

valueを使うと入力欄にあらかじめ入力された状態になります。
文字を入力しても消えません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T11:48:41+09:00

おみくじでjavascriptを勉強

次の現場でjavascriptを使うことになったので、少しでも触れるようになっておこうと勉強し始めました。
手始めに、よくある「おみくじ」アプリを作ってみます
アプリと言えるほど大層なものではなく、ただweb上で表示するだけですが笑

htmlコード(index.html)

<html>
    <head>
        <meta http-equiv="content-type" charset="utf-8">
    </head>
    <body>
        <h1>簡単おみくじ</h1>
        <input type="button" id="getResult" value="ボタンを押すとおみくじが引けるよ">
        <div id="result"></div>
        <script src="script.js"></script>
    </body>
</html>

javascriptを適用したい場所にscriptを差し込んでやると、そこに反映してくれるようです。
でもcssと同様で、headに書くのが一般的なのかな？とも。
これは今後勉強していって気づけばいいですね。

javascriptコード(script.js)

let omikuji = {
    items: ["大吉", "吉", "中吉", "小吉", "末吉", "凶"],
    getResult: function() {
        let results = this.items;
        return results[Math.floor(Math.random() * results.length)]
    }
}
//console.log(omikuji.getResult())

let getResult = document.getElementById("getResult");
let result = document.getElementById("result");

getResult.addEventListener("click", function() {
    let done = omikuji.getResult();
    switch (done) {
        case "大吉":
            result.innerHTML = "おめでとう！結果は「" + done + "」でした";
            break;
        default:
            result.innerHTML = "結果は「" + done + "」でした";
    }
})

変数の宣言、条件分岐、関数の作成、HTMLの操作を取り入れました。
基礎的な事は豊富に学べたかなと思います。

変数の宣言

javascriptではletで変数を宣言する必要があるようです。
pythonでは宣言なしで使えたので、少し煩わしさがあります。
なお、定数を使用する際はconstで宣言するみたいです。
事前に宣言する分、管理しやすいのがメリットですね。

条件分岐

他の言語でもあるif文でも良かったのですが、より簡単にまとめられるswitch文を今回は使いました。
「if hoge = hogehoge」と書くより、caseで結果だけ書く方が楽ですね。
ここでは、それぞれのcaseでbreakを書くことが注意です。
仮に下に書いたcaseにも該当すると、下が優先されてしまうからです。
caseに該当しない処理はdefaultで書いてあげます

関数

関数はfunctionで定義してあげます。
またitems: []のように関数内で変数を宣言する際は、
let 変数名 =ではなく変数名:になるのも注意です。

Math.floor()は、整数に直してくれます
Math.random()は、0-1内でランダム数字を作ります。

HTMLの操作

HTML側の操作をできるのがjavascriptの醍醐味です。
今回はたくさんある操作の中で、3つ使ってみました。

document.getElementById(htmlのid)
これはhtmlで宣言したidをとってこれます。
つまり該当のid箇所に操作を加えることができます。

addEventListener(“ユーザー動作”, 操作)
ユーザーの動作を引き金として、次の操作を実行できます。
今回は”ユーザー動作”にclickを入れました。
これはユーザーが画面クリックした時を、起点にしたいがためです。

innerHTML
HTML側に文章を渡すことができます。
html表記がそのまま使えるのでかなり便利ですね。

実行結果はこうなります

EA1E6052-F8A8-4786-B685-F6910538705C.jpeg

9E1600C5-884E-4440-861E-1C6C91BCF9EC.jpeg

以上です!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T09:00:03+09:00

ネストしたものに削除機能導入

gorupの中のmessageに削除機能導入

ネストの中のmessageに削除機能導入するさい躓いたので備忘録として書きます。

routes.rb
  resources :groups, only: [:new, :create, :edit, :update, :show] do
    resources :messages, only: [:index, :create, :destroy]
  end
messages_controller.rb
  before_action :set_group
...
  def destroy
    message = Message.find(params[:id])
    message.destroy
    redirect_to group_messages_path(@groups)
  end
...
  def set_group
    @groups = Group.find(params[:group_id])
  end

rails routes
Image from Gyazo

問題点

躓いた箇所は下記のlink_to後ろの記述
このままではどのグループのどのメッセージなのか指定できてない

messages/index.html.erb
      <%= link_to "/messages/#{message.id}", method: :delete do%>

下記のようにメッセージの前にどのグループかを指定することで解決

messages/index.html.erb
      <%= link_to "/groups/#{@groups.id}/messages/#{message.id}", method: :delete do%>

rails routesをした時にURI Patternを見ておく！！！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T06:11:01+09:00

開いているウインドウの全タブのページタイトルとURLを取得するChrome拡張作った

はじめに

作り始めてから色々調べてたら「GetTabInfo」など既に公開されてるのもので実現可能でした。ただ、一度Chrome拡張を自作することにこそ意味があると思って開発を進めました。
あとちなみに今回でChrome拡張の開発は初めてでした。まあ、HTMLやJavaScriptにはある程度慣れてるので躓いたのは普通のサイトならできてもChrome拡張では制限されてできないことへの対策ですかね・・・。

それはそうと、なんで必要なん？

まずひとつ、私自身がタブ魔で、常に開いているタブの数が半端ない（開発中に開いてる全ウインドウのタブの数をコンソール出力したら80くらいあったわ。）というのはある。そのせいでめちゃくちゃChromeちゃんがRAMをもりもり食べてるのは仕方ない。

あとはまあ、少し前からQiitaでこうやって記事書いたりしてますが、いちいち全ての参考文献のwebページのタイトルとURLをコピペするのは面倒くさすぎる。一応今回で完成には至ったので、今回の記事からワンクリックで参考文献が貼り付けられます。
アルル「やったね、カーくん！！」
カーバンクル「ぐぐー！」
というぷよキャラの勝利セリフが一瞬横切りました。が、見なかったことにしましょう。

機能紹介

現時点ではまだ設定を変える機能は未実装なので直接JavaScriptのコードを弄ることになりますが、今後、設定を変えられるようにする予定です。自分が使いたいので。笑

テンプレート機能で表現の幅が広がる！

getTitleAndURL.js15行目の変数を書き換えることで、コピーしたいタイトル、URLの形式（コロン区切りやMarkDown形式など）に変えることができます。

%%title%%：ページのタイトルに置換されます。
%%URL%%：ページのURLに置換されます。

仕様上、「'」「"」「\」を含めるには、エスケープシーケンス「\'」「\"」「\」を用いる必要があります。

例えば、MarkDown形式に対応させる（そのまま貼り付けて使えるようにする）には、[%%title%%](%%URL%%)のようにします。デフォルトでは、[%%title%%](%%URL%% \"%%title%%\")となっており、aタグのtitle属性を付与させています。

区切り文字編集機能でより快適に！

getTitleAndURL.js14行目の変数を書き換えることで、一つ一つのページのタイトル&URL間の区切りを指定できます。これにより、コンマ区切りなどにもできます。デフォルトでは改行となっています。

これがなくっちゃ始まらない！開いている全てのタブのページ情報のクリップボードへのコピー！

getTitleAndURLofALLTabsを動かしたウィンドウ内の全てのページのタイトルとURL（テンプレートと区切り文字に基づく）を表示し、「copy」ボタンのクリックでクリップボードにコピーすることができます。

ソースコード

ひとまず仮のものなのでUIなどは非常にシンプルです。CSS不使用なのでHTML初心者に優しい（？）
GitHubでも公開しています。→yukuduri/getTitleAndURLofALLTabs

manifest.json
{
  "name": "get Title&URL of ALLTabs",
  "author": "yukuduri",
  "version": "1.0.0",
  "description": "開いているウインドウ内のすべてのタブのタイトルとURLを取得します。",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action":{
    "default_icon": {
      "19": "icon19.png"
    },
    "default_title": "get Title&URL of ALLTabs",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "tabs",
    "clipboardWrite"
  ],
  "manifest_version": 2
}
popup.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <script src="getTitleAndURL.js"></script>
  </head>
  <body>
    <h2>get Title＆URL of ALLTabs</h2>
    <label>現在のウインドウのタブ数：<input id="numOfTabs" type="number" readonly></label><br><br>
    <label>取得したタイトルとURL：<textarea id="txt"></textarea></label><br>
    <button id="copy">copy</button>
  </body>
</html>
getTitleAndURL.js
const createTextFromTemplate = (title, url, template) => {
  let txt = template;

  txt = txt.replace(/%%title%%/g,title);
  txt = txt.replace(/%%URL%%/g,url);
  return txt;
}


const run = () => {
  //現在のウインドウのタブをすべて取得
  chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT},(tabs) => {
    let txt = '';
    const delimiter = '\n';  //区切り文字
    const template = '[%%title%%](%%URL%% \"%%title%%\")'; //テンプレ

    document.querySelector('#numOfTabs').value = tabs.length;

    tabs.forEach((tab,i) => {
      if(i!=0) txt += delimiter;  //最初は区切り文字不要
      console.log(tab.title+" "+tab.url);
      txt += createTextFromTemplate(tab.title,tab.url,template);
    });

    document.querySelector('#txt').value = txt;

  });
}

const copy = () => {
  const copyText = document.querySelector('#txt');
  copyText.select();
  document.execCommand('copy');
}

window.addEventListener('load',()=>{
  run();
  document.querySelector("#copy").addEventListener("click", copy);
})

簡単な解説

manifest.json

細かいところは参考文献を見ていただくことにして、需要度の高いものをいくつか。

"permissions"："activeTab","tabs","clipboardWrite"の3つを指定。"activeTab"は不必要なときに動作させないため、"tabs"は実行時のタブ以外の情報を取り出すために必要、"clipboardWrite"はdocument.execCommand('copy');を使うなら必須ではないが付けておいてね、ってことみたいなので付けた。

あ、ちなみにアイコンはフリーソフトのInkscapeで作りました。

popup.html

省略。次のgetTitleAndURL.jsのときに少し触れます。

getTitleAndURL.js 

const createTextFromTemplate = (title, url, template) => {
  let txt = template;

  txt = txt.replace(/%%title%%/g,title);
  txt = txt.replace(/%%URL%%/g,url);
  return txt;
}

templateに含まれる文字列「%%title%%」を全てtitleに、「%%URL%%」を全てurlに、それぞれ置換します。

const run = () => {
  //現在のウインドウのタブをすべて取得
  chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT},(tabs) => {
    let txt = '';
    const delimiter = '\n';  //区切り文字
    const template = '[%%title%%](%%URL%% \"%%title%%\")'; //テンプレ

    document.querySelector('#numOfTabs').value = tabs.length;

    tabs.forEach((tab,i) => {
      if(i!=0) txt += delimiter;  //最初は区切り文字不要
      console.log(tab.title+" "+tab.url);
      txt += createTextFromTemplate(tab.title,tab.url,template);
    });

    document.querySelector('#txt').value = txt;

  });
}

現在のウインドウのタブをすべて取得して実行します。chrome.windows.WINDOW_ID_CURRENTには今開いているブラウザウィンドウのidが格納されているのでこれを渡せば今開いているウインドウの全てのタブを取得できます。ここではtabsにtabの配列が入っています。詳しくは省略しますが、ともかく、tab.titleでそのタブのページタイトルtab.urlでURLが取得できます。あとはそれを利用してコピーするための文字列を生成します。生成したらtextareaにぶち込みます。ついでに今のウインドウで開いてるタブ数を表示しようとしましたが、Chrome拡張の制限から、popup.htmlのHTMLをinnerHTMLなどでは扱えないようでした。なのでinput要素で実現しています。

const copy = () => {
  const copyText = document.querySelector('#txt');
  copyText.select();
  document.execCommand('copy');
}

生成して出力された文字列をクリップボードにコピーします。
`document.execCommand('copy');'は全ての機種で動作するわけではなかったはずですが、まあPC版Chromeでの動作であればまず問題ないはずなので大丈夫でしょう。

window.addEventListener('load',()=>{
  run();
  document.querySelector("#copy").addEventListener("click", copy);
})

アドレスバー横のChrome拡張のアイコンをクリックしてpopup.htmlが表示されるときに実行する場所です。開いたと同時に取得からtextareaへの挿入を終わらせてしまいます。
あとは、copyボタンがクリックされたときにクリップボードにコピーさせるだけです。

owata

今回は以上になります。
Chrome拡張の設定の件でまたもう少しやって再び記事を書こうかなとか思ってますが、徹夜で作業してましたし眠いのでこれから寝ます。
誤字とかあったら起きてから直しますので、コメントに書いていただけるなどすると助かります。おやすみなさい。

参考文献

今回作成した拡張機能で生成した文字列を以下に貼り付けてしまいましょう。
今回も、多くの記事を参考にさせていただきました。ありがとうございます。

ページのタイトルとURLを取得するChrome拡張を作った。 - Qiita
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】 - Qiita
Chrome拡張機能作成〜超基礎編〜 - Qiita
特定の文字列を全て置換する[Javascript] - Qiita
Chromeアドオン開発のチュートリアル：　ページの背景色を変えるアドオン（Getting Started Tutorial） - 主に言語とシステム開発に関して
クリップボードとのやりとり - Mozilla | MDN
EventTarget.addEventListener() - Web API | MDN
chrome.windows - Google Chrome
Declare Permissions - Google Chrome
The activeTab permission - Google Chrome
chrome.windows-Google Chrome

あ、これは以前私が書いた記事ですが、一通りまとまっているので自分でも重宝しています。
JavaScript基礎文法 - Qiita

ちなみにこんな感じで取得できています。

[ページのタイトルとURLを取得するChrome拡張を作った。 - Qiita](https://qiita.com/a01sa01to/items/bd7b18b4ec3dc6c46b32 "ページのタイトルとURLを取得するChrome拡張を作った。 - Qiita")
[Chrome 拡張機能のマニフェストファイルの書き方 - Qiita](https://qiita.com/mdstoy/items/9866544e37987337dc79#options_page "Chrome 拡張機能のマニフェストファイルの書き方 - Qiita")
[Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】 - Qiita](https://qiita.com/guru_taka/items/37a90766f4f845e963e5 "Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】 - Qiita")
[Chrome拡張機能作成〜超基礎編〜 - Qiita](https://qiita.com/Ryo_Suzuki/items/d247008888ef67bdeda8 "Chrome拡張機能作成〜超基礎編〜 - Qiita")
[特定の文字列を全て置換する[Javascript] - Qiita](https://qiita.com/DecoratedKnight/items/103ab57431b6c448e535 "特定の文字列を全て置換する[Javascript] - Qiita")
[Chromeアドオン開発のチュートリアル：　ページの背景色を変えるアドオン（Getting Started Tutorial） - 主に言語とシステム開発に関して](https://language-and-engineering.hatenablog.jp/entry/2018/10/22/Chrome%E3%82%A2%E3%83%89%E3%82%AA%E3%83%B3%E9%96%8B%E7%99%BA%E3%81%AE%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%EF%BC%9A_%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE "Chromeアドオン開発のチュートリアル：　ページの背景色を変えるアドオン（Getting Started Tutorial） - 主に言語とシステム開発に関して")
[クリップボードとのやりとり - Mozilla | MDN](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard "クリップボードとのやりとり - Mozilla | MDN")
[EventTarget.addEventListener() - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener "EventTarget.addEventListener() - Web API | MDN")
[chrome.windows - Google Chrome](https://developer.chrome.com/extensions/windows#current-window "chrome.windows - Google Chrome")
[Declare Permissions - Google Chrome](https://developer.chrome.com/extensions/declare_permissions "Declare Permissions - Google Chrome")
[The activeTab permission - Google Chrome](https://developer.chrome.com/extensions/activeTab#what-activeTab-allows "The activeTab permission - Google Chrome")
[chrome.windows-Google Chrome](https://developer.chrome.com/extensions/windows#property-WINDOW_ID_CURRENT "chrome.windows-Google Chrome")
[JavaScript基礎文法 - Qiita](https://qiita.com/yukuduri/items/cff4a1f9c85114600425 "JavaScript基礎文法 - Qiita")
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-27T05:00:34+09:00

初心者によるプログラミング学習ログ 250日目

100日チャレンジの250日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

250日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧