20200528のHTMLに関する記事は12件です。

HTML&CSS~上級編~

プログラミングの勉強日記

2020年5月28日 Progate Lv.61

レスポンシブデザイン

 画面幅を合わせてレイアウトが柔軟に切り替えられる。レスポンシブデザインが適用されていないと、画面幅を狭めるとコンテンツが収まらなくなってしまうことがある。
 レスポンシブデザインを適用するためには、<head>タグ内にviewportを設定する。また、responsive.cssの読み込みではstylesheet.cssにメディアクエリ用のCSSを記述しても問題ないが、整理しやすいようにCSSを分割しresponsive.cssにメディアクエリ用のCSSを記述する。※responsive.cssの読み込みは必ずviewportの設定よりも後に記述する

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"> //viewportの設定
  <link rel="stylesheet" href="responsive.css"> //responsive.cssの読み込み
</head>
メディアクエリ

 プラウザの画面サイズに応じてCSSのスタイルを設定できる手段のこと。@media(条件){...}という形で記述する。この条件に当てはまるときのみCSSが適用される。条件には最大幅(max-width)と最小幅(min-width)を指定できる。条件を指定するときの値の部分をブレイクポイントという。

@media(max-width:1000px){
  /*1000px以下の時に適用したいCSSを記述する*/
}
レイアウトの崩れを直す

上級編.png
 要素(水色の四角)がwidth:25%で指定されているのところで、左右のpaddingを加えると要素幅の要素の合計が100%を超えてしまい、レイアウトが崩れてしまう。そこで、右のようにするためにはbox-sizing:border-boxを使うと要素の幅の合計にpaddingとborderが含まれるようになる。しかし、marginはbox-sizingでの合計値に含まれない。
 また、指定するときには*(アスタリスク)ですべての要素に対してCSSを適用することが推奨されている。

 

floatと親要素の関係

 通常は親要素の高さは子要素を包む高さとなる。しかし、子要素がfloatのとき親要素の高さは0になってしまう。(float(浮いている)は親要素から見るとfloatの子要素は存在しないように見えてしまうから)
 →float:leftclear:leftで浮いている状態を解除できる。
  ☆float:left;を適用するためだけの空タグを用意する。<div class="clear"></div>を入れる。

要素の表示/非表示

 要素の非表示:display:none;
 要素の表示 : display:block;

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

Vue.jsでinputフォームの文字数制限をする

今回のゴール

  • Vue.jsで実装するinputフォームで入力できる文字数を制限し、特定の文字数以上は入力できないようにする

実際のコード

サンプル

CodeSandboxに実際に動くもの作りました。
https://codesandbox.io/s/input-form-chara-limit-o9qp1?fontsize=14&hidenavigation=1&theme=dark

<template>
  <div id="app">
    <p>5文字以上入力ができないinputフォーム</p>
    <input type="text" v-model="inputText">
    <p>{{ inputText }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      inputText: ""
    };
  },
  watch: {
    inputText(inputText) {
      this.inputText = this.charaLimit(inputText);
    }
  },
  methods: {
    charaLimit(inputText) {
      return inputText.length > 5 ? inputText.slice(0, -1) : inputText;
    }
  }
};
</script>

watchによってv-modelで文字列inputTextが新しく入力された時に、methodのcharaLimitが動くようにします。
cahraLimmitではinputTextが5文字より多い場合は文字列の末尾を削除し、そうでなければ入力された文字列をそのまま
returnしてinputTextに代入するようにします。

inputTextが入力される度に文字列の末尾を削除するので実質的に、文字列が5文字より多い場合はinputTextに値が入らなくなります。

所感

入力された文字のバリデーションは正規表現に任して、入力文字数はsliceで対応すると簡単でした。

参考

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

【jQuery】ぺージのスクロールボタンを作りたい

ページの一番上や、特定の位置にスクロールさせるボタンを設置する際の
簡潔な手順をご紹介。

1. htmlでボタンを準備

今回はフッターの中に設置しました。

sample.html
<div class="footer">
  <div class="footer__btn">
    Page Top
  </div>
</div>

2. 位置を固定する

スクロール中に隠れないように、「z-index」も調整しておきます。

sample.css
.footer__btn {
  cursor: pointer;
  height: 80px;
  width: 80px;
  z-index: 10;
  position: fixed;
  bottom: 20px;
  right: 32px;
  background-color: red;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
}

3. jsを準備する

ボタンのクリックイベントによって、ページの最上部までスクロールさせます。

