はじめに JavaScriptは、WebページにユーザインタラクティブなUIを実装するためのプログラミング言語です。この言語は、文法が単純であるため、プログラミング経験のない初心者でも、比較的容易に学習することができます。JavaScriptのフレームワークの1つであるjQueryの出現により、学習コストは更に下がりました。 Webが普及し始めた頃は、WebサイトのコンテンツやUIは非常にシンプルでした。よってJavaScriptで実装する機能も、多くの場合、ごく単純なものに限られました。しかしブラウザの表現能力の向上によって、リッチなWebサイトを構築することができるようになると、JavaScriptの役割も大きく変わってきました。それまでの補助的な役割から、サービスを実現するために欠かせないものになりました。HTML5で、新たにcanvasやインラインSVG、indexed DBなどが

海外発の二大決済代行サービスである、PayPal（ペイパル）とStripe（ストライプ）について、両サービスの特徴や手数料についてまとめてみました。 ネットビジネスなどで、クレジットカード決済の導入を検討している方は参考にしてみてください。

この記事を書いているのは夏真っ盛りな時期なんですが、なんだか今日は寒いです。デスクワークを2x年続けてると気温の変化についていけず困ったもんでございます。 というわけでみなさまどうも。 前回は『変数』について色々とやりましたね。ちょっと地味な記事が続いているので今回はちょいとPHPの強力さとか便利さを紹介したいと思います。 その名も『インクルード処理』でございます。これ超便利です。ちなみにこれは正式な名前じゃないです。私が勝手に呼んでるだけです。 (´-`).｡oO（とはいうものの、『インクルード処理』といえば大体伝わる気がします...) 『インクルード』(include)とは直訳すると「含める、入れる」って意味になり、プログラミングにおいての『インクルード』は『他のファイルに記述した内容を取り込む』という感じの意味になります。これは正式な言葉です。違ってたらすみません。 さて、当記事をお

この記事では、SSLストリッピング(stripping)やHSTS(HTTP Strict Transport Security)の仕組みについて解説します。 SEO対策の一環として、セキュリティを高めることが重要視されていますが、その中でセキュリティヘッダーについて理解が浅かったので記事にまとめま... Content Security Policy (CSP) Header always set Content-Security-Policy "upgrade-insecure-requests" CSPは、Webサイト上で許可されたコンテンツを読み込むようにブラウザに指示します。 XSSやデータインジェクション攻撃を防ぐことを目的とした非常に強力なヘッダーです。 X-Content-Type-Options Header always set X-Content-Type-Optio

fopen関数を使ってファイルを読み込みと書き込みを行う方法について解説します。 この記事のポイント fopen関数の基本的な使い方が分かる ファイルから1行ずつテキストを読み込む ファイルの先頭にテキストを追記する ファイル操作で便利なfopen関数 fopen関数を使うと、指定したパスのファイルを開いてアクセスできる状態にすることができます。 コード例 fopen('./test/data.txt', 'r'); 第1パラメータはファイルへのパスを指定し、第2パラメータは「読み込み」「書き込み」などのモードを指定します。 ファイルを開くことに成功したらファイルポインターリソース（ファイルハンドラとも呼ぶことがあります）を返し、失敗した場合にはfalseを返します。 ファイルポインターリソースはアクセスするファイルの目印となるもので、変数に保持してfgets関数やfwrite関数などのフ

こんにちは森田です。 前回の記事で サイトパフォーマンス改善でよく見るボトルネックになる要因 を書いたのですが、ではそれをどのように改善すべきか？については深く掘り下げませんでした。 今回はその手段の1つとなりえる rel="preload" についてご紹介します。 rel=”preload” とはrel="preload" は <link> 要素に指定する rel 属性に付ける値です。 また、併せて as属性で種類を指定します。 rel="preload" を指定することでコンテンツの先読みができるようになり、Core Web Vitals の向上やサイト高速化をすることができるようになります。 執筆時現在、IE以外のモバイルを含む主要なブラウザは rel="preload" に対応しています。 2021.04現在の rel=”preload”の対応状況as 属性について併記するas属性

CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に

Yahoo! JAPAN は日本にて検索やニュースといったメディアサービス、e コマース、メールサービスなど、100を超えるサービスを提供している企業です。これらのサービスで利用するためのユーザーアカウントも長年提供し続け、月間のログインユーザーは 5,000 万を超える規模となっています。しかし、このユーザーアカウントを提供する中で、ユーザーアカウントに対しての攻撃を継続的に受けており、また、アカウントを継続利用する上での課題についてユーザーから問い合わせも多く頂いていました。これらの課題の多くはパスワードという認証手段に依存するものでした。また、当時、技術的にもパスワード以外の認証手段を提供するための機能やデバイスの普及が始まりつつありました。こういった背景のもと、Yahoo! JAPAN はパスワードによる認証からパスワードレスな認証へ移行すると判断しました。 なぜパスワードレスか

はじめに Webエンジニアの皆さん、日々の業務お疲れ様です。皆さんは、さぞや楽しいエンジニアライフを送っていることでしょう。最近は技術の進歩も落ち着いてきましたので、Rustなんかに手を出して、先行者利益を目論んだりしているのではないでしょうか。 さて、そんな楽しい中、たまにやってくる何とも言い難い案件というのが「WordPressのテーマ作成」です。普段、大規模開発や自社サービスに携わっている方は、WordPressに関わることはないかもしれませんが、請負業務やフリーランスの方には、ふと湧いてくる案件でもあります。そして、何かと言い訳を付け、できる限りWordPress関連の案件は避けているのではないでしょうか。 なぜ、エンジニアはWordPressを嫌うのか エンジニアというのはWordPressを嫌う傾向にありますが、それは何故でしょうか。 プライドがゆるさない WordPress界

さまざまな要素を含む文字列を1つの文字列で表現できる「正規表現」を、楽しみながら学んでいけるゲーム「Regex Hunting」が登場したので、実際にプレイしてみました。 Regex Hunting https://www.regex-hunting.com/ サイトにアクセスしたら「Start」をクリック。 するとサイト下部へとスクロールし、3種類のクエストが表示されます。まずは初級編の「スタート」をクリック。 ゲーム開始前に、正規表現の説明をスライドで確認できるので、右下の三角アイコンをクリックするか、カーソルの右キーを押します。 説明の一例が「文字クラス」。[acz#]と表記すると「a」「c」「z」「#」のいずれか1文字にマッチします。アルファベットが連続しているようであれば[a-z]とすれば小文字のaからzまで、[B-X]なら大文字のBからXまでにマッチする、という風に、正規表現初

2年ほど動画投稿して得られた収益 ニコニコ動画：約50万円 youtube：0円 小遣い稼ぎ程度に動画投稿・生配信やろうと思ったら断然ニコニコなんだわ — はゆ茶ﾀﾞﾖﾀﾞﾖはゆ茶ﾀﾞﾖ🍵🍡 (@HaYuTeA) May 14, 2022 👆先日このツイートが多くの人の目に入ったことで、ニコニコに対して様々な感情を持つ人がいました そこで！ここでは具体的に今のニコニコはどうなのか、どんな意図であのツイートを投稿したのかを解説していきます 【定義】 「ニコ動で生配信！」等、混乱を招かない為にここでは ニコニコ関連サービスの総称を「ニコニコ」 ニコニコ動画を「ニコ動」 ニコニコ生放送を「ニコ生」 と呼ぶことにします 0.ｺﾝﾁﾜ私は一投稿者・視聴者としてニコニコに対して価値や魅力を感じていますが、(く)の発表会 でニコニコから離れた人や、噂だけ飲み込んでしまって現状を知らない人たちによっ

毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば Twitter のように下にどんどんコンテンツが伸びていく UI が良い例だろう。そのような UI を無限スクロールと呼ぶことが正式なのかは知らないが、このような体験の実現を支援するライブラリに infinite-scroll というものがあり、少しは普及している呼び方なのだと思い無限スクロールという言葉を使う。一方で WEB フロントエンド文脈で無限スクロールと言うと複雑 GUI やドローイングツール実装における "無限平面" のようなニュアンスもあるが、今は無限平面のことを指しているわけ

『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪

formタグのaction属性にURLをセットするだけで、データの管理や自動返信メールの送信などができる、ヘッドレスフォームサービスです。

日本の携帯電話に向けたTwitter公式サイト（ http://twtr.jp）に、電子メールで投稿する機能「メールでツイート」が加わりました。「ホーム」ページに「メールでツイート」という項目があります。これをクリックすると、あなたのアカウントにひもづいた秘密のメールアドレスを表示します。このメールアドレス宛に投稿したい文字を送るだけで、ツイートできます。このメールアドレスをアドレス帳に登録しておくと便利ですね。 ツイートしたい内容は、メールの本文に書いてください。文章が140文字以上ある場合は、冒頭から140文字目までがツイートになります。「件名」は空で構いません。メールアドレスは他の人に教えないように注意しましょう。誰かに知られてしまったときには「登録メールアドレスの更新」機能を使って、新しいメールアドレスに更新してください。 まだ携帯向け公式サイトを使ったことのない方も、これを機会に

May 9, 2022 プログラミングの学習は時間と労力のかかる学習で、途中で学習を挫折してしまう事も珍しくありません。学習が思ったように進まないと、自分はプログラミングに向いていないのではといった迷いが出ることも少なくないでしょう。 このような問題についての研究は長年続けられており、2015年にラトビア大学のJuris Borzovs氏、Lalia Niedrite氏、Darja Solodovnikova氏らが「コンピュータプログラミング適性検査による中退学生の削減」という論文を発表しました。この論文では心理テスト、高校数学の補修講座、出願前のプログラミング体験、メンタープログラムなどによるドロップアウト削減施策が講じられました。 今回はこの論文の中から特に目に付いた点を紹介します。 半数近くの学生がコンピュータサイエンスを初年度に中退 MBTI診断テストとプログラミング学習の関連 E