TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでPDFファイルを開く方法について解説しています。PDFを開くときの基本の書き方、新規タブで開く場合の書き方についてサンプルコードで説明します。実行結果を画面上で確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでPDFファイルを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

PDFファイルを開く方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

PDFファイルとは

PDFファイルとは電子化された書類のことを指します。

単純にワードファイルやエクセルファイルをPDF化できるだけでなく、スキャナされたものもPDFファイルとして扱えるので、その利用法は多岐にわたるといえるでしょう。

 

JavaScriptでPDFファイルを開く方法

システムによってはJavaScriptでPDFファイルを開く必要があります。

JavaScriptでPDFファイルを開く方法として、

document.location.href = “XXX.pdf”

を使用しましょう。

XXXには、PDFの存在する場所とファイル名を記載することで使用できます。

 

[PR] コーディングで副業する方法とは

新規タブでPDFファイルを開く方法

JavaScriptの新規タブでPDFを開く方法は、

window.open( ‘XXX.pdf’ )
といったコードを使用しましょう。

実際に書いてみよう

ここでは、実際にコードに記述していきます。
まずは、PDFファイルを開く方法からコードを記述していきます。
PDFファイルはHTMLファイルと同じフォルダ内に配置してみましょう。
<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
        document.location.href = "こんにちは.pdf";
    </script>
  </body>
</html>
 それでは、次に新規タブでPDFを開きます。
<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
        window.open( 'こんにちは.pdf' );
    </script>
  </body>
</html>

 

まとめ

JavaScriptでPDFファイルを開く方法を現役エンジニアが解説しました。
PDFは電子書類として最も利用されているファイル形式と言っても過言ではありません。
この機会に扱い方をマスターしましょう。

 

執筆してくれたメンター

メンターTK

大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。

その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。

 

大石ゆかり

JavaScriptでPDFファイルを開く方法が分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptのfor..in文の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのfor..in文の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptで変数に格納されている値のサイズを求める方法を現役エンジニアが解説【初心者向け】

JavaScriptで変数に格納されている値のサイズを求める方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...
JavaScript

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Doru Ciobanu氏によって投稿されました。 ...
JavaScript

JavaScriptのAudioオブジェクトの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのAudioオブジェクトの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向...
JavaScript

JavaScriptでid名を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでid名を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Java...
JavaScript

JavaScriptにおけるオブジェクト指向について現役エンジニアが解説【初心者向け】

JavaScriptにおけるオブジェクト指向について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そ...
JavaScript

あわせてよく読まれている記事

PythonでExcelファイルをPDFに変換する方法を現役エンジニアが解説【初心者向け】