sample.js
var scrollTop = window.pageYOffset ;     //スクロール量を取得
  $(".footer__btn").on("click", function(){   //クリックした時に発火
    $( 'html,body' ).animate( {scrollTop:0}, 'slow' );  //ゆっくり一番上までスクロールさせる
  })
  $(".gy-btn").on('click', function(){
    $( 'html,body' ).animate( {scrollTop:1500}, 'slow' );
  })

ヘッダーのボタン等で指定位置までスクロールさせたい場合は
scrollTopの値を変更します。

sample.js
var scrollTop = window.pageYOffset ;     
  $(".other-btn").on('click', function(){
    $( 'html,body' ).animate( {scrollTop:1500}, 'slow' );
  })

以上で終了です。
ご覧いただきありがとうございました。

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

[Github:入門]Githubを勉強ノートとして使ってみました

目次

概要

統計学・機械学習の勉強をしているのですが、勉強したメモをネット上に保存して好きなときに確認できれば便利だと考え、上手くいきそうな方法を探してみたので備忘録としてメモを残しておきます。

ちなみに今のところの出来上がりはこんな感じです。GitHubリンク

スクリーンショット 2020-05-28 18.51.47.png

GitHubを利用することは直ぐに思いたのですが、数式を含んだ文書をどうするかで苦戦しました。結局、Python関連に関してはJupyterLabを利用し、数式を含むメモに関してはTexを使用する方法に落ち着きました。しかし、Texでメモを作成するる使いづらさも残っているので良い方法を知っていましたら教えていただければ嬉しいです。

[保存したいもの]

  • 数式を含んだ勉強メモ
  • Pythonのコードと実行結果
  • ちょっとしたメモ

[具体的な方法]

数式を含んだメモはTexでpdfを作成してGitHubに投稿する。Pythonのコードと実行結果はJupyterLabのファイル(.ipynb)をそのままGitHubに投稿する。JupyterLabでMarkdownが使用できるので、数式を含まない簡単なメモもJupyterLabで作成してGitHubに投稿します。

[使用するツールやサービス]

  • GitHub
  • JupyterLab
  • Tex
  • VSCode

Texのインストール

[インストール環境]

  • macOS Mojave(10.14.6)
  • VSCode (v1.45.1)

[インストール手順]

Homebrewを使用してMacにTexをインストールしました。インストールの方法は@sira様のこちらの記事を参考にさせて頂きました。

> brew cask install basictex
> sudo tlmgr update --self --all
> sudo tlmgr paper a4
> sudo tlmgr install collection-langjapanese
> sudo tlmgr install latexmk
# この後にjlistingの設定を実施しました。

[latexmkの設定]

latexmkはTexファイルのコンパイルからpdf作成までを一度に実行してくれる便利ツールです。使用するには設定ファイルが必要で、設定ファイル(.latexmkrc)をTexファイルのあるディレクトリかホームディレクトリに作成します。ホームディレクトリに作成すれば任意の場所でlatexmkが使用できるので、今回はホームディレクトリに作成しました。設定の内容はコピペしてきたのですが、コピー元のサイトがわからなくなってしまったのでリンク貼れませんでした。すみません。

~/.latexmkrc
#!/usr/bin/env perl

# LaTeX
$latex = 'platex -synctex=1 -halt-on-error -file-line-error %O %S';
$max_repeat = 5;

# BibTeX
$bibtex = 'pbibtex %O %S';
$biber = 'biber --bblencoding=utf8 -u -U --output_safechars %O %S';

# index
$makeindex = 'mendex %O -o %D %S';

# DVI / PDF
$dvipdf = 'dvipdfmx %O -o %D %S';
$pdf_mode = 3;

# preview
$pvc_view_file_via_temporary = 0;
if ($^O eq 'linux') {
    $dvi_previewer = "xdg-open %S";
    $pdf_previewer = "xdg-open %S";
} elsif ($^O eq 'darwin') {
    $dvi_previewer = "open %S";
    $pdf_previewer = "open %S";
} else {
    $dvi_previewer = "start %S";
    $pdf_previewer = "start %S";
}

# clean up
$clean_full_ext = "%R.synctex.gz"

[vscodeの設定]

Texで文書を作成するのエディタとしてVSCodeを使用するので、Texの編集に便利なモジュールをインストールします。VSCodeでの環境構築には@Gandats様のこちらの記事を参考にさせて頂きました。VSCodeの設定は以下の様にしました。"latex-workshop.intellisense.package.enabled"以下を追記してます。

