画像ファイルが選択されたらブラウザ上でリサイズしてBase64文字列にして結果をフォームに埋め込んでサーバに送信する(非ajax)

色々と面倒だったので備忘。
アプリケーション設定は`playframework`独自ですが、フロント側は素の`javascript`でいけますし、サーバサイドもどんな言語・Webフレームワークでも道具立てが用意されているはずです。

+ アプリケーション設定
+ `application.conf`でBodyParserのデータ上限を緩和する.
+ HTML
+ input[type=’file’]タグを用意
+ 上記に対応するcanvasを用意する。表示サイズはwidth指定しておく。(役割はファイル選択時のサムネイル表示とBase64文字列取得)
+ 画像ファイル選択
+ 選択されたら、canvasを初期化する(clearRect)。ファイル内容を読み込む。ファイル種別等をチェック。
+ ファイル読み込みが完了(onload)したらその結果(e.target.result)をimg.srcに設定する
+ img.srcの読み込みが完了(onload)したら、その内容を適宜リサイズしてcanvasに描画(drawImage)する
+ フ

【HTML】基礎

# HTMLとは
:sunny: Webページを作るためのプログラミング言語のこと

:sunny: ＜＞←このカッコをタグと呼ぶ。
　 文字をこのタグで囲むことで見出しやリンクの役割となる。
　 タグの中身は h1 や a などいろんな種類がある。
　 開始タグと終了タグがあるが、終了タグの場合は下記のように ／ が必要。

“`例.html

h1のタグで文字を囲むと大見出しとして表示されるよ

“`

Webではこんな感じに表示される
↓

## hタグ
:sunny: Webで見出しをつけたいときに使用。
:sunny: h1〜h6まで種類がある。
　 h1が一番大きな文字で表示され、h6が一番小さな文字で表示される。

`

[ライブコーディング]JavaScriptでモンテカルロ法シミュレータを作る

# モンテカルロ法とは

ルーレットの必勝法とか言われる掛け方の法則。
実際にカジノで実践するには紙とペンが必要になるので、それをWebアプリ化したかった

# 言い訳

事前準備のない、ガチのライブコーディングをやりたかった。

そして、
フレームワークとか、IDEだとか、ネーミングとか
一切気にせず
ただただ頭に浮かんだコードを書いて、htmlとjscssで楽しく遊ぶことを意識した

# 結果

とんでもないコードができあがった。

“`html:index.html

モンテカルロ法シミュレーター

ゲーム数:

pythonでスクレイピングした表をcsvに保存する方法

# この記事について
研究でWebページ上にある表をスクレイピングする必要があったので，そのときに使用したpythonのプログラムを紹介します．ちなみに，自分はスクレイピング歴0だったので色々調べながら作っていったのですが，Webページ上の表をHTML化した後にHTMLの表部分をcsv化する方法まで説明しているものがほとんどなかったのでこの記事を書きました．

# はじめに
スクレイピングについての注意点は，下記URLから御覧ください
https://qiita.com/Azunyan1111/items/b161b998790b1db2ff7a

