hatena75の活動記録

技術メインで活動記録を残します。

引っ越し終わり

noteの記事は割と綺麗に書けていたので無理やり引っ越さないことにしました。

note.com

 

どちらに書くかは毎回気分で決めようと思います。

ところで、私のはてなIDはhaTech75なのですが、普段利用しているIDはhatena75です。hatena75にしたかったのですが、どうやらはてな公式と紛らわしいため「hatena」をIDに含んではダメだったようです。

Biginners CTF 2020に参加しました

2020年5月のアーカイブ記事です。

 

今まで常設CTFでちょこちょこ遊んでいましたが、この度初めて大会形式のCTFに参加してみました。チームは特に一緒にやる人もいなかったので自分だけです。

結論から言うと、超簡単問題(恐らく通常のCTF大会では出されないくらいの低難易度)しか解けませんでした。。。

せめて超簡単問題(に位置づけられていた)maskはクリアしたかったんですが、はじめての逆アセンブルで訳も分からず。結局の所、文字が見えてれば良くて(そこまでは一応いってた)凝らずに総当たりでいけたらしい。そこで躊躇せずプログラムという道具をスッと使えるようになりたい。

 

WSLにはlsもdirもmanもhelpもある

2018年末に書いた記事のアーカイブです。

 

小ネタです。WSLはlsとdirどちらもあったり、manとhelpどちらもあったりと面白仕様になっています。

今回はその一端としてdirとlsに対してmanコマンドを実行してみます。

NAME
ls - list directory contents
SYNOPSIS
ls [OPTION]... [FILE]...
DESCRIPTION
List information about the FILEs (the current directory by default). Sort entries alphabetically if none of
-cftuvSUX nor --sort is specified.
Mandatory arguments to long options are mandatory for short options too.
-a, --all
do not ignore entries starting with .
-A, --almost-all
do not list implied . and ..
--author
with -l, print the author of each file
-b, --escape
print C-style escapes for nongraphic characters
--block-size=SIZE
scale sizes by SIZE before printing them; e.g., '--block-size=M' prints sizes in units of 1,048,576
bytes; see SIZE format below

NAME
dir - list directory contents
SYNOPSIS
dir [OPTION]... [FILE]...
DESCRIPTION
List information about the FILEs (the current directory by default). Sort entries alphabetically if none of
-cftuvSUX nor --sort is specified.
Mandatory arguments to long options are mandatory for short options too.
-a, --all
do not ignore entries starting with .
-A, --almost-all
do not list implied . and ..
--author
with -l, print the author of each file
-b, --escape
print C-style escapes for nongraphic characters
--block-size=SIZE
scale sizes by SIZE before printing them; e.g., '--block-size=M' prints sizes in units of 1,048,576
bytes; see SIZE format below

全く同じです。実際に使ってみると表示のされ方(UI)はちょっと違ったりします。

広告ブロックアドオンのすゝめ

2018年末に書いた記事のアーカイブです。

 

ネットサーフィンをしていると、どこにでもついて回るのが広告です。それを消してくれる素晴らしいアドオン(ブラウザに追加できる拡張機能)があります。

 

有名なところではAdBlockとuBlock Originがありますが、私が使っているのが後者なので今回はこっちを詳しく紹介したいと思います。

 

使い方1 ストアからダウンロードする。

AdBlockとuBlock Originは、それぞれのブラウザの拡張機能のストアに行けばダウンロードできます。ダウンロードした後は、特に何も設定せずともYoutubeの広告や、Yahooの広告などはほぼ全て消えます。

 

使い方2 邪魔な要素を選択してブロックする。

基本ダウンロードしただけでほとんど広告は消えますが、除ききれない広告や広告ではないが鬱陶しいおすすめ表示などは残っている場合があります。その場合、uBlock Originでは、「要素をブロック」によって削除できます。

右クリック→要素を削除→削除したい要素(バナーなど)をクリック(要素は赤で着色されます)→右下にカーソルを持って行き、出てきたウィンドウ上にある作成をクリック

これで残った煩わしい広告もブロックできます。

 

使い方3 自分でフィルタリングを行う。

この方法は、動画広告に有効です。GYAOなどの一部の動画については、uBlock Originは動画そのものをブロックしてしまい、うまく広告だけブロックすることができません。そこで、リクエストログを確認し、動画本体をホワイトリストに、広告だけをブラックリストに入れるという処理が必要になります。

リクエストログはuBlockのアイコンをクリックした後、上4つのアイコンの右から2番目をクリックすると見ることが出来ます。次にそのログを見ながら、右から1番目のダッシュボードをクリックし、ホワイトリストタブに動画を、Myルールなどに広告のみをブロックするよう記述します。(どれが何だかログを見てもわからない場合はGoogle検索であてをつけながら試行錯誤します)

フィルタリングの書き方は下記サイトがわかりやすいです。

http://pieceofnostalgy.blogspot.com/2013/01/adblock-plus.html#elemhide_exceptions

 

細かいことも書きましたが、ダウンロードするだけでもブラウジングが非常に快適になりますので、ぜひ使ってみてください。それでは。

jQueryを知らない人のためのAjax解説

2017年末に書いた記事のアーカイブです。

 

Ajaxとは~機能偏~

簡単に言えば「ページを更新することなくページの一部の状態を変化させる技術」です。Googleマップでマップを縮小すると周りが灰色になってしまうがすぐに地図が表示されるのも、郵便番号を入力すると住所欄がある程度自動で埋まるのも、このAjaxのおかげなのです。これがなければ、Googleマップで視点を移動するたびにページが更新されて非常に使いにくくなってしまいます。