PythonでExcelファイルをPDFに変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。   Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonでExcelファイルをPDFに変換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ExcelファイルをPDFに変換する方法 ExcelファイルをPDFに変換する方法はいくつか存在しています。 最も一般的な方法は、Excelの「ファイル」→「エクスポート」→「PDF/XDSの作成」という手順を踏むことでExcelから直接PDFに変換するというものです。 しかし、この方法では、多数のExcelファイルをPDFに変換したい場合、1つ1つ変換を行なうため、膨大な時間が掛かることも少なくありません。 そのため、Pythonを使ってプログラミングによってExcelファイルからPDFに変換すると良いでしょう。   PythonでExcelファイルを扱うには、win32comと呼ばれるモジュールを使います。 このモジュールはデフォルトでは入っていないので、pipでインストールしましょう。 pip install pywin32 続いて、ExcelファイルをPythonで読み込むには、適当な変数名を用意(ここでは”excel”)して、エクセルファイルを開くための設定を行ないます。 excel = win32com.client.Dispatch("Excel.Application") #Excelを操作するための設定 file = excel.Workbooks.Open('Excelファイルの絶対パス') これで、Excelファイルを開くことができました。   開いたファイルをPDFに変換する場合、シートをインデックスで指定し(左から順に1から始まる数字。複数の場合はリスト型にする)、下記のように記述してみましょう。 file.WorkSheets(シートのインデックス).Select() file.ActiveSheet,ExportAsFixedFormat(0, 'PDFファイルの保存先の絶対パス') #第一引数の0はPDFを指定するもの。 これで、ExcelファイルをPDFに変換できました。   実際に書いてみよう プログラムを記述し、ExcelファイルのPDF化を行ないましょう。 import win32com.client #win32comをインポートするだけでは上手くいかないので注意！！ excel = win32com.client.Dsipatch("Excel.Application") file = excel.Workbooks.Open("エクセルファイルの絶対パス(拡張子は.xlsx)") file.WorkSheets(PDF化したいシートのインデックス).Select() file.ActiveSheet.ExportAsFixedFormat(0,"保存先の絶対パス(拡張子は.pdf)") これを実行すれば、好きなExcelファイルをPDFに変換できることが可能です。   [PR] コーディングで副業する方法とはPDFをExcelファイルに変換する方法 ここでは、PDFをExcelファイルに変換する方法を解説します。 PDFをExcelファイルに変換する場合、表になっていてExcel形式に変換できるものに限られる点は注意が必要です。 変換方法は、「PDFファイル」→「CSVファイル」→「Excelファイル」という手順で行ないます。 この場合、CSVファイルに変換し、pandasを使えばかんたんにExcelファイルに変換することができるでしょう。   「PDF」→「CSVファイル」の変換には、tabulaモジュールのread_pdf関数を使います。 インストールされていなければ、下記のコードで実行してください。 pip install tabula-py   インストールが完了したら、下記のコードでPDFからExcelファイルに変換できます。 from tabula import read_pdf import pandas as pd file = read_pdf("PDFファイルの絶対パス", pages = 1) file.to_excel("保存先のExcelファイルの絶対パス")   まとめ この記事では、Pythonを使ってExcelファイルとPDFファイルを相互に変換する方法について解説しました。 事務処理等で役に立つことがある実用的な方法なので、有効に活用してみてください。   執筆してくれたメンター メンターOS AIプログラミングを使って開発を行う。 プログラミング歴は約3年でPythonは割と得意。 好きな物理理論は一般相対性理論で動物も好き。   大石ゆかり PythonでExcelファイルをPDFに変換する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、今後も分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
Python

HTMLをPDFに変換するwkhtmltopdfの使い方を現役デザイナーが解説【初心者向け】

