High SierraにTexを入れ直した話

環境構築 その他

Texを使って執筆中についついOSをアップグレードしてしまい, Texがエラーを起こしたので入れ直した際のメモ.

自分の環境ではMacTex 2017を使ってインストールします.

 

既存のTexの削除

AppCleaner等のアプリケーションを使って削除, Homebrew等で管理してる人はコマンドを使って削除します.

 

MacTex 2017

Homebrewを使っている人はMacTexをいれる前にGhostScriptをインストールします.

 $ brew install ghostscript

Homebrewを使っていない人はMacTexの中にもGhostscriptが入っているので次にすすんでください.

次にMacTexをダウンロードします. MacTexは公式サイトもしくはミラーサイトからMacTeX.pkgをダウンロードしてください.

ダウンロード後はパッケージをインストールします.

GhostScriptをHomebrewで導入した人は [インストールの種類] では[カスタマイズ]をクリック. カスタムインストールの画面でGhostscriptのチェックを外して, [インストール]をクリックします.

そうじゃない人は[インストールの種類]では[インストール]をクリック.

MacTex 2017内のアップデート

インストールが終了したらMacTex内のアップデートを行います.

TexLive

TexLiveの中身をアップデートするためにターミナルから次のコマンドを打ち込みます.

 $ sudo tlmgr update --self --all

更新には時間がかかります. 自分の環境では1時間程度かかりました.

BibDesk

[BibDesk]→[Check for Updates]で最新バージョンに更新します.

LaTeXiT

[LaTeXiT]→[アップデートを確認]で最新バージョンに更新します.

TexShop

[TeX Shop]→[アップデートを確認]で最新バージョンに更新します.

日本語フォントの導入

High Sierraではヒラギノフォントの使用が変わってしまったらしいので, 次のようにしてヒラギノフォントを導入していきます.

cjk-gs-support

 High Sierraで変更されたフォントのパスやファイル名を反映してからシンボリックリンクを ${TEXMF}/fonts/opentype/ 以下に作成します.

$ git clone https://github.com/texjporg/cjk-gs-support.git
$ cd cjk-gs-support
$ sudo ./cjk-gs-integrate.pl --link-texmf --fontdef-add=./cjkgs-macos-highsierra.dat
$ sudo mktexlsr

jfontmaps

 dvipdfmx のためのmapファイルを作成します.

$ git clone https://github.com/texjporg/jfontmaps.git
$ cd jfontmaps
$ kpsewhich -var-value=TEXMFHOME

上記のコマンドを実行してでてきた結果が自分のPCの中に実在しないディレクトリの場合にはMakefileの中身の1行目を書き換えます.

(実在しているかどうかはlsコマンド等で調べてください.)

書き換えは以下の用に行います.

$ vim Makefile

例：自分の環境の場合

#TEXMF = $(shell kpsewhich -var-value=TEXMFHOME)
TEXMF = /usr/local/texlive/texmf-local

書き換えた後に次のようにコマンドをターミナル上で入力します.

$ sudo make install
$ cd script
$ sudo mktexlsr
$ sudo ./kanji-config-updmap-sys.sh hiragino-highsierra-pron
$ sudo mktexlsr

確認方法

適当なhogehoge.texがあるディレクトリで以下のコマンドを入力してエラーがでなければ問題ないはずです.

$ uplatex hogehoge.tex
$ dvipdfmx hogehoge.dvi

以下のエラーが起きた場合

自分の環境でTexShopを用いてタイプセットを行った際に以下のようなエラーが発生しました.

This is ptex2pdf[.lua] version 20170622.0.
Processing master_thesis.tex
This is e-upTeX, Version 3.14159265-p3.7.1-u1.22-161114-2.6 (utf8.uptex) (TeX Live 2017) (preloaded format=uplatex)
 restricted \write18 enabled.
