2019-12-08

#Vue事始

はじめに

登録してた日付を間違えて記憶した結果丸一日ずれました。ということで仙台高専アドカレ7日目はOBです

Vueを試してみるよ

どういう経緯かは簡略に説明するとこのツイートで決めました。

f:id:poolbooyer:20191208005227p:plain — ネタに困った男の末路

ということでVueを触ります。ただ、経験ががっつりあるわけでもないので調べつつ、試しつつ、継続して記事にしていくことにします。

今回の概要

dockerを使って開発の環境を立てる

Docker環境でVueを動かす

今回はローカルにあれこれせずDockerでなんとかやります今回お試しでやるだけってことを考えるとDockerでよかったのですが、他に色々動かすことも多いと思うのでdocker-composeを使用します。

ということでまずはDockerfile

# nodeのイメージを取得
FROM node

WORKDIR /usr/src/app

RUN apt-get update &&\
    npm install -g npm @vue/cli

Nodeのimage取ってきてVue/cliを取ってくるところまでやります。

そしてdocker-compose.ymlは以下の感じ。

version: '3'
services: 
  app:
    build: ./docker/Vue/
    ports: 
      - 3000:3000
    volumes: 
      - ./Vue:/usr/src/app
    stdin_open: true
    tty: true

でこれをビルドして起動してコンテナ内に入ります。

そして以下の手順でコマンドを実行します。 1. vue create .を実行 2. 開発するプロジェクトを作成する(今回はdefault,yarnを選択) 3. 構成された後yarn serveを実行することでサービス開始

1を実行するとこんな感じに進んでいきます。

root@6352617c5535:/usr/src/app# vue create .

>> 生成するディレクトリを確認します(今回はカレントディレクトリ)
Vue CLI v4.1.1
? Generate project in current directory? Yes

>>構成パターンを選択(今回はプリセット)
Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)


Vue CLI v4.1.1
✨  Creating project in /usr/src/app.
⚙  Installing CLI plugins. This might take a while...

yarn install v1.19.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...

success Saved lockfile.
Done in 61.69s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.19.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 71.52s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project app.
👉  Get started with the following commands:

 $ yarn serve

これでプロジェクトは完成します。
完成したプロジェクトをビルドします。
$yarn build
ビルド完了後に $yarn serveを実行するとlocalhostで動作を確認することができるようになります。
表示される画面を確認すると以下の感じ

f:id:poolbooyer:20191208231123p:plain — アクセス時に表示される画面

これでhotloadも動くのでファイル更新すると自動で画面更新されます。この先はまた別日で書きます。

日にち間違えててごめんなさい(土下座)

2019-08-12

# ＜JavaScript＞＜リメイク＞表示非表示切り替え色々してみた

JavaScript プログラミング(JavaScript)

夏の自由研究

今回は過去記事のリメイク的な何かです対象の記事は以下から

poolbooyer.hatenablog.jp

表示非表示切り替えというかJSでスタイルを触る方法的な話

1. 前回の振り返り

まずは前回の振り返りから
そもそもこれでやりたかったことから振り返っていきましょう

ボタンを押すと表示
再度押すと非表示

簡単ですね、脳死で実装できそうです。
そのためにあの時はsetAttributeを使いました
コードでいうと以下のような感じ

var display = function(tab) {
    //切り替えるタブを確認する
    if (tab == 0) {
        //ボタンを押されなかった方を閉じるタブに指定
       close= 1;
   } else {
       close = 0;
    }
    //切り替える対象を取得
   var pane = document.getElementsByClassName("data");
   //表示する
   pane[tab].setAttribute("style", "display:inline");
   //非表示にする
  pane[close].setAttribute("style", "display:none");
}

これだとボタンが実は増えてるっていう
この時の自分は何を考えていたのでしょうということで、単一ボタンで切り替えるパターンを考えてみました。

2.今回試すこと

今回は以下の表を元に4つを試します

	onclick	Eventlistener
style属性変更	1	3
class追加	2	4

今回はスタイルを直接要素に与えるパターンとクラスを追加するパターンの2つを作ります
その上で、トリガーをonclickとeventlistenerの2パターンで比較してみます

3.作ったコード

今回作ったものはcode Penで以下からご確認あれって感じです

See the Pen jsでスタイルを切り替えるパターン試し集 by poolbooyer (@poolbooyer) on CodePen.

4.試した感想

1.style属性変更

スタイルの状態を持ってきて比較してっていうこともあり、コードは長くなります
あとは、JSをあんまり簡単にいじれない状況で使うとかの場合はあまりお勧めできないと思います