HTMLをPDFに変換するPythonライブラリ「wkhtmltopdf」の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 wkhtmltopdfを利用することで、手元やインターネット上のHTMLファイルをPDFファイルに変換できます。 実務でもHTMLファイルをPDFファイルに自動変換する場合などに活用してみてください。 目次PDFファイルとはJavaScriptでPDFファイルを開く方法新規タブでPDFファイルを開く方法実際に書いてみようまとめ執筆してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLをPDFに変換するwkhtmltopdfの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   PDF変換するには HTMLファイルをPDFを変換するには、オンラインで変換する方法とフリーソフトで変換する方法があります。 Webサイトを変換するだけだと、オンラインで行うと簡単です。 また、自前で作成したHTMLファイルをPDFでドキュメント化するには、フリーソフトを使って変換するやり方がおすすめです。 HTMLで作成したドキュメントをPDFファイルにして他の人へ送ることで、作成したWebサイトのデザインを確認してもらえます。 そして、文章の不備を確認してもらうこともできるので、やり方を知っておくと便利です。 今回は、フリーソフトやオンラインでPDF変換する方法ではなく、wkhtmltopdfを利用する方法をご紹介します。 wkhtmltopdfを利用することで、Pythonのプログラムの中でPDF変換作業を実装することも可能になります。   wkhtmltopdfのインストールとセットアップ方法 今回はPDFに変換するソフトとして、wkhtmltopdfをインストールしていきます。 wkhtmltopdfはコマンドラインでHTMLをPDFに変換するツールです。   以下の公式サイトからDownloadsをクリックして、お使いのOSに合わせてインストーラをダウンロードします。 https://wkhtmltopdf.org/ ダウンロード後、画面に従って標準設定でインストール作業を進めていただければ、セットアップも完了します。   [PR] コーディングで副業する方法とはwkhtmltopdfでHTMLをPDFに変換してみよう インストールを終えたら、実際にHTMLをPDFに変換してみましょう。 以下のHTMLを変換してみます。 ファイル名はindex.htmlとします。 サンプルコード <!DOCTYPE html>                                                                <html> <head>       <title>Hello HTML</title>       <meta charset="UTF-8"> </head>       <body>           <h1>こんにちは</h1>           <p>これはHTMLのサンプルです</p>       </body> </html> wkhtmltopdfサンプルコマンド wkhtmltopdf index.html output.pdf   解説 wkhtmltopdf コマンドを実行することで、用意したHTMLファイルをPDFファイルに変換できます。 index.htmlと同じフォルダ階層に、output.pdfというpdfファイルが生成されます。 表示結果 作成されたPDFを開くと、HTMLのレイアウトが適用されたドキュメントが生成されます。   wkhtmltopdfでインターネット上のHTMLをPDFに変換してみよう PC内に置いてあるファイルだけでなく、インターネット上のHTMLファイルをPDFに変換することも可能です。 コマンド wkhtmltopdf https://google.com google.pdf   解説 上記コマンドを実行することにより、Googleのホームページのindex.htmlを、google.pdfというpdfに変換できます。 ただし、Webサイトによっては変換できないこともありますのでご注意ください。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次PDFファイルとはJavaScriptでPDFファイルを開く方法新規タブでPDFファイルを開く方法実際に書いてみようまとめ執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。   目次 linkタグとscriptタグ linkタグの使い方 scriptタグ   【動画での解説はこちら！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。 また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。   一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。 しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。 つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。   さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。 多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。 例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できる こうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。   その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。   linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。 （※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。   [PR] コーディングで副業する方法とはlinkタグの使い方 ここからは具体的な使い方について例をみていきます。 まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤 という意味です。 h1  { font-size: 60px;  color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。   そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！   続いて、ファビコンの例も見てみましょう。 ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。   実際のWebサイトでは下のように設定されています。   スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。   大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？ 田島悠介 たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。 大石ゆかり タグに直接CSSを適用したら、どちらが優先されるんでしたっけ？ 田島悠介 タグに直接適用したCSSの方が優先されるよ。 大石ゆかり OK！linkタグ覚えました！   scriptタグ 続いてscriptタグです。 Webページには2種類のページがあります。 １つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。 動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。 このJavaScriptを記述する際に利用するタグが、scriptタグです。   scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。 このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。   今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。 「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。   このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。 外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。   今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。   執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？ 田島悠介 JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。 大石ゆかり プログラミング言語って何だか難しそう。 田島悠介 コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