setting.json
{
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
    "python.jediEnabled": false,
    "editor.parameterHints.enabled": false,
    "window.zoomLevel": 0,
    "javascript.updateImportsOnFileMove.enabled": "always",

    "latex-workshop.intellisense.package.enabled": true,
    "latex-workshop.latex.clean.fileTypes": [
      "*.aux",
      "*.bbl",
      "*.blg",
      "*.idx",
      "*.ind",
      "*.lof",
      "*.lot",
      "*.out",
      "*.toc",
      "*.acn",
      "*.acr",
      "*.alg",
      "*.glg",
      "*.glo",
      "*.gls",
      "*.fls",
      "*.log",
      "*.fdb_latexmk",
      "*.snm",
      "*.synctex(busy)",
      "*.synctex.gz(busy)",
      "*.nav",
      "*.synctex.gz"
    ],

    "latex-workshop.latex.tools": [
      {
        "name": "latexmk",
        "command": "latexmk",
        "args": [
          "-silent",
          "-outdir=%OUTDIR%",
          "%DOC%"
        ],
        "env": {}
      }
    ],
    "latex-workshop.view.pdf.viewer": "tab"
}

使ってみた感想

とりあえずやりたいことはできましたが、いちいちTexでメモを作成するのは面倒でした。やはり、Markdownで気楽にメモを作成して投稿できた方が楽です。Markdownで記述した数式がGitHub上でTexの様に扱えたら嬉しいな!!それとも僕が知らないだけで普通に扱えるのかな?

おまけ(失敗した方法)

[JupyterLabで数式を書いてGitHubに投稿する]

この方法でもGitHub上で数式が表示されるのですが、数式のレイアウトがローカルの環境と異なって上手く表示できませんでした。

スクリーンショット 2020-05-28 18.25.01.png

[JupyterLabをhtmlに変換してGitHubに投稿する]

これは自分的にはかなりいい方法だと思って、実際に試してところローカルでhtmlをブラウザで表示したら綺麗に表示できてテンションがあがったのですが、GitHub上でhtmlが表示されないらしく(htmlのソースコードが表示される)失敗しました。

参考

以下のサイトを参考にさせていただきました。

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

【神業】面倒なHTMLタグ入力を光の速さで終わらせる【定型文ツール】

はじめに

フリーランスRailsエンジニアおよびWEBライターをやっているソエノと申します。この記事では「面倒な定型文入力を神速で終わらせる方法」についてご紹介します。

注意事項 : コメント欄への書き込みについて

コメント欄への「誹謗中傷・暴言」の書き込みはインターネット上であれ「威力業務妨害」が成立する危険性があります。全てのコメントは削除後も筆者のメールアドレスに保存されていますので、何卒ご注意の程よろしくお願いいたします。

結論

「Dash」というツールを使います。以下のようなことができます。以下は、HTMLのaタグを書くときの例です。

a241ccbb5154265091554405f3d18873.gif

う〜ん、神。普通、aタグを書こうとしたら<a href="hoge">fuga</a>のhogeとfuga以外の部分って手入力しますよね。上記の動画では;atagという呪文によって謎のウィンドウを召喚し、hogeとfugaだけを入力してEnterすることによって何とaタグを完成させてしまいました。変換キーとかも使ってないので、もはや辞書登録使うより速いです。

このツールを使うなら、ブロガーやフロントエンジニアの方はHTMLタグを書くために<a href="hoge">fuga</a>みたいなテキストを手入力するのは金輪際やめましょう。Railsエンジニアなら「routes.rbのresourcesってどういう風に書くんだっけ...」とか「バリデーションってどう書くんだっけな?ググるか...」みたいなことが今後一切なくなります。

ダウンロード方法

こちらからダウンロードできます。リンク先にアクセスしたら、画面右にあるDownloadをクリックです。zipファイルがダウンロードされるので、解凍してアプリケーションフォルダにアプリを移動させましょう。

使い方

使う前に、アプリの動作許可設定しないと動かないのでMacのシステム環境設定を開きましょう。パソコン左上に表示されているりんごマークをクリックしたら「システム環境設定」というのがありますから選びます。スクリーンショット 2020-05-28 14.57.32.png

スクリーンショット 2020-05-28 14.58.04.png

家のマークで「セキュリティとプライバシー」というのがありますので、これを選びます。下記画面で左側のウィンドウを少し下にスクロールすると、「アクセシビリティ」という項目があるので、選びます。そして左下の錠マークをクリックしてパソコンのロックを解除します。あとは「Dash」というところのチェックをONにしましょう。これで準備OKです。