# Pythonでスクレイピング
プログラム全体は[こちら](https://github.com/tsuno0829/scraping_table/blob/master/scraping_table.ipynb)に置いてあります．

## import
“` python
import csv
import urllib
from bs4 import BeautifulSoup
“`
importしたライブラリの説明
・csvは，

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

#100日チャレンジの192日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

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

192日目は

おはようざいます
192日目

udemyで、Vue.js
webサイトコーディングの練習#100DaysOfCode #早起き

正しいマークアップとはなんなのか？

## はじめに
本文章は、来年からマークアップを教えることになるMoが、「なぜ正しくマークアップする必要があるのか？」「そもそも正しいマークアップとは何を基準としているのか？」ということを再考するために書いたものです。

## マークアップとは？
マークアップとは端的に言えば、テキストやその構造を与えることをいう。広く使われているマークアップ言語はHTMLとXMLで、web開発をしているとどちらも目にかかるものである。

例えば、HTMLでは以下のようにマークアップする。

“`html

Hello World!

I am Mo! I like Dogs!

Where I live

I live in a small city in Tokyo!

“`

これはブラウザで以下のように表示される。

CSS擬似クラスnth-of-typeが予想以上に使える件

# nth-of-typeとは
擬似クラスnyh-of-typeは、同じ階層にある同じ要素で指定した順番の要素をセレクトすることができる擬似クラスです。
nth-of-type(odd)で奇数番目の要素、nth-of-type(even)で偶数番目の要素、nth-of-type(3n)で3の倍数の要素、など様々な順番でのセレクトが可能です。

“`CSS
class-name:nth-of-type(odd) {
}

class-name:nth-of-type(even) {
}

class-name:nth-of-type(3n) {
}

“`

これが可能なことで、デザインにもすごい幅が生まれます。
例えば、奇数番目のbackground-colorはblackで、偶数番目のbackground-colorはwhiteとすることで、簡単にシマウマ模様が作れたりなどデザイン性は無限にありそうです。

ぜひ擬似クラスを使用したことのない方は、使用してみてはいかがでしょう。

HTML テーブルの空セルに斜線を引く方法

テーブルの空セルに斜線を引く方法を紹介します。
##まずはテーブルを作成します。
“`html:index.html

元記事を表示

ナンの実りもないクソアプリを作った

## ナンを咲かせる木を作った

題して「枯れ木にナンを咲かせましょう」

See the Pen
枯れ木にナンを咲かせましょう by Thugumi Ishimaru (【CSS】を上下左右中央で、エリアいっぱいに配置する

# やりたいのはこれ！

作りたいのは、よくあるサムネイル付き記事の 一覧ページ↑↑。
（ほんでもって、ホバーしたら画像がふわっと拡大表示なんかしたりね、するよね。ね。）（←後述します）

今回は、cssだけでごにょごにょがんばります。

# 実装
3カラムとか作る前に、一旦width100%でコンポーネントを作ります。

“`index.html

元記事を表示

標的型攻撃メール耐性訓練をハックしたい

# 標的型攻撃メール

怖いですよね、標的型攻撃メール。
本当に標的にされたら引っかかっちゃいそうなメールがきっと届くのでしょう。
ただ、普通の会社員はホンモノの攻撃メールを受け取るよりも「標的型攻撃メール耐性訓練」として届く怪しげメールのほうが馴染みがあるかと思います。

そんな標的型攻撃メール耐性訓練メールをハックしたい ~~（が、本当にやると怒られが発生するし、倫理的にNGなのでやらないのだけれど話題としては好きなので吐き出しておきたい）~~ という記事が本記事です。

# ハックする とは

* 一人の訓練対象者として自分以外の耐性訓練の結果に影響を与える。

これを目標にします。
なんでもありだと思考実験としても面白くないので、実現可能そうで :police_car: 案件にならないように検討します。
善良なエンジニアとして、:police_car:のお世話になってはいけません。

なので、脆弱性のあるインフラで動いているケースは配慮せず、その領域に対するアタックするようなアプローチは考えません。
~~計測サイトのサービスをダウンさせるとか、DNSポイゾニング的なことは考え

元記事を表示

最近流行りの斜めデザインのレイアウトを組む時に気をつけたほうが良いこと

#最近流行りの斜めデザインのレイアウトを組む時に気をつけたほうが良いこと

こんばんわ。寒いですね。
いいネタが思いつかなかったので、最近苦戦した斜めデザインのCSSについて書きます。
斜めのデザインをCSSのskewで再現しようとすると、特定のブラウザで挙動が不安定なので気をつけよう・・・という内容になります。

##問題の内容
まずはこれを見てください。

A-Frame v1.0 で クリスマスアニメーション

# はじめに

A-Frame v1.0 が今週リリースされましたね！
HTMLだけで簡単にWebVRができちゃうっていうあれです。

AFrameについての記事はたくさんありますが、バージョンアップで動かない書き方が多いように思います。
なので、ほぼ公式サイト（ [A-Frame 1.0 Document](https://aframe.io/docs/1.0.0/introduction/) ）を見て作りました。

デモ
https://naughty-nobel-fdd6bb.netlify.com/

# HTMLベース

A-Frame 読み込み
地面と背景とライトを配置

“` html

	タイトル1	タイトル2	タイトル3
1
2
3