HTMLのリンクで別ウィンドウを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   目次 別ウィンドウとは HTMLのリンクで別ウィンドウを開く方法 実際に書いてみよう 本記事は、テックアカデミーのWebデザインコースのカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 リンクで別ウィンドウを開く方法について詳しく説明していくね！ 大石ゆかり お願いします！   別ウィンドウとは ブラウザは複数のウィンドウを立ち上げることが可能で、別ウィンドウとは、現在Webサイトを開いているウィンドウとは別のウィンドウのことを指します。 通常のリンクでは、同じウインドウ内でページを移動します。   [PR] コーディングで副業する方法とはHTMLのリンクで別ウィンドウを開く方法 HTMLでは、別ウィンドウを立ち上げることができません。 代替案として、同じウィンドウの別タブでページを開くことができます。 外部リンク（現在閲覧しているWebサイトとは別のサイトを参照する）の場合や、お問い合わせなどの入力フォームで、「プライバシーポリシー」のページを表示する際など、現在のページをキープしながら別のページを見せたいときに、別タブで開く方法が用いられていることが多いです。 どうしても別タブではなく、別ウィンドウでWebサイトを開きたい場合には、JavaScriptで新規ウィンドウを開く方法を現役エンジニアが解説【初心者向け】の記事を参考にしてください。   別タブ（GoogleChrome）   別ウィンドウ（GoogleChrome）   別タブでページを開きたい場合にも、通常のリンクと同様に<a>タグを使用します。 TechAcademyマガジンのトップページに移動するリンクを配置したい場合、HTMLは以下のように書きます。 <a href="https://techacademy.jp/magazine/">TechAcademyMagazine</a>     別タブでページを開く場合には、<a> タグに target=”_blank” を追加して、以下のように書きます。 <a href="https://techacademy.jp/magazine/" target="_blank">TechAcademyMagazine</a>     ただし、別タブで外部ページを開く場合には注意が必要です。 別タブで開いたWebサイト上に悪意のあるプログラムが書かれていた場合に、元のタブのWebサイトにアクセスされて別の悪意のあるWebサイトに移動されてしまう可能性があります。 これを回避するための方法として、target=”_blank”を使用する際には<a>タグにさらに、rel=”noopener” または rel=”noreferrer” を追加し、以下のように書くとよいです。 <a href="https://techacademy.jp/magazine/" target="_blank" rel="noopener">TechAcademyMagazine</a> <a href="https://techacademy.jp/magazine/" target="_blank" rel="norefferrer">TechAcademyMagazine</a>     こうすることで、別タブで開いたWebサイトに万が一、悪意のあるプログラムが書かれていても安心です。 rel="noopener" や rel="noreferrer" はあってもなくても動作に変わりはありません。 IE11では rel="noopener"が非対応（2021/2/10）ですので、rel="noopener noreferrer" としておくとよいでしょう。 参考：https://web.dev/external-anchors-use-rel-noopener/ 実際に書いてみよう テックアカデミー マガジンのWebサイトをそのままのタブで開くリンクと、別タブで開くリンクを書いてみます。 通常のリンク（同じタブでページを移動） <a href="https://techacademy.jp/magazine/">TechAcademyMagazine</a> 実際のリンク > TechAcademyMagazine 別タブで開くリンク <a href="https://techacademy.jp/magazine/" target="_blank" rel="noopener noreferrer">TechAcademyMagazine（別タブで開きます）</a> 実際のリンク > TechAcademyMagazine   執筆してくれたメンター メンター稲員さん フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。おうち大好きマンです。   大石ゆかり 内容わかりやすくて良かったです！ 田島悠介 ゆかりちゃんもわからないことがあったら質問してね！ 大石ゆかり わかりました。ありがとうございます！ HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

PHPでファイルの書き込みを行う方法｜file_puts_contents関数を理解する！【初心者向け】