スクリーンショット 2020-05-28 14.59.20.png

それではDashを起動しましょう。

スクリーンショット 2020-05-28 15.03.11.png

起動後の画面はこんな感じです。まずは右上の「Manage Docsets」をクリックしましょう。

スクリーンショット 2020-05-28 15.03.52.png

上記のような画面になります。続けて、上のメモマーク「Snippets」を選択しましょう。

スクリーンショット 2020-05-28 15.07.02.png

Snippetsを選択したら上記のような画面になるので、Enable snippetsというチェックをONにしましょう。ONにしたらこの設定画面は不要なので左上の×マークで閉じます。

スクリーンショット 2020-05-28 15.14.44.png

設定後、ホーム画面のSearchという欄でSnippetsというのが選択できるようになりますので、クリックします。

スクリーンショット 2020-05-28 15.15.49.png

すると上記のようになるので、New Snippetsをクリック。

スクリーンショット 2020-05-28 15.16.22.png

なんか入力欄が二つ出てきます。上の細い入力欄が、先ほど紹介した「呼び出しの呪文」です。下の大きなの欄が「実際に呼び出されるテキスト」になります。試しに、次のように設定してみましょう。上の入力欄には;atag、下の入力欄には<a href="__link__">__text__</a>と書きました。

スクリーンショット 2020-05-28 15.18.04.png

設定はこれで完了です。特に保存とかは無いみたいなので、このままDashアプリからは離れてしまって構いません。あとは、適当なテキスト入力欄に;atagと打ってみてください。なんか召喚されると思います。

新しいスニペットを登録する

この「スニペット」というのが先ほどのように「召喚の呪文と、そこから召喚されるテキストの組み合わせ」という意味のようです。新しいスニペットを登録するには、下記動画のように画面上のプラスマークをクリックすればいいようです。

20c74c6c0dffda9faa872fab231e6f92.gif

さらに高速化していく方法【カスタマイズ機能】

上記では__link____text__といった記述によってテキストを入力できるようにカスタマイズしました。これは「アンダースコア2つで囲むと任意テキスト入力できるようにする」というDashのカスタマイズ機能です。このほかにも便利な機能がいくつもありますので、使えそうなものをピックアップしてご紹介します。

クリップボードの情報を自動で挿入する

ここでいうクリップボードというのは「コピーしたテキスト」のことです。例えば、さっきのaタグ生成のやつを以下のように書くと、直前にURLをコピーしていれば、コピーしたテキストを勝手にペーストしてくれます。

スクリーンショット 2020-05-28 15.32.53.png

93c5b8717f74c67fc7893ef62a7a3925.gif

@clipboardという記述がそのままクリップボードの情報に置き換わるようです。

挿入後のカーソルの位置を指定する

さっきはDashで呼び出されたウィンドウ上で文字入力していましたが、先にaタグを生成してからエディタ上でテキストを入れたい時はこれが便利です。@cursorと書くと、スニペット挿入後に勝手にカーソルが@cursorと書いた位置に飛んでくれます。

スクリーンショット 2020-05-28 15.43.18.png

de3a1be8afb5d53bfd35edfe550621d5.gif

便利なプリセット

この記事をここまで呼んでくださった方のために、プリセットをご用意してみました。よろしければ、ご活用ください。

HTML

aタグ
;atag
<a href="@clipboard">@cursor</a>
divタグ
;divtag
<div class="__class__">@cursor</div>
hタグ(h1,h2,h3,...)
;htag
<h__number__>@cursor</h__number__>
pタグ
;ptag
<p>@cursor</p>
scriptタグ(JavaScript埋め込み)
<script type="text/javascript">
  @cursor
</script>
任意のHTMLタグ
;html
<__html__>@cursor</__html__>

Ruby on Rails

routes.rbのresources
;resources
resources :__controllerName__, only: [:__action1__, :__action2__]
form_with(haml記法)
;form_with
= form_with model: __modelName__, url: __actionUrl__, local: __trueOrFalse__ do |f|
  @cursor
バリデーション(存在)
;validate
validates :__columnName__, presence: true

JavaScript

console.log
;console
console.log("@cursor");
jQueryを使ったDOM取得
;jq
$("@cursor")

記事を読んでいただきありがとうございました