Ajaxとは~技術編~

Ajaxは複数の技術を合わせて実装されていますが、主に知っておくべきところは二つです。まず、AjaxのコードはjQueryで書くのがポピュラーです。jQueryとは、JavaScriptのよく使う機能をまとめて楽にJavaScriptをかけるようにしたもののことです。もう一つは、Ajaxの役割は、要求に対してデータを送受信することだということです。例えば、マップ縮小に対して周辺の地図情報を返すといった具合です。ここで重要なのは、この返すデータは別のファイルで用意する必要があるという点です。このファイルは何でも良いわけではなく、HTMLやXMLJSONなどで書かれている必要があります。

Ajaxとは~コード偏~

では、実際にAjaxのコードを見てみましょう。

$.ajax({
url: 'json_data',
type:'GET',
dataType: 'json',
success:

function(data) {
alert("ok");
},

});

上から順に説明していきましょう。$.ajax({});ですが、いきなりJavaやC、さらにはJavaScriptとも異なった感じがします。実は、これが先ほど紹介したjQueryの書き方なのです。AjaxjQueryの機能のうちの一つなのです。実際、$.ajaxjQuery.ajaxと書いても同じように動作します。$.は「jQueryの」という意味なのです。次に中身を見ていきましょう。url:は用意したデータのurlを書くところです(例ではテキトーに書いています)。type:はデータを受け取るか、送るかを書きます。今回はGETなのでデータを受け取ります(逆はPOST)。dateType:はurl:で指定したデータの型を書いておきます(例ではjson)。success:は、データを正常に受信(または送信)できたときに実行する内容を記述します。今回はコードをなるべく簡単にするためにokと表示するだけにしていますが、実際には送受信したデータに関連した内容が記述されます。

 

まとめ

今回は非常に初歩的な部分にしか触れませんでした。しかし、これを把握するだけでも筆者は苦労しました(調べ方が悪かったのかもしれませんが)。いきなりAjaxと聞いて調べただけでは、正直なところ全く使いこなせないと思います。しかし、Ajaxは主にjQueryで書かれていて、他のデータを扱って何かをするための技術だとわかっているだけでもずっと学びやすくなると思います。最後に、学習の参考になるかもしれないサイトを紹介しておきます。もちろんこれだけではありませんが、少しでもスムーズな学習につながれば幸いです。

atmarkit @IT いまさら聞けない、"Ajax"とは何なのか? : http://www.atmarkit.co.jp/ait/articles/0708/23/news134.html

jQuery 日本語リファレンス ajax : http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

WordPressを始める方法3つ

2017年末に書いた記事のアーカイブです。

 

WordPressはブラウザ上でサイトの編集が可能となるソフトウェアです。WordPressをダウンロードして得られたフォルダ(1つのはず)をFTPなどで自分のサイトのデータがあるサーバにアップロードすると使うことができます。ただし、空のフォルダ(wpとかで名前をつけるとよい)内にアップロードしてください。実際に使うには、

サイトのURL/WordPressをアップロードしたフォルダ名(wpとか)/

にアクセスすると使えます。上記のURLがサイトの管理画面になるというイメージです。クライアント側のWordPressからサーバのデータをいじるのではなく、自分がサーバにアクセスしてそこにあるWordPressを使用してデータをいじるということになります。

ただし、どんなサイトにもWordPressが使えるわけではありません。WordPress自体はPHPで書かれているため、PHPが使えるサーバでないと動きません。また、WordPressのデータの一部はMySQLを使用して作られるデータベースに保存されるため、MySQLが使えるサーバでないとWordPressは動きません。

さて、実際に使いたいとなったときにどうするかですが、今回は3つ選択肢を紹介します。

 

・簡単にWordPressを導入できる、既に使えるようになっているサーバーをレンタル

サーバー管理画面のボタンを押すだけでWordPressが使えるようになる、あるいは既に使えるようになっているレンタルサーバーが存在します。恐らくこれが最も簡単なWordPressの始め方でしょう。さくらレンタルサーバーなどの有料プランはもちろん、中には無料プランも存在します。

 

FTP等で自分のサイトにWordPressのファイルをアップロードして使う

WordPressを公式サイトからダウンロードして、そのファイルを自分のサイトのあるサーバーにアップロードすれば使用することができます。ただし、WordPressが使えるかどうかはサーバーによるので注意してください(検索すればそのサーバーで使えるかどうかわかると思います)。上に記述した通りの最も一般的な導入方法です。サイトの運営に慣れている人にとっては、先ほどの選択肢よりも簡単に感じるかもしれません。

 

・XAMPPを用いてWordPressをローカルで動かす。

WordPressは使いたいけど、それで作ったサイトを公開したくない、WordPress自体のカスタマイズをしたいといった場合は、XAMPPというソフトウェアを使ってローカル環境を構築することで、WordPressを使えるようになります。何か失敗しても簡単にやり直せるので、思い切ってWordPressを使い尽くせます。

 

はてブロに流れ着きました

hatena75というIDで活動している者です。

今まで技術記事や活動記録をWordPressブログやnoteで記録していましたが、結局はてブロが一番気楽に書けるのではという気が湧いたのでここにまとめようと思います。(今年度でWordPressブログが無料サービス終了というのもあった)