文字をファイルに保存するにはテキストエディタを使いますが、この記事ではPHPのプログラムからファイルへ書き込む方法を扱います。 この記事では関数1つでファイルへの書き込みができるfile_put_contents関数と、ファイルの書き込み処理を3つに分けたfopen・fwrite・fclose関数について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPのデータはデータベースだけでなく、テキストファイルに書き込むこともできるので、ぜひ書き方を覚えておきましょう。 目次PDFファイルとはJavaScriptでPDFファイルを開く方法新規タブでPDFファイルを開く方法実際に書いてみようまとめ執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   file_puts_contents関数とは 本来、ファイルの書き込み操作をプログラムから行うには、ファイルを開く・書き込む・閉じるという一連の操作が必要です。 このファイルへの書き込みの3つの処理を一度にしてくれるのがfile_puts_contents関数です。 ファイル名の文字列と書き込みたい内容をfile_puts_contents関数に渡すだけで、必要な処理を行ってくれます。 file_puts_contents関数を使うと、存在しないファイル名を指定した場合は新規作成され、すでに存在するファイル名を指定した場合は上書き保存されます。 また同時に書き込むことがないよう、処理中にファイルをロックすることも可能です。   ファイル書き込みの書き方 自動でファイルの書き込み【file_put_contents関数】 通常のファイル操作で必要なファイルを開く・書き込み・閉じる処理をすべて自動で行ってくれます。 書き込んだバイト数 = file_put_contents(ファイル名, 書き込む内容); 書き込みたいファイル名と、ファイルに書き込む内容をfile_puts_contents関数に渡します。 戻り値は、書き込みが失敗した場合はfalse、成功した場合は書き込まれたバイト数を返します。 ※バイト(byte)とは256通りの情報を扱える単位で、ファイルへの書き込みの最小単位です。半角英数は1バイトで表現できますが、漢字やひらがなの全角文字は2から3バイトで表現されます。 ※3つめのパラメータにFILE_APPENDフラグを指定してファイルの末尾から追記したり、LOCK_EXフラグで他のプログラムなどから同じファイルを開かれて同時に書き込まれないようにできます。   手動でファイルの書き込み【fopen・fwrite・fclose関数】 ファイルを開く・書き込む・閉じる処理を分けて行うには、それぞれfopen・fwrite・fclose関数を使います。 1.ファイルを開く ファイルポインタ = fopen(ファイル名, モード); fopen関数で指定したファイル名を開きます。 モードは、開いたファイルをアクセスする形式を指定します。 主なモードには以下の種類があります。 モード 説明 “r” 読み込み専用で開きます。書き込みはできません。 “w” 書き込み専用で開きます。既存ファイルの中身は消去されます。 “r+” 読み書き両用で開きます。ファイルの先頭から処理されます。 “a” 追記用で開きます。ファイルの最後から書き込まれます。 戻り値のファイルポインタとは、ファイルを処理するときの管理用のもので開いたファイルを特定し、次に読み書きされるファイル内の位置を記憶しています。 ※ファイルポインタの位置を設定するには、ファイルを開いたときのモードで指定する（たとえば”w”なら最初、”a”なら最後など）か、任意の位置に移動させるfseek関数などを使って行います。 ※ファイルを読み書きするとファイルポインタの位置が移動します。   2.ファイルへ書き込む 書き込んだバイト数 = fwrite(ファイルポインタ, 書き込む内容); すでに開かれているファイルと処理する位置をファイルポインタで指定し、書き込む内容を関数に渡します。 戻り値は書き込みが成功した場合は書き込まれたバイト数、失敗した場合はfalseを返します。   3.ファイルを閉じる fclose(ファイルポインタ); ファイルの処理が終了したら、fclose関数に処理が終わったファイルポインタを渡してファイルを閉じます。   [PR] コーディングで副業する方法とは実際に書いてみよう file_put_contents <?php define("TESTFILE","./TEST.txt"); $s = "上書き"; print_r("file_put_tcontents関数n"); file_put_contents(TESTFILE,$s); var_dump(file_get_contents(TESTFILE)); ?>   実行結果 $ php 01.php file_put_tcontents関数 string(9) "上書き"   fwrite <?php define("TESTFILE","./TEST.txt"); $fh = fopen(TESTFILE, "w"); echo "fwrite関数n"; fwrite($fh,"書き込み"); fclose($fh); var_dump(file_get_contents(TESTFILE)); ?>   実行結果 $ php fwrite.php fwrite関数 string(12) "書き込み"   おわりに ファイルの書き込みを実行できるようになると、プログラムを終了してもデータを保持できます。 基本的ですが、とても重宝する機能なのでしっかりとマスターしましょう。   大石ゆかり file_put_contents関数は、1行でファイルに書き込めていますね。 田島悠介 fwriteだと、ファイルを開くモードを指定してファイルを開き、ファイルハンドルを取得してから書き込まなければならないんだよ。 大石ゆかり ちょっと面倒ですね。 田島悠介 そうだね。ファイルに書き込むのは簡単だけど、PHPの場合、Webで複数人で使用する場合が多いよね。そうなるとファイルロックが必要になるんだよ。そこで違ってきたりするんだよね。   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】