ここまで読んでくださって本当にありがとうござます。私から皆さんにGiveさせて頂けるのはこうしたエンジニア向け情報くらいしかありませんが、皆さんに記事を読んでいただけて、そして皆さんのお役に立つことができれば、それは私の何よりの喜びになります。今後とも皆さんのお役に立てるよう記事執筆活動などを進めていきたいと思っていますので、これからも何卒よろしくお願いいたします。

まとめ

・Dashというアプリを使うことで、HTMLタグの入力を楽にしたり、Railsなどのプログラミング言語における「定型句」を覚える必要がなくなりました。代わりに自分で登録した「召喚の呪文」を覚える必要がありますが、これまでの作業よりも幾分マシになっているはずです。

以上となります。それでは、生産的なコーディングライフを!!

筆者Twitter: soeno_onseo

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

kintone ポータルをアプリで動的に制御

github repositoryはこちらから。 見た目 仕様 ポータルの表示内容を動的にアプリのレコードで制御をすることができます。 初心者の方も簡単に利用できるようになってます。 注意: この自動ポータル機能の設定には管理者権限で、 kintone全体カスタマイズにjsファイルをアップロードする必要があります。 REST APIを使い、アプリからポータルへ、レコード取得をしているので ユーザーが多い環境では1日1万件のリクエスト上限を超え、 ポータルカスタマイズが利用できなくなる可能性もあります。 導入の流れ アプリテンプレートからアプリ作成 レコード作成 JSの一部を変更 jQueryと一緒に全体カスタマイズ保存 githubから関連ファイルをダウンロード githubにアクセスして、 右上の↓CodeからDownload Zipでファイルをダウンロード。 ダウンロードできたら、zipファイルを展開します。 (エクスプローラー上で右クリック→すべて展開) Portal_Setting アプリ作成 アプリは全員が閲覧権限を持つスペース、 また、そのようなスペースが存在しない場合は、 ポータルトップ上でアプリの作成をして下さい。 先ほど、展開したファイルの中にtemplatesというファイルがあります。 その中のportal_manage.zipをアプリ作成の、 テンプレートファイルを読み込んで作成に使用します。 設定 アプリ名は変えていただいて問題ありません。 アプリの設定はテンプレートから作成のままで変更は特にありません。 入力制御も最低限、プログラムで補っています。 フィールドコード、フィールド名はプログラムに使用している箇所もあります。 不必要に変えないようにしてください。 一覧はデフォルトで見やすいように設定しているだけなので、 絞り込みなどを参考に追加、作り直し問題ありません。 閲覧権限 ログインユーザーによってポータルの表示内容変更ができます。 アプリショートカット、スペースの表示は、 kintone従来のレコードの閲覧権限で制御できます。 レコードの閲覧権限についてはこちらから。 レコード登録 ポータル背景 お知らせ アプリショートカット スペース 上記の4項目を設定します。 ポータル背景 1度データ作成した後に変更する場合はデータを編集してください。 フィールド 内容 ポータル背景_画像 ポータルの背景になる画像ファイル アプリ群タイトル アプリショートカット枠のタイトル お知らせタイトル お知らせ枠のタイトル スペースタイトル スペース枠のタイトル お知らせ一覧 お知らせ内容はリッチエディタの内容がHTML形式でトップに表示されます。 優先順位は更新日時が一番最新のものが1件表示されるようになっています。 お知らせの履歴を残すこともできますが、 レコード数が多くなればなるほど、ポータルの表示速度が遅くなる可能性があります。 推奨はレコード編集で随時変更する運用です。 フィールド 内容 お知らせ内容 リッチエディタ アプリショートカット 設定数制限はありませんが、ショートカットなのでスマートに使いましょう。 メイン項目 アイコンファイルは正方、(100px X 100px等)を推奨しています。 ファイルは1つまでです。 フィールド 内容 アプリ優先順位 ポータルに表示する並びの指定 アプリID アプリID、URL指定に使いますアプリトップのhttps://sample.cybozu.com/k/XXXXの数字 アプリアイコン アプリアイコン画像ファイル デザイン 少し難しいかもしれませんが、デザインの幅を広げるため、 グラデーションカラー設定を可能にしています。 詳細はこちら。 カラーの指定方法(例) #ffce44 100% またはrgb rgb(255,0,0) 100% フィールド 内容 数値 グラデーションの傾き設定 カラー1 指定方法: (カラーコード[半角スペース]濃さ%) カラー2 指定方法: (カラーコード[半角スペース]濃さ%) 例: linear-gradient(180deg,#F4CC70 0%,#DE7A22 100%) 以下のテーブル内容で上記のCSSがアプリアイコンのbackgroundに適用されます。 フィールド 内容 数値 180 カラー1 #F4CC70 0% カラー2 #DE7A22 100% スペース フィールド 内容 スペース優先順位 ポータルに表示するスペースの並びの指定 スペースID スペースID、URL指定に使いますスペーストップのURLhttps://sample.cybozu.com/k/#/space/XXXXの数字 スペース名 スペースの名前(実際のスペースの名前と違っても、問題ないです。) jsファイルの編集 ダウンロードしたファイルのtemplatesのjsフォルダ中に、 ~~~desktop.js, ~~~mobile.js というファイルがあります。 初心者の方 右クリックで編集を選択後、警告を確認して開いてください。 下記の1の数字を先ほど作成したアプリのアプリIDを半角数字で入れる (function() { "use strict"; //半角数字で作成したアプリのIDを設定 const APPID = 1; ----------------以下省略------------------ 例:アプリのページを開いた時のurlが https://xxxx.cybozu.com/k/666/ の時、 666; セミコロン;は消さないでください。 (function() { "use strict"; //半角数字で作成したアプリのIDを設定 const APPID = 666; ----------------以下省略------------------ 今回のカスタマイズで必要なもの 全体カスタマイズ: PC用のJavaScriptファイル https://js.cybozu.com/jquery/3.5.0/jquery.min.js Desktop用ファイル スマートフォン用のJavaScriptファイル https://js.cybozu.com/jquery/3.5.0/jquery.min.js Mobile用ファイル コピペURLを追加をして大丈夫です。 kintoneポータル設定 ポータル右上の設定からポータル設定ができます。 ポータルコンテンツの表示に関しては、どの設定でも問題はありません。 ポータルを整理するのであれば、通知と未処理の項目くらいがベスト。 参考 kintone help レコードの閲覧権限を設定する Kintone Portal Designerを使ってポータルをデザインしよう MDN web docs linear-gradient()
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

