信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • 画像:ブログサムネイル

    テクログ

    Go言語でマークダウンファイルをhtmlファイルに変換する処理を作る

    はじめまして。たなしょです。   日頃から技術的なことをメモをする際にマークダウン形式でメモを取っているのですが、それをブログに上げる際にいつもvscodeでhtmlファイルにコンバートをかけていました。そこでGo言語の学習のついでに変換機を自作しようと思い作ることにしました。まだまだ追加で実装しなくてはいけないところが多々ありますがある程度メイン部分が完成したので機能や苦労した点、今後の改良点をここに記載したいと思います。長くなってしまったので要約です。TL;DR・ごく一部の文字は変換することができた。・苦労した点はcodeタグ内の「<>」の扱いと、pタグ内に文字をどのように入れるか。・今後はaタグや画像の出力、リストなどにも対応していきたい。・息抜きに違う言語で開発する際はぜひGo言語を。実行結果変換したhtmlを画面で見るとある程度読めなくはないのかなという感じでしょうか。ファイルの全体や各ファイルについて全体的なファイルは下記のようになりました。. |-- Makefile |-- css.go |-- execute.go |-- generate.go |-- go.mod |-- main.go |-- paragraph.go |-- reg.go `-- test.md mdファイルとMakefileを除いて331ステップをGo言語で作成していました。cloc mvtohtml/     9 text files.     9 unique files.     1 file ignored. github.com/AlDanial/cloc v 1.88 T=0.02 s (326.4 files/s, 18156.6 lines/s) ------------------------------------------------------------------------------- Language           files     blank    comment      code ------------------------------------------------------------------------------- Go                6       62       10      331 Markdown             1       5       0       20 make               1       4       0       13 ------------------------------------------------------------------------------- SUM:               8       71       10      364 ------------------------------------------------------------------------------- 各ファイルの機能は下記のようになります。main.go 引数チェックやmdファイルのファイル名を取得する。  execute.go  htmlファイルに書き込む処理。   css.go css部分を書き込む処理。  generate.go 変換処理の大本。  paragraph.go  pタグの変換処理。  reg.go htmlファイルに変換する際の「<」と「>」が存在するか判定する処理。  機能詳細、苦労した点h1タグやpタグの判定は各行の1文字目~4文字目を見て判定しています。  brタグは各行の後ろ1〜3行目が空白かどうかで判定しcase文で各パターンを判別しています。func pattern_check(line string, codeline int, slice_arr *[]string) (int, string) { br_flg := 0 pattern := "NONE" html_line := "" h_string := "" // first string search if line == "" && codeline == 0 { html_line += "\n" return codeline, html_line } else if line == "" && codeline == 1 { html_line += "\n" return codeline, html_line } else { slice := strings.Split(line, "") length := len(slice) if slice[0] == "#" && slice[1] == " " { pattern = "H1" for i := 2; i < length; i++ { h_string += slice[i] } } else if slice[0] == "#" && slice[1] == "#" && slice[2] == " " { pattern = "H2" for i := 3; i < length; i++ { h_string += slice[i] } } else if slice[0] == "#" && slice[1] == "#" && slice[2] == "#" && slice[3] == " " { pattern = "H3" for i := 4; i < length; i++ { h_string += slice[i] } } // code check if line == "```" { pattern = "CODE" } // br check if slice[length-1] == " " && slice[length-2] == " " && slice[length-3] == " " { br_flg = 1 } // in code tag check if pattern != "CODE" && codeline == 1 { pattern = "INCODE" } if pattern != "NONE" { paragraph(pattern, &html_line, slice_arr) } switch pattern { case "H1": html_line += "<h1>" html_line += h_string html_line += "</h1>" case "H2": html_line += "<h2>" html_line += h_string html_line += "</h2>" case "H3": html_line += "<h3>" html_line += h_string html_line += "</h3>" case "NONE": if br_flg == 1 { for i := 0; i < length-3; i++ { html_line += slice[i] } html_line += "<br>" } else { html_line += line } html_line += "\n" paragraph(pattern, &html_line, slice_arr) case "CODE": if codeline == 0 { codeline = 1 html_line += "<pre>" html_line += "<code>" } else { codeline = 0 html_line += "</code>" html_line += "</pre>" } case "INCODE": rep_line := "" if reg(line) { rep_line = strings.Replace(line, "<", "&lt;", -1) rep_line = strings.Replace(rep_line, ">", "&gt;", -1) html_line += rep_line } else { html_line += line } } if pattern != "NONE" { html_line += "\n" } return codeline, html_line } } 苦労した点は2点あり、一点目はcodeタグ内のh1タグなどの「<>」がhmtlがファイルに変換されるとそのままタグとして読み込まれてしまうため文字列に置き換えるところでした。解決策は「INCODE」パターンに入ったときにreg.goを呼び出して「<>」が存在するかを判定して、存在した場合は「<」は「&lt;」、「>」は「&gt;」に変換をかけることにしました。  case "INCODE"詳細   case "INCODE": rep_line := "" if reg(line) { rep_line = strings.Replace(line, "<", "&lt;", -1) rep_line = strings.Replace(rep_line, ">", "&gt;", -1) html_line += rep_line } else { html_line += line } reg.go詳細   goの標準ライブラリであるregexpと正規表現を利用して各タグが行内に存在するか判定しています。package main import ( "regexp" ) const ( HEADING  = `</?h[1-6]>` PARAGRAPH = `</?p>` CODE   = `</?code>` BREAK   = `<br\s?/?>` ) func check_regexp(reg string, str string) bool { flg := regexp.MustCompile(reg).Match([]byte(str)) return flg } func reg(text string) bool { reg_flg := false regexp_arr := [...]string{HEADING, PARAGRAPH, CODE, BREAK} for _, v := range regexp_arr { reg_flg = check_regexp(v, text) if reg_flg { break } } return reg_flg } 2点目は「#」や「```」(ここでは特殊文字という)以外の文字が1文字目に現れた場合はpタグ内に格納し、特殊文字が現れた場合はpタグを閉じるようにするところです。   解決策はパターン「NONE」で文字列スライスが空の場合はpタグと行を文字列スライスポインタへ格納、文字列スライスに文字が入っている場合は行を文字列スライスポインタへ格納、パターンが「NONE」以外ならpタグを文字列スライスに格納して文字列スライスポインタ内の文字列をhtmlファイルに出力する方法で解決できました。  以下paragraph.go の詳細です。  package main func is_Empty(s *[]string) bool { return len(*s) == 0 } func slice_Delete(s *[]string) { res := []string{} *s = res } func slice_Join(s *[]string) string { var str string for _, v := range *s { str += v } return str } func paragraph(pattern string, html_line *string, slice_arr *[]string) { if pattern != "NONE" { if !(is_Empty(slice_arr)) { *slice_arr = append(*slice_arr, "</p>\n") *html_line = slice_Join(slice_arr) slice_Delete(slice_arr) } } else { if is_Empty(slice_arr) { *slice_arr = append(*slice_arr, "<p>") *slice_arr = append(*slice_arr, *html_line) } else { *slice_arr = append(*slice_arr, *html_line) } *html_line = "" } } 今後の改良点まだまだpタグ、codeタグ、hタグにしか対応してないので今後はaタグや画像の出力、リストなどにも対応していきたいです!おわりに皆さんは業務でPHPを使うことが多いと思いますがたまには息抜きに違う言語で開発してみるのはどうでしょうか?   特にインタプリタ型の言語とコンパイル型の言語では考え方が違うためとてもいい勉強になると思います。  その際はぜひGo言語は勉強してみてはいかがでしょうか?   今回のソースの詳細は下記リンク にあるのでマークダウン変換機能を作る際は参考にしてみてください(笑)https://github.com/jacoloves/lab/tree/master/go_tool/mvtohtml  

  • 画像:ブログサムネイル

    テクログ

    SEO対策のきほん

    ◆SEOとはウェブマーケティングにおいて重要な施策のひとつであるSEO。ウェブ担当者やウェブマーケターにとってはもはや必須のスキルとなっていますね。SEOとはSearch Engine Optimization(検索エンジン最適化)の略称でざっくりと説明すると、検索エンジンの検索順位を上げたり、表示される情報を増やすことで自社サイトにできるだけ多くの顧客を集客することを目的としたマーケティング手法です。今回は、一番メジャーな検索エンジンであるGoogleをベースに、SEOにおいて基本となる3つの要素について紹介したいと思います。◆検索順位はどのように決まるのか?SEOの主な目的である「検索順位の向上」ですが、この検索順位はどのように決められているのでしょうか?Googleの検索順位が決まるまでには、以下の3つのステップがあります。ウェブサイトを見つけるウェブサイトの情報を持ち帰って整理する整理した情報をもとにウェブサイトを評価するSEOの基本を知るために、まずはこのステップについて理解しましょう。①ウェブサイトを見つける大前提ですがGoogleが知らないウェブサイトはGoogleには表示されません。でも普段みなさんがGoogleで検索すると非常に多くのウェブサイトの情報が表示されますよね。これらはウェブクローラ(bot、スパイダーなどとも)と呼ばれるプログラムが、日々世界中のあらゆるウェブサイトの情報を集めてきているからです。検索エンジンが精度の高い検索結果を表示するために、まずはこの情報収集が重要になります。②ウェブサイトの情報を持ち帰って整理するウェブクローラが持ち帰ってきたあらゆるウェブサイトの情報はGoogleのサーバーに蓄積されていきます。一つのウェブサイトの中でもテキスト、画像、動画など色々な形式の情報があるので、それらを適切な形で整理し、情報の内容(新しさ、テーマ性など)によって細かく分類していきます。図書館の本があいうえお順に並べられているように、Googleも集めてきたウェブサイトの情報を細かく分類していつでも情報を取り出せるように整理しています。③整理した情報をもとにウェブサイトを評価する最後に、整理された情報をもとにGoogleが独自のアルゴリズムを使ってウェブサイトを評価します。そしてより評価の高いページが検索順位の上位として表示されることでランキングが付けられます。これが検索順位が決まるまでの一連の流れになります。◆検索順位を上げるにはこの3つのステップを改善するこの3つのステップを別の言葉で言いかえるとクロールインデックスアルゴリズム(による評価)と言います。SEOで検索順位を上げていくためにはこの3つの要素を理解し、それぞれが最適な状態となるよう適切な施策をおこなうことが重要となります。これがSEOで基本となる3つの要素です。ではここからは、具体的にSEOでどのように最適化していくのか、それぞれの要素に対するSEOの取り組み方について見ていきましょう。◆SEOの取り組み方3つの要素が最適な状態というのはつまり、ウェブクローラが見つけやすくウェブクローラが情報を持ち帰り、整理しやすくアルゴリズムに評価されやすいウェブサイトということになります。この状態を目指すためにそれぞれどんな対策をしていけばよいでしょうか。①クロールの改善検索エンジンのプログラムがウェブサイトの情報を集めることを「クロール」と呼びます。クロールをするので「ウェブクローラ」なんですね。そしてこのクロールのしやすさのことを「クローラビリティ」と言います。ウェブクローラがウェブサイトを見つけやすい状態にするためには、このクローラビリティを上げていくことが大切です。ウェブクローラは、通常ウェブサイトに貼られたリンクやサイトマップXMLと呼ばれるウェブページのURLの一覧などから、新しいウェブサイトやサイトの中の個別のページを発見します。そのため、新しくウェブサイトやページを作った場合は、リンクやサイトマップXMLを使って「ここに新しいサイト(ページ)がありますよ!」ということをウェブクローラに伝えてクローラビリティを上げましょう。②インデックスの改善ウェブクローラが情報を持ち帰り、整理して保存することを「インデックス」と呼びます。クローラビリティと同じくこちらもインデックスのしやすさを「インデクサビリティ」と言ったりします。インデックスされてないウェブサイトはクロールされていても検索結果には表示されません。また、検索順位はインデックスされた情報をもとに評価されるので、ウェブサイトにどれだけ良い情報があるとしても、ウェブクローラが読み取れなかったり、理解できない状態になっていると正しく評価することができません。プログラムであるウェブクローラが正しく情報を理解できるように、HTMLを分かりやすく記述したり、画像や動画には代替テキストを用意するなどでもれなく情報を持ち帰ってもらいましょう。また、実際にウェブページが正しくインデックスされているかをサーチコンソールなどのツールで確認することも大切です。③ウェブサイトの改善Googleにはコアウェブバイタル、モバイルフレンドリー、パンダアップデート、ペンギンアップデートなど一部公表されているアルゴリズムのほかにも数百のアルゴリズムがあると言われています。また、それらも日々アップデートがおこなわれているので、すべてのアルゴリズムに対応したウェブサイトを作るのはとても難しいでしょう。そのため大事なことはアルゴリズムに評価されるウェブサイトを作るのではなく、ユーザーに評価されるウェブサイトを作るということです。Googleは検索エンジンとして「ユーザーの検索意図を理解してユーザーが本当に知りたい情報を提供すること」を重要視しているので、ユーザーのためのウェブサイトを作ることが結果的にアルゴリズムに対しても最適化することにつながります。どんなアルゴリズムがあるかを理解しつつも、ユーザーにとって有益なウェブサイトづくりを目指しましょう。◆SEOで大事な3つの要素 クロール・インデックス・アルゴリズムさて、ここまで検索エンジンで検索順位が決まるまでの3つのステップと、それに対するSEOの取り組み方について書かせていただきました。今回お話したこのクロール・インデックス・アルゴリズムはSEOの基本となる重要ワードになりますので、ぜひ覚えていただければと思います。一般的にSEO対策というと「タイトルタグにキーワードを入れる」「外部リンクを増やす」などピンポイントの施策として紹介されていることが多いですが、どんな施策も本来はこの3つの要素のいずれかを改善するためにおこなうものです。SEO対策をおこなう際は、この3つの要素を意識して「いま自分のウェブサイトではどの要素を改善するべきなのか」を考えながら施策をおこなっていきましょう。今回のお話は「Google 検索の仕組み」というサイトでもっと分かりやすく紹介されています。SEOや検索エンジンについて更に知りたくなった方はぜひご一読ください。▼Google検索の仕組みそれでは、また!

  • 画像:ブログサムネイル

    テクログ

    競技プログラミングを体験しました

    今日はAtCoderという競技プログラミングができるサイトの話です先輩上司がAtCoderをやっていることから以前からAtCoder存在は知っていたのですが、どこか難しいイメージがしていて、今までノータッチでした。ある日、たまたまYoutubeで特集されている動画を見つけました。https://www.youtube.com/watch?v=WGNQrH0AV2k内容としては、『プログラミング初心者の人がやってみた』という内容です。AtCoderにはBeginner Contest なるものがあり、プログラム上級者でなくても受験しやすいコンテストがあることを、そこで知りました。入社から1年たったし、力試しでやってみるか!とBeginner Contestを受けてみました(言語はPHPを選択しました)結果は以下の通りです。A問題B問題は簡単に解けましたがC問題で苦戦しました。C問題も4割ほど正解できたのですが、そこでタイムアップでした(画像ではC問題を提出したかったのに間違ってA問題として提出してしまってます。終わってから気付きました、、w )Youtubeの人はC問題まで解けたいたようなので、「ぐぬぬ、初心者に負けてしまった」と悔しい内容となりました。また受けてみようと思います

  • テクログ

    PHP技術者認定試験奮闘記

    お久しぶりです。JSです。コアテックにはテックリードという役割がありますが、この役割に就くには資格が必須となります。将来的にはテックリードを目指すために、PHP技術者認定試験に挑戦することにしました。ちなみに資格試験を受けるのは8年前位の基本情報技術者試験以来です。PHP5技術者認定上級・準上級試験の基本事項について説明します。問題数は60問で試験時間は2時間で、選択式です。5割以上から7割未満の正解で準上級合格、7割以上の正解で上級合格になります。準上級がITスキル標準(ITSS)のレベル2(基本情報技術者試験と同レベル)、上級がレベル3(応用情報技術者試験と同レベル)で、上級の合格率は10%以下です。合格率は10%と難しそうですが、自分のスペックです。・文系で未経験でこの業界に入る・運転免許の筆記試験に1回落ち、2回目で合格・基本情報技術者試験は就職してから2年目に受け1回落ち、2回目で合格・漢検2級は高校時代に一発合格諦めの悪さと運だけで10年この業界で働いているので、スペックは低いエンジニアです。PHPの経験は7~8年ですが、このスペックで上級試験に合格できるのでしょうか。年末にこの2冊の本を買い、勉強を開始しました。・徹底攻略 PHP5 技術者認定 [上級] 試験問題集 [PJ0-200]対応 (日本語)https://www.amazon.co.jp/exec/obidos/ASIN/4844334670/atopinn-22/・プログラミングPHP 第3版https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0PHP-%E7%AC%AC3%E7%89%88-Kevin-Tatroe/dp/48731166862月下旬に試験を受けますが、それまでに勉強したことです。・過去問を解き、解答の解説をテキストにまとめる・一通り過去問を解き終わったら、毎日解解答の解説をテキストにまとめたものを読み、その後過去問を解く2月下旬に試験を受けるまで、過去問を解いた回数は2回です。一発で上級に合格は難しいと考えていたので、2月下旬の試験は準上級合格が目標でした。試験を終えたときの感触は5割から6割程度は正解してそうな感じでした。結果は60問中35問の正解し、約6割程度の正解率で準上級に合格できました。感想としては知らない言葉が結構出てくる、正しいものを選ぶより間違っているものを選ぶ問題が多いという印象でした。上級に合格にするには後7問正解数を増やさないといけないので、どうするか考えました。・過去問と似たような問題があったが、曖昧に覚えていたため3~4問間違えているので、過去問の類似問題は間違えないようにする・プログラミングPHPに載っているソースコードが出ているので、プログラミングPHPを読む必要がある・試験で出てきた知らない言葉は調べる3月下旬に試験を受けますが、1回目の試験後から3月下旬の試験までに勉強したことです。・試験で出てきた知らない言葉は調べ、テキストにまとめる・毎日解解答の解説をテキストにまとめたものを読み、その後プログラミングPHPを読む・直前に過去問を解くプログラミングPHPは2回読み、過去問を解いた回数は1回です。3月下旬に試験を受けましたが、結果は60問中42問正解し、ちょうど7割正解で上級に合格できました。PHP技術者認定試験には「この問題を後で見直す」機能があり、今回は恐らく不正解の問題にはこれにチェックを入れ、何問程度間違っているか確認してました。解答提出直前には恐らく不正解の数が20~21問でしたので、その通りだと惜しくも不合格、運がよければ合格という状況でした。不合格だと思っていたので、合格したときは驚きました。最後は運の良さで上級に合格できましたが、在宅勤務で通勤がなくなり、それにより勉強時間が確保できたことが一番大きかったと思います。在宅勤務を導入した会社の方々にはこの場をお借りして感謝申し上げます。ちなみに2021年の秋からPHP8技術者認定上級試験が始まるそうです。皆さんも、是非資格試験に挑戦してみてください。

  • 画像:ブログサムネイル

    テクログ

    簡単にわかるUXとUIの違いと関係性。

    Web制作の現場では日々「UI/UX的に~」という言葉がよく一緒になって使われていますが、それは本当にUI/UX的なのでしょうか。UXの観点かと思って話を進めていたら、「あれ?それUIの話じゃない?」と思う時はないでしょうか。先ず、一般的に提唱されているUXとUIは以下の通り。UXとはユーザーエクスペリエンス(英: user experience)とは、人工物(製品、システム、サービスなど)の利用を通じてユーザーが得る経験である。しばしば「UX」と略される[1]。「ユーザー経験」「ユーザー体験」などと訳される。ユーザーエクスペリエンス - WikipediaUIとはユーザインタフェース(英: User Interface、 UI)または使用者インタフェースは、機械、特にコンピュータとその機械の利用者(通常は人間)の間での情報をやりとりするためのインタフェースである。ユーザインタフェース - Wikipediaなんか、どちらもちょっと似ていませんか?製品、システム、サービスとの間で情報をやりとりし、それらの利用を通じて得られる体験がすなわちUI/UX???UXの定義はなに?このUI/UXの理解について混乱をまねいているのは、UXの定義に諸説があるからです。中でも、今までに私が同業仲間とUXの話をしていた際、UXの焦点が製品・サービス内なのか、潜在的ユーザーが誕生する仮説の時点からなのか?といった、広義的か狭義的かの範囲の相違が大半でした。ブランディング = ロゴデザインと思ってしまいがちなのと似ています。いずれにしても、UIはUXに包括されており、大げさな例ですが下記の図式が基本的なUXとUIの位置付けになります。潜在ユーザーが目的を持った瞬間から目的を達成するまでを、ペルソナやカスタマージャーニーマップを作成して体験をデザインするのがUXデザイン。その中でWeb制作に切っては切れない関係のスマホは「タッチポイント」と呼ばれ、ユーザーがどういった感情や状況化で利用するのかを調べます。余談ですが、CX(顧客体験)はUXのBtoB版なのでデザインの方法は同じです。一方で、ユーザーが目的達成までに接触するものがUIとなります。したがって、スマホ自体、Webサイト自体、Webサイト内のボタン一つひとつまでもがUI。UXデザイン上で浮上したユーザー(ペルソナ)がWebサイト内でいかに理想の行動をとってくれるかを研究します。※予算によっては被験者を呼び、ユーザビリティテストを行います。こういったUXとUIの違い、関係性を理解しておけば、例えばディレクターはその要望(目的)にWebサイト自体が必要であるかどうかを判断もしやすくなりますし、プロジェクトメンバー間でUI/UXについて相違があってもお互いに立ち返れるようになると思います。

  • テクログ

    Resource Hintsを使いこなしたい

    今対応している案件でHTMLレンダリングを高速化できないかと考えておりまして、今までバックエンド側の対策を中心に考えていたのですが、フロントも何か解決策はないかと思い調べていたらResource Hintsなるものに出会いました。ざっくり言うと遷移前のページで遷移先の情報を事前取得することで遷移先のレンダリングを早くするという手法です。実用例としては以下の様にユーザーが次に移動すると考えられるページURLを指定します。・フォームの入力画面→確認画面・ブログの一覧・詳細→トップページHTMLに属性を追加するだけで簡単に実現できるので試していこうと思います。