entering extended mode
(./master_thesis.tex
pLaTeX2e <2017/10/28u01>+4 (based on LaTeX2e <2017-04-15>)
Babel <3.17> and hyphenation patterns for 84 language(s) loaded.
(/usr/local/texlive/2017/texmf-dist/tex/platex/base/jreport.cls
Document Class: jreport 2017/09/19 v1.7g Standard pLaTeX class
(/usr/local/texlive/2017/texmf-dist/tex/platex/base/jsize11.clo)

/usr/local/texlive/2017/texmf-dist/tex/platex/base/jreport.cls:700: LaTeX Error
: Encoding scheme `JY1' unknown.

See the LaTeX manual or LaTeX Companion for explanation.
Type  H <return>  for immediate help.
 ...                                              
                                                  
l.700 ...\DeclareSymbolFont{mincho}{JY1}{mc}{m}{n}

エラーを辿っていくと長々と続きます.

Encoding scheme `JY1' unknown.

ということなので, エンコーディングが上手くいってないみたいです？

試行錯誤しているとどうもTexShopのエンジンが原因のようです.

解決方法

TexShopの設定がupTexであったことがどうも原因みたいでpTexの設定に直したら正常にタイプセットできました. 設定の変更方法は"command + ,"もしくは[TeX Shop]→[環境設定]で以下のように設定します.

 

f:id:shsm385:20180210185949p:plain

参考文献

qiita.com

dat.gui を使ってみた

Javascript プログラミング

学生生活の中でThree.js を使う機会が多いのですが, 機能操作のボタン等を CSS や Bootstrap を使って書いていたのですが,  個人的に dat.gui を使ったほうがクールなデザインで使いやすいと思ったので今回触ってみました.

 

dat.gui とは？

dat.gui とはJavascriptを使ってブラウザの上でパラメータ等を操作できるものです.

Three.js の example でよく使われています.

それぞれ必要なライブラリは以下の公式ホームページから取ってきてください.

Three.js : https://threejs.org/

dat.gui : https://github.com/dataarts/dat.gui

 

今回使って作ってみたページ

・スクリーンショット

f:id:shsm385:20171230180733p:plain

 ・内容

 　Three.jsを使って描いた立方体のカメラ視点と色を変えられるようにしてみました.

　また, ボタンを押すとイベントが発生するものを作ってみました.

 

 

・コーディング部分

立方体の描画部分のHTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>dat.guiの練習</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="index.js"></script>
</body>
</html>

立方体の描画部分（JS）

window.addEventListener('DOMContentLoaded', init);

function init() {
  // シーン
  var scene = new THREE.Scene();

  // レンダラー
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // カメラ
  var camera = new THREE.PerspectiveCamera( 15, window.innerWidth / window.innerHeight);
  camera.position.set(0, 0, 100);
  scene.add(camera);

  // マウス
  var controls = new THREE.OrbitControls(camera);

  // ライト
  light = new THREE.DirectionalLight(0xcccccc,1);
  light.position = new THREE.Vector3(0, 10, 10);
  ambient = new THREE.AmbientLight(0x333333);
  scene.add(light);
  scene.add(ambient);

  // キューブ
  var geometry = new THREE.BoxGeometry(12,12,12);
  var c = '#c2dc94';
  var material = new THREE.MeshPhongMaterial({color: c});
  var cube = new THREE.Mesh( geometry, material);
  cube.position.set(0,0,0);
  scene.add(cube);

  // レンダリング
  function render(){
    requestAnimationFrame(render);
    controls.update();
    renderer.render(scene,camera);
  }
  render();
}

 dat.gui 部分

// GUIパラメータ
  var guiCtrl = function(){
    this.Camera_x = 0;
    this.Camera_y = 0;
    this.Camera_z = 100;
    this.Message = '';
    this.color = "#c2dc94";
    this.alert = function(){
      alert("サンプル");
    };
  };

  gui = new dat.GUI();
  guiObj = new guiCtrl();
  var folder = gui.addFolder('Folder');
  folder.add( guiObj, 'Camera_x', 0, 100 ).onChange(setCameraPosition);
  folder.add( guiObj, 'Camera_y', 0, 100 ).onChange(setCameraPosition);
  folder.add( guiObj, 'Camera_z', 0, 100 ).onChange(setCameraPosition);
  folder.addColor( guiObj , 'color' ).onChange(setColor);
  folder.add( guiObj, 'alert' );
  folder.open();

  function setCameraPosition(){
    camera.position.set(guiObj.Camera_x, guiObj.Camera_y, guiObj.Camera_z);
  }

  function setColor(){
    material = new THREE.MeshPhongMaterial({color: guiObj.color});
    var cube = new THREE.Mesh( geometry, material);
    scene.add(cube);
  }

基本的な使い方としては初期値をパラメータとして設定する.

次に, dat.gui とパラメータのインスタンスを作成して add() で結びつけます.

通常は dat.gui のインスタンスに add() していけばよいのですが, 今回はフォルダ分けをしていますので folder に追加します.

もちろん関数を用いた更新処理やパラメータとして関数を設定できたりします.

使い勝手がよかったので興味が湧いたら使ってみてください.

今回のページのソースは以下からダウンロードできます.

GitHub - shsm385/dat.gui_pra: dat.gui の練習リポジトリ

参考ページ

dat.gui チュートリアル : dat.GUI

dat.gui APIドキュメント : dat.gui/API.md at master · dataarts/dat.gui · GitHub