株価の時系列データ(日足)の取得

株価の日足データをpythonで取得したい

ふと、株価データの解析をしてみたくなり、やり方を考えてみました。
株関連の前提知識がないので、本当はこんなことしなくても良いのかも知れません。
でもまあこれでも取得できたので、とりあえず公開します。

手法

以下の3つの行程を経て、データの取得を試みました。

1.pandas.read_html で、日足データを取得

変なサイトは使いたくなかったので、Yahoo Fainance からデータを読み取らせていただくことに。

pandas.read_html というのは、htmlの中から「これ、表っぽいなー」というものを抽出してくれます。なので戻り値は dataframe の入った list です。

Yahoo Fainance は以下の写真のようなページで、明らかに表は1つなのですが、あくまでも表っぽいものを抽出するので上の「パナソニック(株) 978.5 前日比 ...」みたいなところも抽出します。

image.png

その解決策として、取得したい表に合わせてif文でふるいにかけました。

2.datetime関数 で、連続した日付を取得

望みの期間のデータを取得するには、その期間をurlで指定してあげないといけません。
Yahoo Fainance では、一度に20個のデータの表示が限界です。
欲しいデータが20個以下なら、与えられた日付をただurlに埋め込めば全データ取得出来るのですが、それ以上のデータ数が欲しいときにはうまく取得出来ません。

そこで、指定した期間の日付データリストを作成する関数を作って、間の期間でも指定できるようにしようと考えました。

daterange.py
from datetime import datetime
from datetime import timedelta

def daterange(start, end):
    # -----make list of "date"---------------------------
    for n in range((end - start).days):
        yield start + timedelta(n)
    #----------------------------------------------------

start = datetime.strptime(str(day_start), '%Y-%m-%d').date()
end   = datetime.strptime(str(day_end), '%Y-%m-%d').date()

list_days = [i for i in daterange(start, end)]


ここでの start と end はtatetime関数といい、日付専用の関数です。
足したり引いたりすることは出来ません。

datetime.html(n)

datetime.deltaは、datetime関数の日付の足し引きに使われます。
第一引数はdaysなので、ここではstartからendの日数分だけ順に1日ずつ足されてyieldされます。

yieldという関数を見慣れていない人もいるかもしれないので説明すると、yieldというのは戻り値を小分けにして返すことが出来る関数です。
ここでは大したメリットはありませんが、一度に大きなリストが返ってくるような関数だとたくさんのメモリを一度に消費してしまうことになるので、そういうときにyieldはメモリ消費の抑制に貢献してくれます。

グラフの可視化

普通に表示しても良かったのですが、暇つぶしにfft(高速フーリエ変換)したグラフも表示させてみました。

