自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

Posts

  • Reactに必要なJavaScript構文【ES2015(ES6)のテンプレート文字列、アロー関数、スプレッド構文、letとconstなど、脱jQueryにも有効】
    Reactに必要なJavaScript構文をまとめる Reactを使わない場合でも、JavaScriptをシンプル書くヒントがあるので、コードを小さくしたい場合にも有効。 脱jQueryを推進したい人は下記も参考に。 jQueryのコードをJavascriptに書き換える【セレクタ、属性値の参照、イベントなど】 letとconst letとconstはいずれも再宣言が不可能。 let test = "aaa"; //これはエラー //let test = "bbb"; ...
    続きを読む

  • 【JavaScript】囲碁ライブラリGliftを使ってSGF形式の詰碁WEBアプリを作る
    gliftとは gliftはJavaScript囲碁ライブラリである。 http://www.gliftgo.com/ 囲碁のルールに加え、SGFに対応しているので、棋譜の入出力ができる。 ソースコード glift.jsは https://github.com/artemispax/glift/releases/tag/v1.1.2 からDL SGFはここから拝借した。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="glift_1_1_2.min.js"></script> </head> <body> <div id="test" style="height: 500px;"></div> <script> gliftWidget = glift.create({ sgf: { sgfString: "(;AW[is]AW[ir]AW[iq]AW[ip]AB[js]AB[jr]AB[jq]AB[kp]AB[lp]AB[lq]AB[lr]AB[ms]AW[mr]AW[mq]AW[ks]AW[mp]AW[mo]AW[lo]AW[ko]AW[jp]AW[or]C[Can black live?]AP[goproblems](;B[kr]C[];W[ns]C[Yes, white can't pushRIGHT](;B[ls]C[RIGHT])(;B[nq];W[ls];B[ms];W[ls]))(;B[ls];W[kr]C[No, this is mistake. Black can't make 2 eyes at now.])(;B[nr];W[ls](;B[kr];W[ls];B[ks];W[nq];B[ns];W[os];B[ls];W[kq])(;B[ns];W[nq];B[kr];W[ls];B[ks];W[os];B[ls];W[kq])))", widgetType: 'CORRECT_VARIATIONS_PROBLEM', }, divId: "test" }); </script> </body> </html> 動かすとこうなる。 結論 これで棋譜や詰碁を管理するウェブアプリが作れる。 DBにSGFを文字列 ...
    続きを読む

  • 【Python】virtualenvをactivateせずに、venvにインストールしたライブラリを読み込んで実行する【aliasやcrontabなどに】
    例えば、システムに直インストールするわけには行かないPythonライブラリを使うとする。 そういう時はvirtualenvを使って仮想開発環境を作り、そこにactivateしてインストールするとよいだろう。 だが、crontabやaliasなどで実行する場合はどうだろうか？ワンライナーで実行するにはactivateするわけには行かない場合もある。 そういう時は、このように実行するとよいだろう。 venv/bin/python test.py これで ...
    続きを読む

  • 【JavaScript】marked.jsでマークダウン記法をHTML上でプレビューしてみる
    以前、Pythonでマークダウンを実現させてDjangoに実装したが、最近のサイトは皆、マークダウンを書いたら即時で隣のプレビュー欄に表示させる仕様になっている事が多い。 それはJavaScriptでマークダウンを作っているからで、Pythonでマークダウンを実現させているようでは難しい。 そこで、JavaScriptマークダウンのライブラリとして名高い marked.js を使うことにした。 とりあえず作ってみたソースコ ...
    続きを読む

  • 【Ubuntu】ディスクの読み込みスピードをチェックする【sudo hdparm -tT デバイス名】
    これで、ディスクの読み込み速度が調べられる。 sudo hdparm -tT デバイス名 まず、デバイス一覧を下記コマンドで調べる。 sudo fdisk -l デバイスのパスを指定する sudo hdparm -tT /dev/sdb 動かすとこうなる。 やはり、SSD(/dev/sda)とHDD(/dev/sdbと/dev/sdc)では二倍近い読み込み速度の差があるようだ。 結論 sambaをインストールして、ファイルサーバーを作る時に使うとよいだろう。 ディスク速度とネットワークの速度、どちらが ...
    続きを読む

  • 【Python】openpyxlで棒グラフ・折れ線グラフを表示させる【公式から引用】
    コードは公式から引用し、一部編集している https://openpyxl.readthedocs.io/en/stable/charts/bar.html https://openpyxl.readthedocs.io/en/latest/charts/line.html ソースコード from openpyxl import Workbook from openpyxl.chart import BarChart, Reference #書き込みモードでワークブックを作る wb = Workbook(write_only=True) #シートを作る ws = wb.create_sheet() #データ rows = [ ['番号', '算数', '国語'], [1, 50, 70], [2, 60, 30], [3, 40, 60], [4, 50, 70], [5, 20, 40], [6, 60, 40], [7, 50, 30], ] #書き込み for row in rows: ws.append(row) #棒グラフを作る chart1 = BarChart() chart1.type = "col" chart1.style = 10 #タイトル、横軸・縦軸の指定 chart1.title = "グラフタイトル" chart1.y_axis.title = "点数" chart1.x_axis.title = " ...
    続きを読む

  • 【Python】気象庁のサイトから特定の都市の月ごとの平均気温をスクレイピングする
    気象庁のサイトで都市の月ごとの平均気温を表示させる 下記サイトへ行く。 https://www.data.jma.go.jp/obd/stats/etrn/index.php 地点を選択 月ごとの値を表示する 下記画像の1で地点を選ぶ、続いて月ごとの値を表示する これで問題のページにたどり着く https://www.data.jma.go.jp/obd/stats/etrn/view/monthly_s3.php?prec_no=44&block_no=47662&year=&month=&day=&view= 今回はこれをスクレイピングする。 ソースコード import requests, bs4 URL = "https://www.data.jma.go.jp/obd/stats/etrn/view/monthly_s3.php?prec_no=44&block_no=47662&year=&month=&day=&view=" #サイトへアクセス result = requests.get(URL) #構文解析(※ブラウザに表示されているHTMLとrequestsとBeautifulSoupで取得したHTMLは異なる場合がある。) soup = ...
    続きを読む

  • 【CSS3】checkboxとlabelを使ってサイドバーを作る【コンパクト】
    以前作成したHTMLとCSSのサイドバーは、見た目は非常にわかりやすいが、場所を取る上に見た目がイマイチ。 そこで、HTMLとCSSだけでサイドバーを作るギミックは踏襲し、デザインだけ変更することにした。 ソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="style.css"> </head> <body> <input id="sidebar_chk" class="sidebar_chk" type="checkbox"> <div class="sidebar_area"> <div class="sidebar_content"> <div>サイドバー</div> <div>サイドバー</div> <div> ...
    続きを読む

  • 【Linux】grepとsedとxargsで複数のファイルに点在する誤字を一括修正(置換)する
    開発をしていて、複数の誤字が見つかった。 しかもその誤字は複数のファイルに点在している。 そんな時、ファイルを開いて1つずつ置換して修正しているようでは時間がかかりすぎる。 そこで、コマンド一発で複数のファイルに点在する誤字を一括修正する。 コマンド 置換対象のファイルのバックアップを取るならこっち grep -rl "誤字" ./* | xargs sed -i ".bak" 's/誤字/修正文/g' バックアップを取らないならこっち grep -rl &qu ...
    続きを読む