2.class追加

classListのtoggleを使ったのでJS単体で見たときにはスッキリしたコードになります。その分CSSを書く必要はありますが、デザイン面で変更とか、見た目に手を入れたいときにはCSSのみでいいのでJSの知識がなくてもいい感じになります

3.トリガー周り

正直な話、今回の内容だとそんなに違いがない気もしました(ダバダ〜）
もうちょい調べて悟り開きます

ということで、リメイク記事でした。今後もリメイク書いていこうかなと思います。

2019-08-05

# <google>googleのサービス使ってブログもどき作ってみた

な〜んとなく、作ってみたよ
見切り発車で書いてるからまとまるか微妙だよ
いつものことですね
は〜い

1.使ったもの

今回はgoogleのサービスだけを使ってブログっぽいものをどこまで作れるかをやろうということで、googleのサービスです

google form (入力系)
google spreadsheet(保存系)
google apps script(表示系)
bootsrap 4(見た目系)

レイアウトの調整にbootstrapをちょっと使いました。

2.書いたコード

まずはgoogle formを用意します。
今回は暫定的に以下を聞きます。

ブログタイトル（必須）
ブログコンテンツ（必須）
関連リンク（任意）

で、その結果をスプレに吐き出します。
オエ〜って感じですね（違う）
そうすることでスプレに吐き出されるのは聞いたこと＋タイムスタンプになります

そのデータを基にしてブログぽい表示をしていきます

HTML

index.html

表示の基になるものです。特に何も書いてません

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <h1>blog</h1>
    <?!= getcontent(); ?>
  </body>
</html>

さて、ここの

<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

これはcssを読み出す用のやつです。そして、

<?!= getcontent(); ?>

でコードを読みだします

css.html

google apps scriptを使うとcssもhtmlの中に書かなきゃいけません、難しいですね。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.date{
  font-size:10px;
  font-weight:200;
}
.card{
  margin-bottom:30px;
  width:400px;
}
</style>

特殊なことはないですね、bootsrap をCDNで引いてるくらいです

google apps script

htmlの表示

単純なhtmlの表示にもスクリプトが必要です。

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

これはコピペのようなものです。

sheetの情報からブログっぽく表示する

html内から呼び出したコードです

function getcontent() {
  //変数spreadsheetに指定のスプレッドシートオブジェクトを取得します
  var url ="ここにシートのリンク";
  var spreadsheet = SpreadsheetApp.openByUrl(url);

  //spreadsheetのシートを全て読み出す
  var sheets = spreadsheet.getSheets();
  //結果の格納されたシートを読み出す
  var sheet = sheets[0];

  //シートの最終行番号、最終列番号を取得
  var startrow = 1;
  var startcol = 1;
  var lastrow = sheet.getLastRow();
  var lastcol = sheet.getLastColumn();

  //シートのデータを取得
  var sheetdata = sheet.getSheetValues(startrow, startcol, lastrow, lastcol);

  //シートをhtmlコードに反映していく
  var content="";
  for(var i=lastrow-1;i>=1;i--){
    content+="<div class=\"card\">";
    content+="<div class=\"card-header\"><p class=\"card-subtitle date\">"+sheetdata[i][0]+"</p>";
    content+="<h2 class=\"card-title\">"+sheetdata[i][1]+"</h2></div>";
    content+="<p>"+sheetdata[i][2]+"</p>";
    //link適応
    if(sheetdata[i][3]!=""){
      if(sheetdata[i][3].indexOf(",")!=-1){
        var links=sheetdata[i][3].split(",");
        for(var j=0;j<links.length;j++){
          content+="<a href=\""+links[j]+"\">"+links[j]+"</a>";
        }
      }else{
        content+="<a href=\""+sheetdata[i][3]+"\">"+sheetdata[i][3]+"</a>";
      }
    } 
    content+="</div>"
  }
  return content
}

こんな感じです
シートの回答を読みだして、新しい順に表示するようにしてます。
逆順表示にして、最新の回答から順にカード表示してます。
リンク情報を別で取ってるのはリンクタグ適応のためです。
これでカード表示でいい感じのができます

3.できたもの

こんな感じのができます

f:id:poolbooyer:20190805002327p:plain — 作成した画面

改造タイム入ったのでリンクは死んでます

PCからぱらっとみるぶんには問題ないとこまできました。
どうしてもトップにgoogle公認のものではないことを示すあれが出るので、ガチブログとして運用するには向かないかも？

4.その他

参考サイト

tonari-it.com

上記ページ以外にもgas全般で参考にしてます

getbootstrap.com

にーやまの活動記録