Figure_1.png

最後にコード

ついでにパナソニックとソニーと日系平均の銘柄コードも記載したので使ってみてください。

get_stock.py
import pandas
import numpy as np
import matplotlib.pyplot as plt
import csv

from datetime import datetime
from datetime import timedelta





def get_stock_df(code, day_start, day_end):# (Stock Code, start y-m-d, end y-m-d)
    # -----colmn name------------------------------------
    # 日付、始値、高値、安値、終値、出来高、調整後終値
    #Date, Open, High, Low, Close, Volume, Adjusted Close
    #----------------------------------------------------
    print("<<< Start stock data acquisition >>>")
    print("code:{0}, from {1} to {2}".format(code, day_start, day_end))

    def get_stock_df_under20(code, day_start, day_end):# (Stock Code, start y-m-d, end y-m-d)
        # -----source: Yahoo Finance----------------------------
        # Up to 20 data can be displayed on the site at one time
        #-------------------------------------------------------

        sy,sm,sd = str(day_start).split('-')
        ey,em,ed = str(day_end).split('-')

        url="https://info.finance.yahoo.co.jp/history/?code={0}&sy={1}&sm={2}&sd={3}&ey={4}&em={5}&ed={6}&tm=d".format(code,sy,sm,sd,ey,em,ed)

        list_df = pandas.read_html(url,header=0)

        for i in range(len(list_df)):
            if list_df[i].columns[0] == "日付":
                df = list_df[i]

        return df.iloc[::-1]
        #-------------------------------------------------------


    def daterange(start, end):
        # -----make list of "date"---------------------------
        for n in range((end - start).days):
            yield start + timedelta(n)
        #----------------------------------------------------


    start = datetime.strptime(str(day_start), '%Y-%m-%d').date()
    end   = datetime.strptime(str(day_end), '%Y-%m-%d').date()

    list_days = [i for i in daterange(start, end)]

    pages = len(list_days) // 20
    mod = len(list_days) % 20

    if mod == 0:
        pages = pages -1
        mod = 20

    start = datetime.strptime(str(day_start), '%Y-%m-%d').date()
    end   = datetime.strptime(str(day_end), '%Y-%m-%d').date()

    df_main = get_stock_df_under20(code, list_days[0], list_days[mod-1])

    for p in range(pages):
        df = get_stock_df_under20(code, list_days[20*p + mod], list_days[20*(p+1) + mod-1])
        df_main = pandas.concat([df_main, df])

    print("<<< Completed >>> ({0}days)".format(len(df_main)))
    return df_main





def graphing(f, dt):

    # データのパラメータ
    N = len(f)           # サンプル数
    dt = 1        # サンプリング間隔
    t = np.arange(0, N*dt, dt) # 時間軸
    freq = np.linspace(0, 1.0/dt, N) # 周波数軸

    # 高速フーリエ変換
    F = np.fft.fft(f)

    # 振幅スペクトルを計算
    Amp = np.abs(F)

    # グラフ表示
    plt.figure(figsize=(14,6))
    plt.rcParams['font.family'] = 'Times New Roman'
    plt.rcParams['font.size'] = 17
    plt.subplot(121)
    plt.plot(t, f, label='f(n)')
    plt.xlabel("Time", fontsize=20)
    plt.ylabel("Signal", fontsize=20)
    plt.grid()
    leg = plt.legend(loc=1, fontsize=25)
    leg.get_frame().set_alpha(1)
    plt.subplot(122)
    plt.plot(freq, Amp, label='|F(k)|')
    plt.xlabel('Frequency', fontsize=20)
    plt.ylabel('Amplitude', fontsize=20)
    plt.ylim(0,1000)
    plt.grid()
    leg = plt.legend(loc=1, fontsize=25)
    leg.get_frame().set_alpha(1)
    plt.show()





nikkei = "998407.O"
panasonic = "6752.T"
sony = "6758.T"

# code info "https://info.finance.yahoo.co.jp/history/?code="





df = get_stock_df(panasonic,"2016-5-23","2019-5-23")
#graphing(df["終値"],1)
csv = df.to_csv('./panasonic.csv', encoding='utf_8_sig')




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

ChromiumではないMS Edgeで要素ドラッグしようとするとタッチジェスチャーが動作してしまう件の回避

概要

  • 最新のChromium版のMicrosoft Edgeではない、古いEdge
  • タッチディスプレイで、タッチ操作

という条件で、HTML内の要素ドラッグをしようとすると、全体のタッチジェスチャー(?)が効いてドラッグできません。
Microsoft-Edge-2020-05-28-11-08-20_Trim.gif

上記キャプチャのURLはこちら。
https://gijgo.com/draggable

解決法

CSSで、ドラッグしたい要素に touch-action: none; を指定するだけ!

ひとまず、DeveloperToolで追加
image.png

うまくいった!
Microsoft-Edge-2020-05-28-11-14-18_Trim.gif

参考

https://stackoverflow.com/questions/47495465/how-to-disable-swipe-to-go-back-in-microsoft-edge-with-javascript-or-jquery

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

Bootstrap4のnavbarカスタマイズ方法

レスポンシブで使いやすいnavbarですがカスタマイズの方法忘れやすいのでメモ

Bootstrap4の基本形navbar

項目はいろいろありますが最低限なら下記でいけるでしょう

  • タブレットサイズでメニュー展開
  • メニューを右寄せ
  • タイトルを文字
  • 色をlight
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">タイトル</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">link2</a>
      </li>
    </ul>
  </div>
</nav>

よく使うカスタマイズを見てみましょう

navタグをみてみる(1行目)

<nav class="navbar navbar-expand-md navbar-light bg-light">

メニューを展開するポイントを設定する

  • navbar-expand-○○
    • sm:モバイル md:タブレット lg:デスクトップ など

ナビゲーションの色変更

  • navbar-○○
    • primary, light など

ナビゲーションの背景色変更

  • bg-○○
    • primary, light など

タイトルに画像を使用

aタグ内にimgタグをいれる

<a class="navbar-brand" href="#"><img src="" alt=""></a>

バーガーアイコンの枠を消す

.navbar-toggler{
  border: none;
}
.navbar-toggler:active{
  outline: none;
}
button:focus{
  outline: none;
}

バーガーアイコンの色と先の太さを変える

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

CSSで変更

  • stroke-width='2' の数値を変えて太さ変更
  • stroke='rgba(0, 0, 0, 0.5)' のrgbaの値変更で色変

変更できますが個人的にはFontawesomeに入れ替えてしまったほうが好みですね

すこしややこしいですし

バーガーアイコンを変更

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
  <i class="fab fa-apple"></i>
</button>

font-sizeなどで変更できるのでオススメです

メニューとタイトルの位置を逆にする

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">タイトル</a>

buttonタグとaタグの場所を入れ替えるだけです

メニューの並びを変更する

    <div class="collapse navbar-collapse justify-content-start" id="navbar-content">
  • 左寄せ : justify-content-start
  • 中央寄せ : justify-content-center
  • 右寄せ : justify-content-end

navbarをスクロールしても上部に貼り付ける

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">

fixed-topを追加する

まとめ

navbarのカスタマイズでどれだけつまずいたことか!
レスポンシブ対応は難しいから勉強しはじめの頃にnavbarの存在知って「すごい!」と思ったものの、カスタマイズがよくわからずたくさんの時間をほうりだしました(笑)
助けになればとおもいます

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

フォントサイズのレスポンシブ

フォントサイズレスポンシブについて書かれていた構造を忘れないようにメモ
https://qiita.com/katsunory/items/3bede89cee8e2ded8426

<!-- @includepxになった値が$sizeに代入され、preturnされる -->
@function get_vw($size, $viewport:320){
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

@mixin fz_vw($font_size:10){
  font-size: $font_size * 1px;
  font-size: get_vw($font_size);
}

<!-- @include@mixinの設定が入る -->
p{
  @include fz_vw(12);
  @media screen and (min-width: 760px) {
    font-size: 30px;
  }
}
    font-size: 12px;
    font-size: 3.75vw;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

imgとbackground-imageのレスポンシブ設定の違い

imgとbackground-imageのレスポンシブ設定

img画像 width:100%; , height:auto;
background-image width:100%; , padding;50%;

    <div class="container">
        <h1>Background</h1>
        <div class="container__bkimg"></div>
    </div>

    <div class="container">
        <h1>Img</h1>
        <img class="container__frimg" src="画像" alt="">
    </div>
img{
    max-width: 100%;
}
.container{
    max-width: 1100px;
    min-width: 375px;
    margin: 0 auto;
    &__bkimg{
        width: 100%;
        padding-top: 50%;
        background-image: url(画像);
        background-size: cover;
        background-repeat: no-repeat;
    }
    &__frimg{
        width: 100%;
        height: auto;
    }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

100日チャレンジの328日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
328日目は、

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